一、如何下载安装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>
