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