three.js是一个基于WebGL的JavaScript库，可以用来创建和显示三维图形。在这个教程中，我们将用three.js制作一个简单的太阳系模型，展示太阳、地球和月球的运动。我们将学习如何使用three.js的基本组件，如场景、相机、光源、几何体、材质和纹理。我们还将使用three.js的动画循环和控制器来实现交互和动画效果。
准备工作
要运行这个教程，你需要以下几个东西：
- 一个支持WebGL的浏览器，如Chrome、Firefox或Edge。
- 一个文本编辑器，如Visual Studio Code、Sublime Text或Atom。
- 一个本地服务器，如http-server或live-server，用来加载本地文件。
- 一个three.js的副本，可以从[官网]下载或使用CDN链接。
- 一些太阳、地球和月球的纹理图片，可以从[这里]下载或使用自己的图片。
创建HTML文件
首先，我们创建一个名为index.html的文件，用来存放我们的HTML代码。我们在文件中引入three.js的库文件，以及一个名为main.js的文件，用来存放我们的JavaScript代码。我们还在文件中创建一个名为container的div元素，用来作为three.js的渲染容器。我们的HTML文件的内容如下：
HTMLAI 生成的代码。仔细查看和使用。 有关常见问题解答的详细信息.
xml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>three.js教程：太阳系模型</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r132/three.min.js"></script>
<script src="main.js"></script>
</body>
</html>创建JavaScript文件
接下来，我们创建一个名为main.js的文件，用来存放我们的JavaScript代码。我们在文件中创建一个名为init的函数，用来初始化我们的three.js场景。我们在函数中创建一个名为scene的场景对象，一个名为camera的透视相机对象，一个名为renderer的WebGL渲染器对象，以及一些光源、几何体和材质对象。我们还在函数中设置相机的位置和方向，渲染器的大小和颜色，以及将渲染器的dom元素添加到container元素中。我们的JavaScript文件的内容如下：
JavaScriptAI 生成的代码。仔细查看和使用。 有关常见问题解答的详细信息.
java
// 初始化函数
function init() {
// 创建场景
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);
renderer.setClearColor(0x000000);
// 将渲染器的dom元素添加到container元素中
var container = document.getElementById("container");
container.appendChild(renderer.domElement);
// 创建太阳的几何体和材质
var sunGeometry = new THREE.SphereGeometry(5, 32, 32);
var sunMaterial = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load("sun.jpg")
});
// 创建太阳的网格对象
var sun = new THREE.Mesh(sunGeometry, sunMaterial);
// 将太阳添加到场景中
scene.add(sun);
// 创建地球的几何体和材质
var earthGeometry = new THREE.SphereGeometry(1, 32, 32);
var earthMaterial = new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load("earth.jpg")
});
// 创建地球的网格对象
var earth = new THREE.Mesh(earthGeometry, earthMaterial);
// 设置地球的位置
earth.position.set(10, 0, 0);
// 将地球添加到场景中
scene.add(earth);
// 创建月球的几何体和材质
var moonGeometry = new THREE.SphereGeometry(0.5, 32, 32);
var moonMaterial = new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load("moon.jpg")
});
// 创建月球的网格对象
var moon = new THREE.Mesh(moonGeometry, moonMaterial);
// 设置月球的位置
moon.position.set(12, 0, 0);
// 将月球添加到场景中
scene.add(moon);
// 创建一个环境光源
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
// 将环境光源添加到场景中
scene.add(ambientLight);
// 创建一个点光源
var pointLight = new THREE.PointLight(0xffffff, 1, 100);
// 设置点光源的位置
pointLight.position.set(0, 0, 0);
// 将点光源添加到场景中
scene.add(pointLight);
// 设置相机的位置和方向
camera.position.set(0, 20, 20);
camera.lookAt(0, 0, 0);
// 返回场景、相机和渲染器
return {
scene: scene,
camera: camera,
renderer: renderer
};
}创建动画循环
最后，我们创建一个名为animate的函数，用来创建我们的动画循环。我们在函数中使用requestAnimationFrame方法来不断调用自身，实现循环。我们还在函数中使用three.js的Clock对象来获取时间，以及使用three.js的OrbitControls对象来实现相机的交互控制。我们还在函数中更新太阳、地球和月球的旋转和位置，以及调用渲染器的render方法来渲染场景。我们的JavaScript文件的内容如下：
JavaScriptAI 生成的代码。仔细查看和使用。 有关常见问题解答的详细信息.
ini
// 初始化函数
function init() {
// 创建场景
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);
renderer.setClearColor(0x000000);
// 将渲染器的dom元素添加到container元素中
var container = document.getElementById("container");
container.appendChild(renderer.domElement);
// 创建太阳的几何体和材质
var sunGeometry = new THREE.SphereGeometry(5, 32, 32);
var sunMaterial = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load("sun.jpg")
});
// 创建太阳的网格对象
var sun = new THREE.Mesh(sunGeometry, sunMaterial);
// 将太阳添加到场景中
scene.add(sun);
// 创建地球的几何体和材质
var earthGeometry = new THREE.SphereGeometry(1, 32, 32);
var earthMaterial = new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load("earth.jpg")
});
// 创建地球的网格对象
var earth = new THREE.Mesh(earthGeometry, earthMaterial);
// 设置地球的位置
earth.position.set(10, 0, 0);
// 将地球添加到场景中
scene.add(earth);
// 创建月球的几何体和材质
var moonGeometry = new THREE.SphereGeometry(0.5, 32, 32);
var moonMaterial = new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load("moon.jpg")
});
// 创建月球的网格对象
var moon = new THREE.Mesh(moonGeometry, moonMaterial);
// 设置月球的位置
moon.position.set(12, 0, 0);
// 将月球添加到场景中
scene.add(moon);
// 创建一个环境光源
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
// 将环境光源添加到场景中
scene.add(ambientLight);
// 创建一个点光源
var pointLight = new THREE.PointLight(0xffffff, 1, 100);
// 设置点光源的位置
pointLight.position.set(0, 0, 0);
// 将点光源添加到场景中
scene.add(pointLight);
// 设置相机的位置和方向
camera.position.set(0, 20, 20);
camera.lookAt(0, 0, 0);
// 返回场景、相机和渲染器
return {
scene: scene,
camera: camera,
renderer: renderer
};
}
// 动画循环函数
function animate() {
// 请求下一帧动画
requestAnimationFrame(animate);
// 获取时间
var time = clock.getElapsedTime();
// 创建相机控制器
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// 更新太阳的旋转
sun.rotation.y = time * 0.1;
// 更新地球的旋转和位置
earth.rotation.y = time * 0.5;
earth.position.x = Math.cos(time * 0.2) * 10;
earth.position.z = Math.sin(time * 0.2) * 10;
// 更新月球的旋转和位置
moon.rotation.y = time * 0.5;
moon.position.x = earth.position.x + Math.cos(time * 0.5) * 2;
moon.position.z = earth.position.z + Math.sin(time * 0.5) * 2;
// 渲染场景
renderer.render(scene, camera);
}
// 创建一个时钟对象
var clock = new THREE.Clock();
// 调用初始化函数
var { scene, camera, renderer } = init();
// 调用动画循环函数
animate();这就是我们的教程的全部内容。你可以在你的浏览器中打开index.html文件，看到你的太阳系模型的效果。你可以用鼠标拖动和滚动来控制相机的视角。你也可以尝试修改一些参数，如光源的颜色和强度，几何体的大小和形状，材质的贴图和属性，以及动画的速度和轨迹