Three.js是一个基于WebGL的JavaScript库，可以用来创建和渲染3D场景。本文将介绍Three.js的基本概念和用法，帮助你入门这个强大的库。
- Three.js官网：https://threejs.org/
Three.js示例
首先，你需要在你的网页中引入Three.js的脚本文件，可以从官网下载或者使用CDN链接。然后，你需要创建一个场景（scene），一个相机（camera）和一个渲染器（renderer）。场景是用来存放你要显示的物体和光源的容器，相机是用来决定从哪个角度和距离观察场景的设备，渲染器是用来把场景绘制到屏幕上的工具。
<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js”></script>
<script>
// 创建场景
var scene = new THREE.Scene();// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
</script>
接下来，你可以向场景中添加一些物体，比如几何体（geometry），材质（material）和网格（mesh）。几何体是用来定义物体的形状的数据结构，材质是用来定义物体的外观和质感的属性，网格是将几何体和材质结合起来的对象，可以被添加到场景中。下面的代码将创建一个简单的立方体，并添加到场景中。
// 创建几何体
var geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
// 创建网格
var cube = new THREE.Mesh(geometry, material);
// 添加到场景
scene.add(cube);
最后，你需要创建一个动画循环，用来不断更新场景和相机的状态，并渲染到屏幕上。下面的代码将让立方体绕着y轴旋转，并调整相机的位置。
// 创建动画循环
function animate() {
requestAnimationFrame(animate);
// 更新物体状态
cube.rotation.y += 0.01;
// 更新相机状态
camera.position.x = Math.sin(cube.rotation.y) * 5;
camera.position.z = Math.cos(cube.rotation.y) * 5;
camera.lookAt(scene.position);
// 渲染场景
renderer.render(scene, camera);
}
// 启动动画循环
animate();
这就是Three.js入门教程的简单示例，你可以在浏览器中打开你的网页，看到一个旋转的绿色立方体。当然，Three.js还有很多其他的功能和特性，你可以参考官方文档和示例来进一步学习和探索。
