Three.js的入门案例（上）

<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(){
    /**
     * 构造函数总共有四个参数，分别是fov，aspect，near，far 
     * fov:照相机视锥体垂直视野角度,实际项目中一般都定义45，因为45最接近人正常睁眼角度
     * aspect:照相机视锥体长宽比
     * near:照相机视锥体近端面   far:照相机视锥体远端面
     * */
    camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 1000);//远景投影的相机
    camera.position.set(10, 2, 20);//position用来指定相机在三维坐标中的位置
}

_this.addSphere=function(){
    /**
     * 初始化球体几何模型
     * SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
     * radius:球体半径
     * widthSegments:水平分割面的数量
     * heightSegments:垂直分割面的数量
     * */
    var earthGeometry = new THREE.SphereGeometry(_this.EARTH_RADIUS, 60, 60);
    
    var textureLoader = new THREE.TextureLoader();//纹理加载器，用于加载球体的纹理
    //基础网孔材料
    var earthMaterial = new THREE.MeshBasicMaterial({
        color:0xffffff,//线条的十六进制颜色
        map: textureLoader.load(_this.sphereBg),//设置纹理贴图
        wireframe: false,//渲染模型为线框
        wireframeLinewidth: 3,//线框线宽
        skinning: false,//定义材料是否使用皮肤
    });
    
    //threeJs 的世界中，材质(Material)+几何体(Geometry)就是一个 mesh
    //创建网格对象
    earth = new THREE.Mesh(earthGeometry, earthMaterial);
    
    //设置球体标题
    var h2html=$("<div class='title'><span>Three.js球体<br/>旋转案例</span></div>").get(0);
    var earthLabel = new CSS2DObject(h2html);
    earthLabel.position.set(0, 2, 0);
    earth.add(earthLabel);//DOM元素实例添加到网格中
    
    scene.add(earth);//将球体添加到场景中
}

_this.renderer=function(){
    renderer = new THREE.WebGLRenderer({
      alpha: true,//背景是否透明
      antialias: true//抗锯齿属性
    });
    //window.devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比
    //设置设备像素比。通常用于HiDPI设备防止模糊输出canvas
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(canvasWidth, canvasHeight);//调整输出canvas尺寸
    canvasObj.append(renderer.domElement);//把canvas添加Dom中
    
    /**
     * 初始化CSS 2D渲染器
     * 可以将三维物体和基于HTML的标签相结合
    */
    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;  // 每秒转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();
    
    //轴道控制器。相机对象作为参数，控件可以监听鼠标的变化，改变相机对象属性
    var controls = new OrbitControls(camera);
    controls.enabled = true;//鼠标控制是否可用
    
    //滚轮是否可控制zoom，zoom速度默认1
    controls.enableZoom = false;
    controls.zoomSpeed = 1.0;
    // controls.minDistance = 20;// 最小距离
    // controls.maxDistance = 25; //最大距离
    controls.noPan = true; // 禁用右键拖动
    controls.minPolarAngle = Math.PI / 180; // 视角不能低于水平面
    controls.maxPolarAngle = Math.PI / 2; // 视角不能低于水平面
    _this.renderFun();//渲染    
}