Three.js 球体 - Javascript

在 Three.js 中，我们可以轻松地创建球体对象，让我们来了解一下如何在你的项目中使用球体。

创建球体

Three.js 提供了 THREE.SphereGeometry 类，用于创建球体对象。该类的构造函数接受三个参数：

• radius 指定球体半径，默认值为 1；
• widthSegments 指定球面的宽度分段数，默认值为 8；
• heightSegments 指定球面的高度分段数，默认值为 6。

下面是一个创建球体的示例代码：

const radius = 1;
const widthSegments = 16;
const heightSegments = 16;

const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const sphere = new THREE.Mesh(geometry, material);

在上面的代码中，我们首先创建了一个 SphereGeometry 实例，然后使用该实例创建了一个 Mesh，最后可以将其添加到场景中进行渲染。

自定义球体材质

默认情况下，球体的材质是 MeshBasicMaterial，它只提供了基本的颜色和线框属性。如果你希望自定义球体的材质，可以使用其它的 Three.js 材质类。

例如，下面代码使用了 MeshPhongMaterial 来创建一个有反光度的球体：

const material = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  specular: 0x333333,
  shininess: 50
});

const sphere = new THREE.Mesh(geometry, material);

用代码改变球体的样式

除了在创建球体时传递参数之外，你还可以在后续的代码中改变球体的样式。

例如，这段代码会使球体变成红色：

sphere.material.color.set(0xff0000);

这段代码会使球体放大两倍：

sphere.scale.set(2, 2, 2);

WebGLRenderer 渲染球体

要显示球体，我们需要在 Three.js 场景中使用 WebGLRenderer 进行渲染。

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  sphere.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

这段代码中，我们创建了一个 WebGLRenderer 实例，并使用 requestAnimationFrame 函数对场景进行连续渲染。

总结

通过使用 SphereGeometry 类和其它 Three.js 材质类，我们可以轻松地创建和定制三维球体。WebGLRenderer 类则提供了 Three.js 场景的渲染能力。