Three.js 的第一个工程-创建一个旋转方块
工程结构
每个three.js工程至少需要一个 HTML 文件用于定义一个网页，一个 JavaScript 文件来运行 three.js 代码。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module" src="/main.js"></script>
</body>
</html>
main.js
import * as THREE from 'three';
public/ 文件夹
静态文件夹，用于存放所有要推送到网页的文本、音频、三维模型。
至此，把基本的工程文件结构已经建好了，接下来，需要在本地运行这个工程，并且通过一个网页浏览器进行访问查看。可以通过 npm 和 构建工具 或者通过 CDN 导入 three.js 来完成安装和本地开发。
安装 NPM 和 构建工具
在终端进行操作，安装NPM和VITE。
安装NPM
安装 three.js
npm install --save three
安装vite
npm install --save-dev vite
上述安装操作会在工程路径下生成 node_modules/文件夹和 package.json文件。
可以在工程根目录新建一个 jsconfig.json 文件，添加以下配置有助于编辑器定位 three.js 文件，从而实现更强大的自动补全功能。
{
"compilerOptions": {
// other options...
"paths": {
"three/webgpu": ["node_modules/three/build/three.webgpu.js"],
"three/tsl": ["node_modules/three/build/three.tsl.js"],
},
}
}
试运行
服务器终端运行
npx vite --host
可见
VITE v7.0.6 ready in 101 ms
➜ Local: http://localhost:5173/
➜ Network: http://192.168.254.160:5173/
➜ press h + enter to show help
浏览器访问
本机访问：浏览器，输入http://localhost:5173/
远程访问：浏览器，输入http://192.168.254.160:5173/
three.js应用整体结构
渲染器(Renderer)
将三维场景渲染成一个二维图片现实在画布上。
场景图（Scene)
场景图由很对对象组成，包括网格(Mesh)、光源（Light)、群组（Group)、三维物体(Object3D)和摄像机(Camera)对象。
摄像机(Camera)
摄像机有一半在场景图中，一般在场景图外，且可以放置多个摄像机在一个场景中。
接下来，创建一个最基本的three.js场景，一个旋转方块。
设置场景(scene) 相机（Camera) 渲染器（renderer)
1. 场景（Scene）
场景是 Three.js 中所有 3D 对象的容器。类似一个“舞台”，所有的物体、灯光、相机都放置在这个舞台上。
const scene = new THREE.Scene();
2. 相机（Camera）
相机决定了从哪个角度观看场景，就像真实世界中的摄像机一样。
最常用的是透视相机（PerspectiveCamera），它模拟人眼的视觉效果，近大远小。
第一个属性是视场角（field of view）。视场角是指在任意给定时刻，屏幕上能看到的场景范围，其值以角度为单位，选75，较大的值意味着更宽广的视角和更多的场景可见，而较小的值则会产生类似望远镜的效果。
第二个属性是宽高比（aspect ratio），设置window.innerWidth / window.innerHeight，匹配浏览器窗口，确保渲染出的3D场景不会因为窗口尺寸的变化而失真，从而保持正确的视角。
三、四连个属性是：近裁剪面（near）和远裁剪面（far）。表示比“远”值1000更远或比“近”值0.1更近的物体将不会被渲染。
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
scene.add(camera);
3. 渲染器（Renderer）
渲染器负责将场景和相机的内容绘制到屏幕上。
通过const renderer = new THREE.WebGLRenderer();创建一个名叫renderer的渲染器THREE.WebGLRenderer的实例。
设置渲染器实例画布的尺寸是窗口尺寸。
把渲染器renderer的DOM元素添加为网页主体body的子元素。
three.js使用WebGL渲染时，会创建一个
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
添加三维模型
创建立方体实例gepmetry，是BoxGeometry，宽高深的均为1。
创建材质实例material，材质是MeshBasicMaterial基础材质，不需要光照也能看到（适合测试），颜色为0x00ff00，绿色。
将形状和材质组合，创建实际物体cube，网格对象Mesh。
将cube添加到场景scene中。
因为物体在(0,0,0)，所以把相机沿z轴向前移动5个单位，让cube可观测。
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
渲染场景
添加动画循环，持续渲染。
定义一个animate函数，用renderer这个渲染器实例的方法render 将当前的 scene（场景）和 camera（相机）渲染出来。再通过方法setAnimationLoop启动持续的动画渲染，仿佛调用animation。
function animate() {
renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );
添加旋转动画
在animation函数/方法中，添加rotation逻辑。动画会每帧执行一次。可以看到绿色方块在旋转。
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
浙公网安备 33010602011771号