基于ThreeJS用html设计完成一个基础的日-地-月系统太空场景,球体需采用纹理贴图或设置渐变色以增加真实感
时间: 2024-03-01 14:49:42 浏览: 41
要基于ThreeJS设计一个太空场景,您需要使用以下组件:
1. 地球、月球和太阳的球体几何体。
2. 对每个球体应用纹理贴图或设置渐变色以增加真实感。
3. 光源,以便在场景中创建阴影。
4. 控制器,以便用户可以在场景中旋转和缩放视图。
5. 雾,以便在场景中创建深度效果。
以下是一个基本的示例代码,可以作为您的起点:
```html
<!DOCTYPE html>
<html>
<head>
<title>太空场景</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<div id="canvas"></div>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas').appendChild(renderer.domElement);
var earthGeometry = new THREE.SphereGeometry(1, 32, 32);
var earthTexture = new THREE.TextureLoader().load('path/to/earth/texture.jpg');
var earthMaterial = new THREE.MeshPhongMaterial({ map: earthTexture });
var earth = new THREE.Mesh(earthGeometry, earthMaterial);
earth.position.set(-3, 0, 0);
scene.add(earth);
var moonGeometry = new THREE.SphereGeometry(0.5, 32, 32);
var moonTexture = new THREE.TextureLoader().load('path/to/moon/texture.jpg');
var moonMaterial = new THREE.MeshPhongMaterial({ map: moonTexture });
var moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.set(2, 0, 0);
scene.add(moon);
var sunGeometry = new THREE.SphereGeometry(2, 32, 32);
var sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
var sun = new THREE.Mesh(sunGeometry, sunMaterial);
scene.add(sun);
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 1, 0);
scene.add(directionalLight);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var fog = new THREE.Fog(0x000000, 5, 15);
scene.fog = fog;
function animate() {
requestAnimationFrame(animate);
earth.rotation.y += 0.01;
moon.rotation.y += 0.02;
sun.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
```
在上面的代码中,我们创建了一个太空场景,其中包括地球、月球和太阳的球体几何体。我们对每个球体应用了纹理贴图以增加真实感。我们还创建了光源和雾,并使用OrbitControls控制器允许用户旋转和缩放视图。
请注意,您需要替换“path/to/earth/texture.jpg”和“path/to/moon/texture.jpg”为您实际的地球和月球纹理图像的URL。