如何使用three.js

Three.js是一个基于WebGL的3D图形库，可以用它来创建各种3D场景和动画。下面是使用Three.js的基本步骤：

1. 引入Three.js库文件：

<script src="https://cdn.staticfile.org/three.js/r128/three.min.js"></script>

2. 创建场景、相机、渲染器：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

其中，PerspectiveCamera是透视相机，第一个参数75是视角（单位：度），第二个参数是宽高比，第三个参数是近截面，第四个参数是远截面。

3. 创建物体（例如立方体）：

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

其中，BoxGeometry是立方体几何体，MeshBasicMaterial是基础材质，color参数是颜色。

4. 设置物体位置和相机位置：

cube.position.z = -5;
camera.position.z = 5;

其中，物体位置和相机位置都是在z轴上。

5. 渲染场景：

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

animate函数是一个循环函数，每次循环中更新物体的旋转角度并渲染场景。

6. 如果需要响应鼠标或键盘事件，可以添加相应的事件监听器：

document.addEventListener('keydown', function(event) {
    if (event.keyCode == 37) { // 左箭头键
        cube.position.x -= 0.1;
    } else if (event.keyCode == 39) { // 右箭头键
        cube.position.x += 0.1;
    }
});

以上就是使用Three.js的基本步骤。更多的场景设置、灯光设置、材质设置、纹理贴图、动画等功能可以参考Three.js官方文档。