入门指南：使用Three.js创建你的第一个3D场景

# 1. 简介 ## 1.1 什么是Three.js Three.js 是一个基于 JavaScript 的开源 3D 图形库，它可以简化在 web 上创建和显示 3D 场景的过程。Three.js 使用 WebGL 技术来实现高性能的图形渲染，同时提供了丰富的 API 和组件，使得开发者可以方便地创建复杂的 3D 场景和交互体验。 ## 1.2 为什么选择Three.js 选择 Three.js 的原因有以下几点： - 跨平台：可以在支持 WebGL 的浏览器和设备上展示 3D 场景，实现跨平台的兼容性。 - 强大的功能：Three.js 提供了丰富的功能和工具，可以轻松实现复杂的 3D 场景和交互效果。 - 社区支持：Three.js 有一个庞大的开发者社区，提供了大量的文档、示例和教程，便于学习和问题解决。 - 性能优秀：基于 WebGL 技术，Three.js 实现了高性能的图形渲染，能够在 web 上呈现流畅的 3D 效果。以上是使用 Markdown 格式展示的第一章内容，接下来我将为你继续输出其他章节的内容。 # 2. 准备工作在开始使用Three.js之前，我们需要进行一些准备工作，包括安装和引入Three.js库，以及设置渲染器和场景。 ### 安装和引入Three.js 首先，在你的项目中安装Three.js库。你可以选择通过npm进行安装，也可以直接从CDN引入。以下是通过CDN引入的方法： ```html <!DOCTYPE html> <html> <head> <title>Three.js Demo</title> <script src="https://threejs.org/build/three.min.js"></script> </head> <body> </body> </html> ``` 在这个例子中，我们直接从https://threejs.org/build/地址引入了压缩后的Three.js库。 ### 设置渲染器和场景一旦引入了Three.js，接下来我们需要设置渲染器和场景。渲染器负责渲染场景，而场景则包含了所有的3D对象、光源和相机。 ```javascript // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建场景 var scene = new THREE.Scene(); ``` 在这段代码中，我们创建了一个WebGL渲染器，并设置其大小为整个窗口大小。然后，我们创建了一个新的场景。现在，我们已经完成了准备工作，可以开始创建我们的3D场景了。 # 3. 创建场景在使用Three.js创建场景之前，我们首先需要设置渲染器和场景，以便能够正确地显示和管理我们的3D对象。 #### 3.1 添加相机和控制器为了能够在3D场景中查看物体，我们需要添加一个相机。Three.js提供了多种类型的相机，如透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。在这里，我们使用透视相机来创建一个类似于人眼视角的效果。 ```javascript // 创建一个透视相机 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 设置相机的初始位置 camera.position.z = 5; // 添加轨道控制器，可以通过鼠标拖动来调整相机的位置和视角 const controls = new THREE.OrbitControls(camera); ``` #### 3.2 添加光源为了给物体提供光照效果，我们需要添加一个或多个光源。Three.js提供了多种类型的光源，如平行光（DirectionalLight）、点光源（PointLight）和环境光（AmbientLight）等。 ```javascript // 添加一个平行光源 const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(0, 1, 1); // 添加一个环境光源 const ambientLight = new THREE.AmbientLight(0x404040); // 将光源添加到场景中 scene.add(light); scene.add(ambientLight); ``` #### 3.3 添加物体现在我们可以开始向场景中添加物体了。Three.js提供了许多内置的几何体，如立方体（BoxGeometry）、球体（SphereGeometry）和圆柱体（CylinderGeometry）等。我们还可以通过加载模型或创建自定义几何体来添加物体。 ```javascript // 创建一个红色的立方体 const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); const cube = new THREE.Mesh(geometry, material); // 将立方体添加到场景中 scene.add(cube); ``` 以上就是创建场景所需的基本步骤。在后续章节中，我们将学习如何对3D对象进行操作和添加交互控制。 # 4. 3D对象的基本操作在这一章节中，我们将学习如何在Three.js中对3D对象进行基本操作，包括移动、旋转和缩放物体，添加材质和纹理，以及添加简单的动画效果。 #### 4.1 移动、旋转和缩放物体在Three.js中，可以通过改变物体的位置（position）、旋转（rotation）和缩放（scale）属性来实现对物体的移动、旋转和缩放操作。 ```javascript // 移动物体 object.position.x += 0.1; // 沿着x轴正方向移动 // 旋转物体 object.rotation.y += 0.01; // 绕着y轴旋转 // 缩放物体 object.scale.set(2, 2, 2); // 在三个轴方向均匀放大两倍 ``` #### 4.2 添加材质和纹理在Three.js中，可以为物体添加材质和纹理，使其外观更加丰富和生动。 ```javascript // 创建材质 var material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 应用材质到物体上 object.material = material; // 添加纹理 var textureLoader = new THREE.TextureLoader(); var texture = textureLoader.load('texture.jpg'); object.material.map = texture; ``` #### 4.3 添加动画效果通过使用Three.js提供的Tween库或者自定义动画函数，可以为物体添加简单的动画效果。 ```javascript // 使用Tween库添加动画 new TWEEN.Tween(object.position) .to({ x: 2, y: 3, z: 1 }, 2000) .easing(TWEEN.Easing.Quadratic.Out) .start(); // 自定义动画函数 function animate() { requestAnimationFrame(animate); object.rotation.x += 0.01; renderer.render(scene, camera); } ``` 在本章节中，我们学习了如何对Three.js中的3D对象进行移动、旋转和缩放操作，以及如何添加材质、纹理和简单的动画效果。这些操作为我们后续的交互及用户控制提供了基础。 # 5. 交互及用户控制 Three.js允许用户通过鼠标和键盘来与3D场景进行交互和控制，这为用户提供了更加丰富的体验。在本节中，我们将学习如何实现鼠标操作物体、键盘控制相机以及如何响应用户的输入。 #### 5.1 鼠标操作物体在Three.js中，我们可以通过鼠标交互来控制物体的行为，例如拖动物体或点击物体进行某些操作。通过以下代码示例，我们可以实现通过鼠标控制物体的位置： ```javascript // 鼠标事件监听 document.addEventListener('mousedown', onDocumentMouseDown, false); function onDocumentMouseDown(event) { event.preventDefault(); // 通过鼠标的屏幕坐标转换为场景中的坐标 mouseVector.x = (event.clientX / window.innerWidth) * 2 - 1; mouseVector.y = -(event.clientY / window.innerHeight) * 2 + 1; // 从相机位置发射一条射线 raycaster.setFromCamera(mouseVector, camera); // 计算射线和物体的交点 var intersects = raycaster.intersectObjects(scene.children, true); if (intersects.length > 0) { // 获取第一个交点的物体 var selectedObject = intersects[0].object; // 在此处添加具体的交互操作，例如移动、旋转、缩放 } } ``` #### 5.2 键盘控制相机除了鼠标控制外，我们还可以通过键盘来控制相机的移动和视角。以下是一个基本的示例，演示了如何使用键盘控制相机的移动： ```javascript // 键盘事件监听 document.addEventListener('keydown', onDocumentKeyDown, false); function onDocumentKeyDown(event) { var keyCode = event.which; // 根据按键编码来控制相机移动 switch (keyCode) { case 87: // W键，向前移动 camera.position.z -= 0.1; break; case 83: // S键，向后移动 camera.position.z += 0.1; break; case 65: // A键，向左移动 camera.position.x -= 0.1; break; case 68: // D键，向右移动 camera.position.x += 0.1; break; // 添加其他按键对应的操作 } } ``` #### 5.3 响应用户输入用户输入可以是多样化的，可以是键盘输入、鼠标输入、甚至是触摸屏输入。我们可以通过监听这些事件来实现对用户输入的响应，从而提供更加丰富的交互体验。通过本节内容的学习，我们可以实现基本的鼠标和键盘交互控制，以及响应用户输入，从而提升3D场景的交互性和可玩性。 # 6. 导出和发布在完成Three.js场景的创建和编辑后，你可能想要将它导出和发布到不同的平台上，以便与其他人共享或展示。 ### 6.1 将场景导出为静态网页要将场景导出为静态网页，你可以使用Three.js提供的`GLTFExporter`类。这个类可以将场景以GLTF格式进行导出，GLTF是一种开放标准的3D文件格式，广泛支持各种3D建模软件和引擎。下面是一个示例代码，展示了如何使用`GLTFExporter`导出场景： ```javascript // 创建一个GLTF的导出器 var exporter = new THREE.GLTFExporter(); // 导出场景为GLTF格式 exporter.parse(scene, function (result) { // 将导出结果保存为文件，例如使用Blob对象 var blob = new Blob([JSON.stringify(result)], {type: 'application/octet-stream'}); var url = URL.createObjectURL(blob); // 创建一个下载链接 var link = document.createElement('a'); link.style.display = 'none'; document.body.appendChild(link); link.href = url; link.download = 'scene.gltf'; // 模拟点击链接进行下载 link.click(); // 清理资源 document.body.removeChild(link); URL.revokeObjectURL(url); }, {binary: true}); ``` 在上面的代码中，我们首先创建了一个`GLTFExporter`对象，然后使用`parse`方法将场景导出为GLTF格式。导出结果是一个JSON对象，我们可以将其保存为文件。在示例中，我们使用Blob对象创建了一个下载链接，模拟点击链接进行下载。 ### 6.2 使用WebGL技术发布到Web平台 Three.js是基于WebGL技术的，因此你可以将你的场景直接发布到Web平台上，使其可以在任何支持WebGL的浏览器中运行。要将场景发布到Web平台上，你需要将你的场景代码嵌入到一个HTML页面中，并将相关的Three.js库文件引入。下面是一个示例的HTML代码： ```html <!DOCTYPE html> <html> <head> <title>My Three.js Scene</title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body>  <script src="path/to/three.min.js"></script> <script> // 在这里编写你的Three.js场景代码 // ... </script> </body> </html> ``` 将上面的代码保存为一个HTML文件，并将其中的`path/to/three.min.js`替换为你实际引入的Three.js库文件的路径。然后你就可以在Web平台上访问这个HTML文件，查看你的场景了。 ### 6.3 将场景导出为视频或图片如果你希望将场景导出为视频或图片，你可以使用一些其他的工具或库。例如，你可以使用Three.js提供的`WebGLRenderer`的`toDataURL`方法将当前帧导出为Base64编码的图片数据。然后你可以将这些图片数据合成为视频，或者直接保存为图片文件。下面是一个示例代码，展示了如何使用`toDataURL`方法将场景导出为图片： ```javascript // 创建一个渲染器 var renderer = new THREE.WebGLRenderer(); // 设置渲染器的大小和背景色 renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000); // 渲染场景并将结果保存为图片 renderer.render(scene, camera); var imageData = renderer.domElement.toDataURL('image/png'); // 创建一个下载链接 var link = document.createElement('a'); link.style.display = 'none'; document.body.appendChild(link); link.href = imageData; link.download = 'scene.png'; // 模拟点击链接进行下载 link.click(); // 清理资源 document.body.removeChild(link); ``` 在上面的代码中，我们首先创建了一个`WebGLRenderer`对象，然后使用`setSize`方法设置渲染器的大小，并使用`setClearColor`方法设置背景色。接下来，我们使用`render`方法渲染场景，并使用`toDataURL`方法将渲染结果保存为Base64编码的图片数据。最后，我们创建了一个下载链接，并模拟点击链接进行下载。总结：在本章节中，我们介绍了如何将Three.js场景导出为静态网页、使用WebGL技术发布到Web平台，以及如何将场景导出为视频或图片。通过这些方法，你可以将你的Three.js作品分享给其他人，或者将其用于不同的展示和应用场景中。