Three.js是一个基于JavaScript的3D图形库，可以用于创建高质量、交互式的WebGL渲染图形。它提供了大量的功能，包括材质、灯光、阴影、对象管理和3D几何体的创建等。
下面是一个简单的Three.js Hello World程序，它在浏览器中创建一个场景，添加一个立方体，并在屏幕上呈现它。
<!DOCTYPE html>
<html>
<head>
<title>Three.js Hello World</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.130.2/build/three.min.js"></script>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 调整相机位置
camera.position.z = 5;
// 渲染场景
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
以下是一些Three.js中常用的主要API：
场景是一个Three.js中最基本的元素，用于容纳3D模型、灯光等。可以通过以下方式创建场景：
const scene = new THREE.Scene();
相机是用于捕捉场景的视角的对象。可以使用不同类型的相机，如透视相机和正交相机。可以通过以下方式创建透视相机：
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
其中，fov是视场角、aspect是宽高比、near和far是相机的近截面和远截面。
渲染器用于将场景和相机中的3D模型渲染到屏幕上。可以通过以下方式创建渲染器：
const renderer = new THREE.WebGLRenderer();
几何体用于创建3D模型的形状。可以通过添加顶点和面来创建几何体。例如，可以通过以下方式创建一个立方体的几何体：
const geometry = new THREE.BoxGeometry(width, height, depth);
其中，width、height和depth是立方体的宽度、高度和深度。
材质定义了几何体表面的外观。可以使用不同类型的材质，如基础材质、光泽材质和透明材质等。可以通过以下方式创建一个基础材质：
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
其中，color属性指定了材质的颜色。
网格是由几何体和材质组成的对象。可以通过以下方式创建一个网格：
const mesh = new THREE.Mesh(geometry, material);
灯光用于照亮场景中的3D模型。可以使用不同类型的灯光，如环境光、点光源和聚光灯等。可以通过以下方式创建一个点光源：
const light = new THREE.PointLight(color, intensity, distance);
其中，color是光源的颜色、intensity是光源的强度、distance是光线的最大距离。
纹理用于将图像或视频映射到3D模型的表面上。可以通过以下方式创建网格：
const mesh = new THREE.Mesh(geometry, material);
动画可以使场景中的模型进行移动、旋转等操作。可以使用requestAnimationFrame函数在每一帧更新模型的状态。例如：
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();