【three.js练习程序】创建地球贴图
时间: 2023-08-05 07:03:37 浏览: 152
好的,让我来回答您的问题。为了创建一个带有贴图的地球,您可以使用 three.js 库中的 SphereGeometry 和 MeshBasicMaterial 类。以下是创建地球的代码示例:
```javascript
// 创建场景
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);
// 创建球体
var geometry = new THREE.SphereGeometry(1, 32, 32);
// 创建材质
var material = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('earth.jpg')
});
// 创建网格
var earth = new THREE.Mesh(geometry, material);
// 添加网格到场景中
scene.add(earth);
// 渲染场景
function render() {
requestAnimationFrame(render);
earth.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
```
在上面的代码中,我们使用 SphereGeometry 类创建了一个球体,设置了 32 个水平和垂直分段。然后我们使用 MeshBasicMaterial 类创建了一个材质,将地球贴图加载到材质中。最后,我们创建了一个网格,将球体和材质结合起来,并将网格添加到场景中。
在渲染函数中,我们使用 requestAnimationFrame 方法进行动画循环,并且每帧旋转地球一定的角度。最后,我们使用渲染器将场景渲染到屏幕上。
希望这个例子能够帮助您创建一个带有贴图的地球!
阅读全文