一、Three.js 简介
Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它简化了在网页上创建和展示 3D 场景的过程。通过 Three.js，你可以轻松地创建 3D 物体、添加光照、设置相机视角等。
二、前期准备
在开始绘制树之前，你需要引入 Three.js 库。可以通过 CDN 的方式引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Tree</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
</body>
</html>
三、创建基本的 Three.js 场景
在创建树之前，我们需要先搭建一个基本的 Three.js 场景，包括场景、相机和渲染器。
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
四、绘制树干
树干可以使用圆柱体来表示。我们可以使用 THREE.CylinderGeometry 来创建圆柱体的几何体，然后使用 THREE.MeshBasicMaterial 来创建材质，最后将几何体和材质组合成一个网格对象添加到场景中。
// 创建树干几何体
const trunkGeometry = new THREE.CylinderGeometry(0.1, 0.1, 2, 32);
// 创建树干材质
const trunkMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513 });
// 创建树干网格对象
const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
// 设置树干的位置
trunk.position.y = 1;
// 将树干添加到场景中
scene.add(trunk);
五、绘制树冠
树冠可以使用球体来表示。我们可以使用 THREE.SphereGeometry 来创建球体的几何体，然后使用 THREE.MeshBasicMaterial 来创建材质，最后将几何体和材质组合成一个网格对象添加到场景中。
// 创建树冠几何体
const crownGeometry = new THREE.SphereGeometry(0.8, 32, 32);
// 创建树冠材质
const crownMaterial = new THREE.MeshBasicMaterial({ color: 0x228B22 });
// 创建树冠网格对象
const crown = new THREE.Mesh(crownGeometry, crownMaterial);
// 设置树冠的位置
crown.position.y = 2.5;
// 将树冠添加到场景中
scene.add(crown);
六、渲染场景
最后，我们需要在循环中不断地渲染场景，以实现动画效果。
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
七、完整代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Tree</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建树干几何体
const trunkGeometry = new THREE.CylinderGeometry(0.1, 0.1, 2, 32);
// 创建树干材质
const trunkMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513 });
// 创建树干网格对象
const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
// 设置树干的位置
trunk.position.y = 1;
// 将树干添加到场景中
scene.add(trunk);
// 创建树冠几何体
const crownGeometry = new THREE.SphereGeometry(0.8, 32, 32);
// 创建树冠材质
const crownMaterial = new THREE.MeshBasicMaterial({ color: 0x228B22 });
// 创建树冠网格对象
const crown = new THREE.Mesh(crownGeometry, crownMaterial);
// 设置树冠的位置
crown.position.y = 2.5;
// 将树冠添加到场景中
scene.add(crown);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
八、扩展与优化
8.1 添加光照
为了让树看起来更真实，可以添加光照效果。例如，添加一个点光源：
// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(2, 2, 2);
scene.add(pointLight);
8.2 更复杂的树结构
可以通过递归的方式创建更复杂的树结构，模拟树枝的分叉。以下是一个简单的示例：
function createBranch(parent, length, angle) {
const branchGeometry = new THREE.CylinderGeometry(0.05, 0.02, length, 32);
const branchMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513 });
const branch = new THREE.Mesh(branchGeometry, branchMaterial);
branch.position.y = length / 2;
parent.add(branch);
if (length > 0.2) {
const leftBranch = new THREE.Object3D();
leftBranch.rotation.z = angle;
leftBranch.position.y = length;
parent.add(leftBranch);
createBranch(leftBranch, length * 0.7, angle);
const rightBranch = new THREE.Object3D();
rightBranch.rotation.z = -angle;
rightBranch.position.y = length;
parent.add(rightBranch);
createBranch(rightBranch, length * 0.7, angle);
}
}
const root = new THREE.Object3D();
createBranch(root, 1, Math.PI / 6);
root.position.y = 0;
scene.add(root);
通过以上步骤，你就可以使用 Three.js 绘制一棵简单的树，并可以进一步扩展和优化它。希望这篇教程能帮助你更好地理解 Three.js 的使用。
