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