Three.js的入門(mén)案例（上）

<div class="canvas" id="canvasObj"></div>

html,body,.canvas{    width:100%;    height: 100%;    padding:0px;    margin:0px;}.canvas{    background:url(../libs/threejs/img/bg.jpg) no-repeat;    background-size:100% 100%;}

import * as THREE from '../libs/threeJs/three.module.js';import { OrbitControls } from '../libs/threeJs/controls/OrbitControls.js';//軸道控制器控件import { CSS2DRenderer, CSS2DObject } from '../libs/threeJs/renderers/CSS2DRenderer.js';//css 2D渲染器

_this.scene=function(){    scene = new THREE.Scene();}

_this.camera=function(){    /**     * 構(gòu)造函數(shù)總共有四個(gè)參數(shù)，分別是fov，aspect，near，far      * fov:照相機(jī)視錐體垂直視野角度,實(shí)際項(xiàng)目中一般都定義45，因?yàn)?5最接近人正常睜眼角度     * aspect:照相機(jī)視錐體長(zhǎng)寬比     * near:照相機(jī)視錐體近端面   far:照相機(jī)視錐體遠(yuǎn)端面     * */    camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);//遠(yuǎn)景投影的相機(jī)    camera.position.set(10, 2, 20);//position用來(lái)指定相機(jī)在三維坐標(biāo)中的位置}

_this.addSphere=function(){    /**     * 初始化球體幾何模型     * SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)     * radius:球體半徑     * widthSegments:水平分割面的數(shù)量     * heightSegments:垂直分割面的數(shù)量     * */    var earthGeometry = new THREE.SphereGeometry(_this.EARTH_RADIUS, 60, 60);        var textureLoader = new THREE.TextureLoader();//紋理加載器，用于加載球體的紋理    //基礎(chǔ)網(wǎng)孔材料    var earthMaterial = new THREE.MeshBasicMaterial({        color:0xffffff,//線條的十六進(jìn)制顏色        map: textureLoader.load(_this.sphereBg),//設(shè)置紋理貼圖        wireframe: false,//渲染模型為線框        wireframeLinewidth: 3,//線框線寬        skinning: false,//定義材料是否使用皮膚    });        //threeJs 的世界中，材質(zhì)(Material)+幾何體(Geometry)就是一個(gè) mesh    //創(chuàng)建網(wǎng)格對(duì)象    earth = new THREE.Mesh(earthGeometry, earthMaterial);        //設(shè)置球體標(biāo)題    var h2html=$("<div class='title'><span>Three.js球體<br/>旋轉(zhuǎn)案例</span></div>").get(0);    var earthLabel = new CSS2DObject(h2html);    earthLabel.position.set(0, 2, 0);    earth.add(earthLabel);//DOM元素實(shí)例添加到網(wǎng)格中        scene.add(earth);//將球體添加到場(chǎng)景中}

_this.renderer=function(){    renderer = new THREE.WebGLRenderer({      alpha: true,//背景是否透明      antialias: true//抗鋸齒屬性    });    //window.devicePixelRatio返回當(dāng)前顯示設(shè)備的物理像素分辨率與CSS像素分辨率之比    //設(shè)置設(shè)備像素比。通常用于HiDPI設(shè)備防止模糊輸出canvas    renderer.setPixelRatio(window.devicePixelRatio);    renderer.setSize(canvasWidth, canvasHeight);//調(diào)整輸出canvas尺寸    canvasObj.append(renderer.domElement);//把canvas添加Dom中        /**     * 初始化CSS 2D渲染器     * 可以將三維物體和基于HTML的標(biāo)簽相結(jié)合    */    labelRenderer = new CSS2DRenderer();    labelRenderer.setSize(canvasWidth, canvasHeight);    labelRenderer.domElement.style.position = 'absolute';    labelRenderer.domElement.style.top = 0;    canvasObj.append(labelRenderer.domElement);}

_this.renderFun=function(){    requestAnimationFrame(_this.renderFun);        var now = new Date();    var delay = now - lastDate;    lastDate = now;    var intc = 3;  // 每秒轉(zhuǎn)3度
    earth.rotation.y += Math.PI / 180 / delay * intc;    labelRenderer.render(scene, camera);    renderer.render(scene, camera);}

//初始化_this.init=function(){    _this.scene();    _this.camera();    _this.addSphere();    _this.renderer();        //軸道控制器。相機(jī)對(duì)象作為參數(shù)，控件可以監(jiān)聽(tīng)鼠標(biāo)的變化，改變相機(jī)對(duì)象屬性    var controls = new OrbitControls(camera);    controls.enabled = true;//鼠標(biāo)控制是否可用        //滾輪是否可控制zoom，zoom速度默認(rèn)1    controls.enableZoom = false;    controls.zoomSpeed = 1.0;    // controls.minDistance = 20;// 最小距離    // controls.maxDistance = 25; //最大距離    controls.noPan = true; // 禁用右鍵拖動(dòng)    controls.minPolarAngle = Math.PI / 180; // 視角不能低于水平面    controls.maxPolarAngle = Math.PI / 2; // 視角不能低于水平面    _this.renderFun();//渲染    }