Three.js 是一个功能强大的 JavaScript 库，用于在 Web 上创建 3D 图形和动画。要实现 3D 立体效果，可以使用 Three.js 中的相机、灯光和材质等功能来实现。以下是一个简单的实现示例：
- 创建场景、相机和渲染器
首先，我们需要创建一个 Three.js 场景、相机和渲染器。以下是一个简单的示例：javascriptCopy
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);
在这个示例中，我们创建了一个 Three.js 场景、透视相机和 WebGL 渲染器。我们将相机的位置设置为 (0, 0, 5)，以使场景中的对象离相机更近。然后，我们将渲染器的大小设置为窗口大小，并将渲染器的 DOM 元素添加到页面上。
- 创建立方体
要创建 3D 立体效果，我们需要在场景中添加一个 3D 对象。以下是一个简单的立方体示例：javascriptCopy
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
在这个示例中，我们创建了一个立方体几何体和一个白色的基础材质，并使用这些参数创建了一个网格对象。最后，我们将立方体对象添加到场景中。
- 创建光源
要实现 3D 立体效果，我们需要添加光源来照亮对象。以下是一个简单的点光源示例：javascriptCopy
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
scene.add(light);
在这个示例中，我们创建了一个白色的点光源，并将其位置设置为 (0, 0, 10)，以使其照亮场景中的对象。
- 渲染场景
要在屏幕上显示 3D 立体效果，我们需要在每一帧中渲染场景。可以使用 Three.js 中的 requestAnimationFrame 方法来实现动态渲染。以下是一个简单的渲染示例：javascriptCopy
function animate() {
requestAnimationFrame(animate);
// 使立方体对象旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
在这个示例中，我们定义了一个 animate 函数，用于在每一帧中更新立方体对象的旋转，并渲染场景。我们使用 requestAnimationFrame 方法来实现动态渲染。
通过以上步骤，我们就可以在 Three.js 中实现一个简单的 3D 立体效果了。在实际项目中，我们可以根据具体需求来调整相机、灯光、材质和对象的参数，以实现各种各样的 3D 立体效果。