初探Three.js之场景、对象与光照

2023-11-19 04:35:41

WebGL：Three.js快速入门指南（第二部分）

在上一篇文章中，我们深入了解了Three.js的基础知识，包括场景、相机和渲染器。本篇指南将带你进一步探索Three.js的世界，重点介绍场景、对象和光照等关键概念。

场景管理

场景是Three.js中包含所有对象和光源的环境。通过创建一个场景，我们可以控制对象的排列方式和它们的相互作用。以下代码展示了如何创建一个场景：

const scene = new THREE.Scene();

对象创建

对象是场景中的实体，可以是任何形状、大小和材质。Three.js提供了各种预定义的几何形状，例如球体、立方体和圆柱体。以下代码展示了如何创建一个球体：

const geometry = new THREE.SphereGeometry(1, 32, 16);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

光照

光照对于在Three.js中创建逼真的场景至关重要。Three.js提供了多种光源类型，每种类型都有其独特的特性。以下代码展示了如何创建一个环境光，它可以均匀地照亮整个场景：

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

代码示例

现在，我们已经了解了场景、对象和光照的基本原理，让我们把它们结合起来创建一个简单的Three.js场景：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);

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

  renderer.render(scene, camera);
}

animate();