第三章“搭建场景 - 初始化环境”是开始实际编写Three.js代码的起点。以下是每个小节的详细教程： 示例
3.1 设置Three.js项目结构
教程：
- 项目目录：创建一个包含HTML、CSS、JavaScript文件以及必要的资源（如模型、纹理）的目录结构。
- 文件命名：为文件和资源命名时使用有意义的名称，以便于识别和维护。
示例：
/project-name
/css
style.css
/js
main.js
/models
/textures
index.html3.2 引入Three.js库
1)纯html界面引入：
- 下载Three.js：从Three.js官网下载库文件或使用CDN链接。
- HTML文件：在HTML文件的
<head>或<body>标签内引入Three.js库。
html
<script src="https://threejs.org/build/three.module.js"></script>ES6 import方式引入
- 给script标签设置type="module",也可以在.html文件中使用import方式引入three.js
javascript
<script type="module">
// 现在浏览器支持ES6语法，自然包括import方式引入js文件
import * as THREE from './build/three.module.js';
</script>- type="importmap"配置路径
javascript
<!-- 具体路径配置，你根据自己文件目录设置-->
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js"
}
}
</script>
<!-- 配置type="importmap",.html文件也能和项目开发环境一样方式引入threejs -->
<script type="module">
import * as THREE from 'three';
// 浏览器控制台测试，是否引入成功
console.log(THREE.Scene);
</script>- type="importmap"配置——扩展库引入 通过配置 type="importmap" ，让学习环境.html文件，也能和vue或react开发环境中一样方式方式引入threejs扩展库。 配置addons/等价于examples/jsm/
javascript
// 引入
<script type="importmap">
{
"imports": {
"three": "./three.js/build/three.module.js",
"three/addons/": "./three.js/examples/jsm/"
}
}
</script>
// 调用
<script type="module">
// three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库
// 扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
console.log(OrbitControls);
console.log(GLTFLoader);
</script>2)Vue + threejs或React + threejs技术栈：
html
// npm安装特定版本three.js(注意使用哪个版本，查文档就查对应版本)
// @0.165.0
npm install three@0.165.0 --savenpm安装后，ES6语法引入three.js核心
html
// 引入three.js
import * as THREE from 'three';3.3 创建基本的3D场景
教程：
- 场景创建：使用
THREE.Scene()创建一个场景对象。 - 相机设置：使用
THREE.PerspectiveCamera()创建并配置相机。 - 渲染器配置：使用
THREE.WebGLRenderer()创建渲染器，并将渲染器的DOM元素附加到HTML文档中。
示例：
javascript
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 渲染场景
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();3.4 配置开发工具和工作流
教程：
- 代码编辑器：选择一个功能强大的代码编辑器，如Visual Studio Code。
- 浏览器开发者工具：学习如何使用浏览器的开发者工具进行调试。
- 版本控制：配置Git等版本控制系统来管理代码变更。
- 构建工具：了解如何使用构建工具，如Webpack或Parcel，来优化和打包项目。
示例：
- 安装Visual Studio Code并配置所需的插件，如ESLint、Prettier等。
- 使用浏览器的开发者工具来检查元素、查看控制台输出、调试JavaScript代码。
- 初始化Git仓库并提交代码：
git init，git add .，git commit -m "Initial commit"。