学习和探索Three.js：创建和渲染3D场景的JavaScript库 - 果核剥壳

在Web开发中，Three.js是一个非常流行的基于WebGL的JavaScript库，用于创建和渲染3D场景。它提供了丰富的功能和API，使得在浏览器中实现交互式的3D图形变得简单而高效。本文将介绍Three.js的基本概念和用法，帮助您快速入门这个强大的库。

Three.js示例：创建一个旋转的绿色立方体

首先，您需要在网页中引入Three.js的脚本文件。您可以从官方网站下载最新版本的Three.js，或者使用CDN链接来引入。以下是一个示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
接下来，您需要创建一个场景（scene），一个相机（camera），和一个渲染器（renderer）。场景是存放要显示的物体和光源的容器，相机决定了从哪个角度和距离观察场景，渲染器则将场景绘制到屏幕上。以下是创建场景、相机和渲染器的示例代码：

JAVASCRIPT

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

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

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
现在，您可以向场景中添加一些物体了。比如，您可以创建几何体（geometry），材质（material）和网格（mesh）。几何体定义了物体的形状，材质定义了物体的外观和质感，而网格则将几何体和材质结合起来，并可以添加到场景中。以下是创建一个简单的绿色立方体并添加到场景中的示例代码：

JAVASCRIPT

// 创建几何体
var geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

// 创建网格
var cube = new THREE.Mesh(geometry, material);

// 添加到场景
scene.add(cube);
最后，您需要创建一个动画循环，以便不断更新场景和相机的状态，并将其渲染到屏幕上。以下是一个示例代码，让立方体绕着y轴旋转，并根据旋转角度调整相机的位置：

JAVASCRIPT

// 创建动画循环
function animate() {
requestAnimationFrame(animate);

// 更新物体状态
cube.rotation.y += 0.01;

// 更新相机状态
camera.position.x = Math.sin(cube.rotation.y) * 5;
camera.position.z = Math.cos(cube.rotation.y) * 5;
camera.lookAt(scene.position);

// 渲染场景
renderer.render(scene, camera);
}

// 启动动画循环
animate();
现在，您可以在浏览器中打开您的网页，就能看到一个旋转的绿色立方体了！当然，Three.js还有许多其他功能和特性可以探索，比如创建灯光、加载纹理、应用动画等。您可以参考官方文档和示例，深入学习和使用Three.js，创造出令人惊叹的3D场景和交互体验。