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

五、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Three.js初始化的入门案例</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script type="module">
  /**
   * 1.引入Three.js 
   *
   * 2.创建场景 var scene = new Scene(); 
   
   * 3.创建网格模型：
       3.1.几何对象
       3.2.材质对象
       3.3.网格模型（几何、材质）
       3.4.场景添加网格对象

   * 4.光源模型：
       4.1.平行光 DirectionalLight
       4.2.环境光 AmbientLight

   * 5.相机设置：
       5.1.相机在坐标系中的位置
       5.2.相机的指向

   * 6.渲染器对象：
       6.1.像素比率
       6.2.渲染区域
       6.3.背景颜色

   * 7.renderer.domElement
       表示Three.js渲染结果,也就是一个HTML元素(Canvas画布)

   * 8.Three.js三维坐标轴 三个坐标轴颜色RGB分别对应xyz轴

   * 9.渲染循环

   * 10.创建控件对象  控件可以监听鼠标的变化，改变相机对象的属性

   */
   
    // 一、引入依赖库
    // 引入Three.js
    import * as THREE from './three.js-r123/build/three.module.js';

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

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

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

    // 材质对象Material
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff,//材质颜色
    });

    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中

    /**
     * 四、光源设置
     */
    // 平行光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);
    
   /**
    * 五、相机设置
    */
    // width和height用来设置Three.js输出Canvas画布尺寸，同时用来辅助设置相机渲染范围

    // 窗口文档显示区的宽度
    var width = window.innerWidth; 
    // 窗口文档显示区的高度
    var height = window.innerHeight; 
    
    // Three.js输出的Cnavas画布宽高比
    var k = width / height; 

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

    // 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); 

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

    // 设置设备像素比率,防止Canvas画布输出模糊
    renderer.setPixelRatio(window.devicePixelRatio);
    // 设置渲染区域尺寸
    renderer.setSize(width, height); 
    // 设置背景颜色
    renderer.setClearColor(0xb9d3ff, 1); 

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

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

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

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

  </script>
</body>

</html>

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

猜你喜欢