Three.js的入门案例（上）

前端达人

共 4478字，需浏览 9分钟

· 2021-02-28

关注初识Threejs与小编一起学习成长

在Three.js的赋能下，WEB网页效果逐渐丰富起来，今天我们就来运用之前学习的Three.js基础知识，实现一个旋转的几何体-球体。

知识点

1、透视投影照相机、基本材质；

2、球体几何模型、全景贴图；

3、渲染器；

创建DOM

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

为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导入依赖，OrbitControls.js是轴道控制器控件，用它可以实现场景与鼠标交互，让场景动起来，控制场景的旋转、缩放、平移；CSS2DRenderer.js是CSS 2D渲染器，使用CSS2DObject和CSS2DRenderer可以绘制一个2D效果的标签，将三维物体和基于HTML的标签相结合。

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渲染器

核心代码

1、初始化场景：

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

2、初始化照相机：

_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用来指定相机在三维坐标中的位置}

3、在场景里面创建球体：

_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);//将球体添加到场景中}

4、初始化渲染器：

_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);}

5、周期性渲染场景：

_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);}

6、调用函数：

//初始化_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();//渲染    }