ThreeJS地球

马黑黑

<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>

运行代码

马黑黑

地球仪的关键是纹理贴图，图决定地球仪的品质。我现在这个是相对高清的，虽然转换成了 webp 格式

花飞飞

马黑黑 发表于 2025-6-4 21:19
地球仪的关键是纹理贴图，图决定地球仪的品质。我现在这个是相对高清的，虽然转换成了 webp 格式

非常清晰，逼真~~
这应该是3D的优势所在，可以这么直观的翻转地球，从不同角度来观看

花飞飞

怎么做到的，弧型贴图完全契合，无全没有任何变形，跟真的地球模型一样，
对比平面图形和贴上去后的效果，还真令人惊叹

花飞飞

一个球体加上贴图有这么美妙的效果，这构思太绝了。。
图找的好，主要是创意特别好

马黑黑

花飞飞 发表于 2025-6-4 21:48
一个球体加上贴图有这么美妙的效果，这构思太绝了。。
图找的好，主要是创意特别好

专业的纹理贴图是有的

马黑黑

花飞飞 发表于 2025-6-4 21:40
怎么做到的，弧型贴图完全契合，无全没有任何变形，跟真的地球模型一样，
对比平面图形和贴上去后的效果， ...

这是专业贴图

马黑黑

花飞飞 发表于 2025-6-4 21:38
非常清晰，逼真~~
这应该是3D的优势所在，可以这么直观的翻转地球，从不同角度来观看

3D就是这样模拟出来的。

红影

的确太奇妙了，那张平面图竟能如此妥帖地覆盖到球体上。照道理曲面展成平面肯定有变形的。这张高清平面图也很奇妙，是处理好变形的平面图么

红影

转动着这个3D图，看了又看，这太神奇了。

马黑黑

红影 发表于 2025-6-4 22:26
转动着这个3D图，看了又看，这太神奇了。

这是纹理设计得好

马黑黑

红影 发表于 2025-6-4 22:25
的确太奇妙了，那张平面图竟能如此妥帖地覆盖到球体上。照道理曲面展成平面肯定有变形的。这张高清平面图也 ...

这里面有规范的。某种意义上讲，纹理贴图和3D模型本质上是道理相通的

梦江南

转来转去，没找到中国地图。

马黑黑

梦江南 发表于 2025-6-5 09:04
转来转去，没找到中国地图。

都在里面

杨帆

漂亮的地球仪，谢谢马老师经典分享

小文

高深！佩服！

马黑黑

小文 发表于 2025-6-5 13:09
高深！佩服！

花飞飞

马黑黑 发表于 2025-6-4 21:55
专业的纹理贴图是有的

奇怪今天这会灌水有点卡。。半天才跳出来。花潮一般不卡的

花飞飞

马黑黑 发表于 2025-6-4 21:55
专业的纹理贴图是有的

居然有专业的纹理贴图，互联网太神奇，除了人啥都能找到

花飞飞

马黑黑 发表于 2025-6-4 21:55
这是专业贴图

这贴图与众不同，专业的就是契合。。
专业的人做出专业的事看着就是赏心悦目
我随意贴上去一张平时用的带人物的，变形得厉害