【1-认识three.js与开发环境搭建】

---

前言

在 web 三维开发场景中，Three.js 是使用最多的 3D 引擎库，当前 Starred 107k：

• Manual 入门手册：为新手介绍了一些入门知识，优先查看。
• Examples 示例：包含了很多官方demo，做类似功能时查看相关 api 的用法。
• Docs 文档：详细说明了 three.js 对外提供的每个 class 类的属性和方法。

本地部署 threejs 官网文档与案例

threejs 官网提供了文档与案例，但是有的时候国内访问速度比较慢或打不开，我们可以将官网的文档与案例部署到本地，这样可以提高访问速度。

部署步骤：

1. 进入 threejs 的 github 仓库，点击 clone 或者 download 获取最新版代码。如果想要获取历史版本代码，点击右侧的 Releases 标签或顶部的 Tags 标签。
2. 将代码下载到本地，解压后得到一个文件夹。
3. 将文件夹放到 nginx 中 或使用 vscode 的 live server 插件打开。
4. 访问 http://localhost:8000/docs 即可查看文档。
5. 访问 http://localhost:8000/examples 即可查看示例。

当前 github 上最新版本是 r177，每个月都有更新一个版本。
为了和视频教程中的保持一致，避免新手学习阶段出现不必要的问题，本人选择了 r153 版本。后续项目实战时，再更新到最新版本。

---

threejs 结合 vue 进行开发

1. 安装 threejs 与 typescript 类型定义 pnpm add three@0.153.0 @types/three@0.153.0 -D

2. 打开官网的创建一个场景页面http://localhost:5501/three.js-r153/docs/index.html#manual/zh/introduction/Creating-a-scene，复制最下面的完整代码到 vue 项目中，一个正在旋转的立方体就显示出来了。

创建一个场景和物体

完整示例代码如下，后续基于此代码扩展。

<script setup lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { onMounted, onUnmounted } from 'vue'// 定义setup内的全局变量
let scene, camera, renderer, controls, cubeonMounted(() => {init()addCube()
})onUnmounted(() => {try {// 释放three.js占用的内存scene.clear()renderer.dispose()renderer.forceContextLoss()renderer.content = nullconst gl = renderer.domElement.getContext('webgl')gl && gl.getExtension('WEBGL_lose_context').loseContext()} catch (error) {console.log(error)}
})const init = () => {/* 1. 初始化三维场景 *//* 1.1 创建场景对象 */scene = new THREE.Scene()/* 1.2 相机设置 */const container = document.getElementById('threeModel')camera = new THREE.PerspectiveCamera(75, // 控制相机的视野角度，通常用于模拟人眼或摄像机的视觉范围。值越大，看到的视野越广，但物体看起来会更小；值越小，则视野变窄，物体看起来更大。container.offsetWidth / container.offsetHeight, // 宽高比,0.1, // 近裁剪面距离（小于该距离的物体不会被渲染）1000 // 远裁剪面距离（大于该距离的物体不会被渲染）)/* 1.3 渲染器设置 */renderer = new THREE.WebGLRenderer({antialias: true, // 开启抗锯齿（Antialiasing），使模型边缘更平滑，提升视觉效果，但会增加性能开销。alpha: true, // 启用透明通道（Alpha Channel），允许背景透明（如果未设置背景色），适用于将 3D 场景叠加在网页其他内容上。logarithmicDepthBuffer: true, // 使用对数深度缓冲（Logarithmic Depth Buffer），解决大规模场景中远处物体深度精度不足导致的“闪烁”或“穿透”问题，尤其适合大范围地形/建筑可视化。})// 设置渲染器的像素比，以适应高DPI设备renderer.setPixelRatio(window.devicePixelRatio)// 根据容器的大小设置渲染器的尺寸，以确保正确的显示效果renderer.setSize(container.offsetWidth, container.offsetHeight)// 启用自动清除功能，以避免在每一帧渲染时出现视觉残留renderer.autoClear = true// 将渲染器的DOM元素添加到页面中的容器中，使其可见container.appendChild(renderer.domElement)/* 1.4 轨道控制器 */controls = new OrbitControls(camera, renderer.domElement)// 将其设置为true以启用阻尼（惯性），这将给控制器带来重量感controls.enableDamping = true// 当.enableDamping设置为true的时候，阻尼惯性有多大controls.dampingFactor = 0.05// controls.addEventListener("change", function () {//   console.log(controls.object.position);//   console.log(controls.target);// });/* 1.5 辅助元素 */// 添加世界坐标辅助器const axesHelper = new THREE.AxesHelper(5)scene.add(axesHelper)/* 1.6 动画渲染 */function animate() {requestAnimationFrame(animate)if (cube) {cube.rotation.x += 0.01cube.rotation.y += 0.01}controls.update()renderer.render(scene, camera)}animate()
}const addCube = () => {/* 2. 创建物体 */const geometry = new THREE.BoxGeometry(1, 1, 1)const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })cube = new THREE.Mesh(geometry, material)scene.add(cube)camera.position.z = 5
}
</script><template><div id="threeModel" />
</template><style lang="scss" scoped>
#threeModel {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
</style>