02.Three.js的入门教程（一）

一、如何下载安装Three.js

1.1.github链接查看所有版本：https://github.com/mrdoob/three.js/releases

1.2.通过npm命令行安装three.js：npm install three --save

二、本地搭建live-server静态服务器

2.1.live-server是一款npm工具，安装命令：npm install -g live-server

2.2.使用CMD进入命令行窗口，进入静态文件的目录，输入脚本live-server即会自动跳入http://127.0.0.1:8080进行访问

三、一个Three.js的最小案例

3.1.引入Three.js

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

3.2.创建场景

/**
 * 创建场景对象Scene
 */
var scene = new THREE.Scene();

3.3.创建网络模型

      网格模型 —— 几何对象、材质对象

      场景添加网络模型

    /**
     * 创建网格模型
     */
    // 01.创建一个球体几何对象
    var geometry = new THREE.SphereGeometry(60, 40, 40); 
    // 创建一个立方体几何对象Geometry
    // var geometry = new THREE.BoxGeometry(100, 100, 100); 

    // 02.材质对象Material
    var material = new THREE.MeshLambertMaterial({
      // 材质颜色  
      color: 0x0022ff,
    }); 
    
     // 03.网格模型对象Mesh
    var mesh = new THREE.Mesh(geometry, material);
     // 网格模型添加到场景中
    scene.add(mesh);

3.4.光源模型

       平行光

       环境光

    /**
    * 光源设置
    */
    // 平行光1
    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
    directionalLight.position.set(400, 200, 300);
    scene.add(directionalLight);

    // 平行光2
    var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
    directionalLight2.position.set(-400, -200, -300);
    scene.add(directionalLight2);
    
    // 环境光
    var ambient = new THREE.AmbientLight(0xffffff, 0.6);
    scene.add(ambient);

3.5.相机设置

       相机在坐标系中的位置

        相机的指向

    /**
     * 相机设置
     */

    // width和height用来设置Three.js输出Canvas画布尺寸
    // 同时用来辅助设置相机渲染范围
    var width = 800; 
    var height = 800; 

    // Three.js输出的Canvas画布宽高比
    var k = width / height; 

    // 控制相机渲染空间左右上下渲染范围，s越大，相机渲染范围越大
    var s = 100; 

    // THREE.OrthographicCamera() 创建一个正投影相机对象
    // -s * k, s * k, s, -s, 1, 1000 定义了一个长方体渲染空间，渲染空间外的模型不会被渲染

    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    
    // 相机在Three.js坐标系中的位置
    camera.position.set(200, 300, 200); 
    // 相机指向Three.js坐标系原点
    camera.lookAt(0, 0, 0); 

3.6.渲染器对象

   像素比率

   渲染区域

    背景颜色

    /**
     * 创建渲染器对象
     */
    // 开启锯齿
    var renderer = new THREE.WebGLRenderer({
        antialias: true, 
    });

    // 设置设备像素比率,防止Canvas画布输出模糊
    renderer.setPixelRatio(window.devicePixelRatio);

    // 设置渲染区域尺寸
    renderer.setSize(width, height);

    // 设置背景颜色 
    renderer.setClearColor(0xb9d3ff, 1); 

3.7.body插入画布，执行渲染

    /**
     * renderer.domElement表示Three.js渲染结果,也就是一个HTML元素(Canvas画布)
     * body元素中插入canvas画布
     */
    document.body.appendChild(renderer.domElement); 
    
    // 执行渲染操作——指定场景、相机作为参数
    renderer.render(scene, camera);

四、坐标轴调试AxesHeilper、渲染循环、扩展库OrbitControls

4.1.坐标轴调试AxesHeilper

    // Three.js三维坐标轴 三个坐标轴颜色RGB分别对应xyz轴
    var axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

4.2.渲染循环

    render();
        
    // 渲染循环
    function render() {
      // 立方体绕y轴旋转动画   
      mesh.rotateY(0.01);
      
      // 执行渲染操作
      renderer.render(scene, camera);
      
      // 请求再次执行渲染函数render，渲染下一帧 
      requestAnimationFrame(render); 
    }

4.3.扩展库OrbitControls

// 引入Three.js扩展库
import { OrbitControls } from '../../../three.jsr123/examples/jsm/controls/OrbitControls.js';

...


// 创建控件对象  控件可以监听鼠标的变化，改变相机对象的属性
// 旋转：拖动鼠标左键
// 缩放：滚动鼠标中键
// 平移：拖动鼠标右键
var controls = new OrbitControls(camera, renderer.domElement);

五、完整代码