使用Three.js构建3D场景和交互效果

Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建和展示3D图形与动画。它提供了丰富的功能与工具，使得创建复杂的3D场景变得简单与高效。在本文中，将介绍如何使用Three.js构建3D场景，并实现一些交互效果。

安装与引入

要开始使用Three.js，首先需要将其引入到项目中。可以通过下载源代码包或通过CDN引入Three.js。同时，还需要引入一些其他的必要依赖，例如WebGL渲染器和控制器等。

<!-- 依赖库 -->
<script src="https://threejs.org/build/three.js"></script>

<!-- WebGL渲染器 -->
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>

<!-- 控制器 -->
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

在引入完成后，就可以开始构建3D场景了。

创建场景与渲染器

首先，需要创建一个场景(Scene)对象和一个渲染器(Renderer)对象。场景是Three.js中所有物体的容器，渲染器则负责将场景中的物体渲染到HTML文档中。

// 创建场景
var scene = new THREE.Scene();

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

添加光源与相机

为了能够在场景中显示物体，需要添加光源和相机。光源决定了场景中物体的亮度和阴影效果，而相机则决定了用户在场景中的视角。

// 添加光源
var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 1);
scene.add(light);

// 添加相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

添加物体

使用Three.js可以创建多种不同类型的3D物体，例如立方体、球体、平面等。可以设置物体的材质和纹理，以及位置、旋转和缩放等属性。

// 创建一个立方体
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

实现交互效果

Three.js提供了一些工具和控制器，以实现用户与3D场景的交互效果。例如，可以使用鼠标控制器(OrbitControls)来实现旋转和缩放等操作。

// 创建鼠标控制器
var controls = new THREE.OrbitControls(camera, renderer.domElement);

// 更新渲染器和控制器
function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    controls.update();

    renderer.render(scene, camera);
}

animate();

结语

通过以上的步骤，就可以使用Three.js构建出一个简单的3D场景，并实现一些基本的交互效果。当然，Three.js还有更多的功能和扩展，可以用于创建更加复杂和丰富的3D场景。希望本文能对你入门Three.js有所帮助！

本文来自极简博客，作者：编程语言译者，转载请注明原文链接：使用Three.js构建3D场景和交互效果