threejs写一个地球自转案例
下面是一个使用Three.js库创建地球自转的案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Earth Rotation</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
// 创建场景、相机和渲染器
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);
document.body.appendChild(renderer.domElement);
// 创建地球
var geometry = new THREE.SphereGeometry(5, 32, 32);
var texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
var material = new THREE.MeshBasicMaterial({ map: texture });
var earth = new THREE.Mesh(geometry, material);
scene.add(earth);
// 设置相机位置
camera.position.z = 15;
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 地球自转
earth.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
在上面的案例中，我们首先创建了一个场景、相机和渲染器。然后，我们使用SphereGeometry创建了一个地球，并加载了一个地球的纹理贴图。接下来，我们设置了相机的位置，并使用动画循环函数来实现地球的自转效果。最后，我们调用renderer.render方法来渲染场景。
在浏览器中打开上述代码，你将看到一个自转的地球
原文地址: http://www.cveoy.top/t/topic/h3MD 著作权归作者所有。请勿转载和采集!