three.js教程1-快速入门

1、项目开发环境引入threeJs

如果采用的是Vue + threejs或React + threejs技术栈，threejs就是一个js库，直接通过npm命令行安装就行。

npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本)

// 比如安装148版本
npm install three@0.148.0 --save

// 引入three.js
import * as THREE from 'three';

除了three.js核心库以外，在threejs文件包中examples/jsm目录下，还可以看到各种不同功能的扩展库。

// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// 扩展库引入——旧版本，比如122, 新版本路径addons替换了examples/jsm
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

2、type="importmap"配置——扩展库引入

通过配置<script type="importmap">，让学习环境.html文件，也能和vue或react开发环境中一样方式方式引入threejs扩展库。这样你实际项目的开发环境复制课程源码，不用改变threejs引入代码。

<script type="importmap">
    {
        "imports": {
            "three": "./three.js/build/three.module.js",
            "three/addons/": "./three.js/examples/jsm/"
        }
    }
</script>

<script type="module">
    // three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库
    // 扩展库OrbitControls.js
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    // 扩展库GLTFLoader.js
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    console.log(OrbitControls);
    console.log(GLTFLoader);
</script>

 3、3D场景逻辑结构

 （1）三维场景Scene

你可以把三维场景Scene对象理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界。

// 创建3D场景对象Scene
const scene = new THREE.Scene();

（2）物体形状：几何体geometry

Three.js提供了各种各样的几何体API，用来表示三维物体的几何形状

文档搜索关键词geometry你可以看到threejs提供各种几何体相关API，具体使用方法，也可以参考文档。

//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100);

（3）物体外观：材质Material

如果你想定义物体的外观效果，比如颜色，就需要通过材质Material相关的API实现。

//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
});

（4）物体：网格模型Mesh

实际生活中有各种各样的物体，在threejs中可以通过网格模型Mesh表示一个虚拟的物体，比如一个箱子、一个鼠标。

/ 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

//设置网格模型在三维空间中的位置坐标，默认是坐标原点
mesh.position.set(0,10,0);
//通过add方法把网格模型mesh添加到场景中
scene.add(mesh);

4、虚拟相机

透视投影相机PerspectiveCamera本质上就是在模拟人眼观察这个世界的规律，远小近大，距离越远看着越小，距离越近看着越大。

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera();

（1）位置属性position

生活中用相机拍照，你相机位置不同，拍照结果也不同，threejs中虚拟相机同样如此。

//相机在Three.js三维坐标系中的位置
// 根据需要设置相机位置具体值(x,y,z)
camera.position.set(200, 200, 200);

(2) 观察目标lookAt()

相机拍照你需要控制相机的拍照目标，具体说相机镜头对准哪个物体或说哪个坐标。对于threejs相机而言，就是设置.lookAt()方法的参数，指定一个3D坐标。

/相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(0, 0, 0); //坐标原点
camera.lookAt(mesh.position);//指向mesh对应的位置

注意：如果OrbitControls有target属性，则相机的lookAt属性就失效了

（3）up属性，结果朝向

//默认是( 0, 1, 0 )，默认是y轴朝上
//现在改成z轴朝上
camera.up.set(0, 0, 1)

（4）相机视野范围：视椎体

透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = 800; //宽度
const height = 500; //高度
//构造器(视野角度fov：默认50, Canvas画布宽高比aspect：默认是1, 近裁截面距离near：默认0.1, 远裁截面距离far：默认2000)
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

5、渲染器

生活中如果有了景物和相机，那么如果想获得一张照片，就需要你拿着相机，按一下，咔，完成拍照。对于threejs而言，如果完成“咔”这个拍照动作，就需要WebGL渲染器WebGLRenderer。

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
// 定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

渲染器WebGLRenderer执行渲染方法.render()就可以生成一个Canvas画布(照片)，并把三维场景Scene呈现在canvas画布上面,你可以把.render()理解为相机的拍照动作“咔”。

renderer.render(scene, camera); //执行渲染操作
//Canvas画布插入到div元素中
document.getElementById('webgl').appendChild(renderer.domElement);

渲染器锯齿模糊设置

// 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
// 不同硬件设备的屏幕的设备像素比window.devicePixelRatio值可能不同
renderer.setPixelRatio(window.devicePixelRatio);//设置设备像素比
renderer.setClearColor(0x444444, 1); //设置背景颜色
renderer.antialias = true,  //抗锯齿，平滑

6、坐标轴辅助AxesHelper

用户在三维空间中显示3个坐标轴的对象，坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。

// AxesHelper：辅助观察的坐标系，辅助开发调试，项目正式发布时隐藏
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

7、光源光照

实际生活中物体表面的明暗效果是会受到光照的影响，threejs中同样也要模拟光照Light对网格模型Mesh表面的影响。

threejs提供的网格材质，有的受光照影响，有的不受光照影响。

基础网格材质MeshBasicMaterial不会受到光照影响(有光源和没有光源，它都会显示颜色和材质)。

漫反射网格材质MeshLambertMaterial会受到光照影响(如果没有光源，它就是暗的，不会显示颜色和材质)，该材质也可以称为Lambert网格材质，音译为兰伯特网格材质。不同面和光线夹角不同，立方体不同面就会呈现出来不同的明暗效果。

高光(镜面)网格材质MeshPhongMaterial可以提供一个高光反射效果。在太阳下面观察一辆车，你会发现在特定角度和位置，你可以看到车表面某个局部区域非常高亮。（高光亮度属性.shininess，高光颜色属性.specular）

（1）环境光AmbientLight

环境光AmbientLight没有特定方向，只是整体改变场景的光照明暗。

//环境光:没有特定方向，整体改变场景的光照明暗
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

（2）其他发光光源：点光源、平行光、聚光

//点光源：两个参数分别表示光源颜色和光照强度
// 参数1：0xffffff是纯白光,表示光源颜色
// 参数2：1.0,表示光照强度，可以根据需要调整
const pointLight = new THREE.PointLight(0xffffff, 1.0);
//点光源位置
pointLight.position.set(400, 0, 0);//点光源放在x轴上
scene.add(directionalLight); //点光源添加到场景中

// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50);
// 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
directionalLight.target = mesh;
scene.add(directionalLight);

（3）点光源辅助PointLightHelper

// 光源辅助
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);

8、相机轨道控制器OrbitControls

OrbitControls可用于实现三维场景的放大缩小、旋转和平移等操作。

OrbitControls本质上就是改变相机的参数，比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。

旋转：拖动鼠标左键

缩放：滚动鼠标中键

平移：拖动鼠标右键

// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls( camera, renderer.domElement );
// requestAnimationFrame实现周期性循环执行
// requestAnimationFrame默认每秒钟执行60次，但不一定能做到，要看代码的性能
function render() {
    renderer.render(scene, camera); //执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    requestAnimationFrame(render);//请求再次执行函数render
}
render();

注意相机控件OrbitControls会影响lookAt设置，注意手动设置OrbitControls的目标参数

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 相机控件.target属性在OrbitControls.js内部表示相机目标观察点，默认0,0,0
controls.target.set(1000, 0, 1000);
controls.update();//update()函数内会执行camera.lookAt(controls.targe)

9、canvas画布全屏显示

需要监控浏览器窗口的变化，一旦canvas画布宽高度动态变化,需要更新相机和渲染的参数，否则无法正常渲染。

<style>
    body{
        overflow: hidden;
        margin: 0px;
    }
</style>

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
const height = window.innerHeight; //窗口文档显示区的高度作为画布高度
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

// onresize 事件会在窗口被调整大小时发生
window.onresize = function () {
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
    // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
    // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
    camera.updateProjectionMatrix();
};

10、stats查看threejs渲染帧率

three.js每执行WebGL渲染器.render()方法一次，就在canvas画布上得到一帧图像，不停地周期性执行.render()方法就可以更新canvas画布内容，一般场景越复杂往往渲染性能越低，也就是每秒钟执行.render()的次数越低。

通过stats.js库可以查看three.js当前的渲染性能，具体说就是计算three.js的渲染帧率(FPS),所谓渲染帧率(FPS)，简单说就是three.js每秒钟完成的渲染次数，一般渲染达到每秒钟60次为最佳状态。

stats.js下载链接：https://github.com/mrdoob/stats.js

//引入性能监视器stats.js
import Stats from 'three/addons/libs/stats.module.js';

//创建stats对象
const stats = new Stats();
//stats.domElement:web页面上输出计算结果,一个div元素，
document.body.appendChild(stats.domElement);
// 渲染函数
function render() {
    //循环调用方法update(),来刷新时间
    stats.update();
    renderer.render(scene, camera); //执行渲染操作
    requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}
render();

下面展示一个完整案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Three.js中文网：http://www.webgl3d.cn/</title>
    <style>
        body{
            overflow: hidden;
             margin: 0px;
        }
    </style>
</head>

<body>
    <!-- type="importmap"功能：.html文件中也能和nodejs开发环境中一样方式，引入npm安装的js库 -->
    <script type="importmap">
        {
            "imports": {
                "three": "../../../three.js/build/three.module.js",
                "three/addons/": "../../../three.js/examples/jsm/"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        //引入性能监视器stats.js,显示帧率
        import Stats from 'three/addons/libs/stats.module.js';
        //创建stats对象
        const stats = new Stats();
        //Stats.domElement:web页面上输出计算结果,一个div元素
        document.body.appendChild(stats.domElement);

        // 三维场景
        const scene = new THREE.Scene();

        // 创建网格模型对象
        const geometry = new THREE.BoxGeometry(100, 100, 100);
        // 漫反射网格材质；MeshLambertMaterial
        const material = new THREE.MeshLambertMaterial({
            color: 0x00ffff, //设置材质颜色
            transparent: true, //开启透明
            opacity: 0.5, //设置透明度
        });
        const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中

        //辅助观察的坐标系
        const axesHelper = new THREE.AxesHelper(100);
        scene.add(axesHelper);

        //光源设置
        const pointLight = new THREE.PointLight(0xffffff, 1.0);
        pointLight.position.set(400, 200, 300);
        scene.add(pointLight);
        const ambient = new THREE.AmbientLight(0xffffff, 0.4);
        scene.add(ambient);

        //渲染器和相机
        const width = window.innerWidth;
        const height = window.innerHeight;
        const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
        camera.position.set(292, 223, 185);
        camera.lookAt(0, 0, 0);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);

        // 渲染循环
        function render() {
            stats.update();//渲染循环中执行stats.update()来刷新时间
            renderer.render(scene, camera);
            mesh.rotateY(0.01);
            requestAnimationFrame(render);
        }
        render();

        const controls = new OrbitControls(camera, renderer.domElement);

        // 画布跟随窗口变化
        window.onresize = function () {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        };
    </script>
</body>

</html>

文章中部分素材选取自Threejs中文网：http://www.webgl3d.cn/