请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2025-6-4 22:06 编辑
<div style="padding: 10px; position: absolute; color: #eee;">提示:地球可手动翻转伸缩</span></div>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.ihwx.cn/three@0.176.0/build/three.module.js",
"three/addons/": "https://unpkg.ihwx.cn/three@0.176.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const clock = new THREE.Clock();
const controls = new OrbitControls(camera, renderer.domElement);
const geometry = new THREE.SphereGeometry(2,64,64);
const material = new THREE.MeshBasicMaterial();
const ball = new THREE.Mesh(geometry, material);
scene.add(ball);
new THREE.TextureLoader().load(
'https://638183.freep.cn/638183/web/3models/earth_day_4096.webp',
(texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
ball.material.map = texture;
animate();
},
undefined,
(err) => console.log(err)
);
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
renderer.render(scene, camera);
}
</script>
|