06Threejs电影拍摄角度-第三章：搭建场景 - 初始化环境

第三章"搭建场景 - 初始化环境"是开始实际编写Three.js代码的起点。以下是每个小节的详细教程：示例

3.1 设置Three.js项目结构

教程：

项目目录：创建一个包含HTML、CSS、JavaScript文件以及必要的资源（如模型、纹理）的目录结构。
文件命名：为文件和资源命名时使用有意义的名称，以便于识别和维护。

示例：

bash 复制代码

/project-name
    /css
        style.css
    /js
        main.js
    /models
    /textures
    index.html

3.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 --save

npm安装后，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"。