论坛 › 马黑黑教程专版 › ThreeJS地球

马黑黑 发表于 2025-6-4 21:07

ThreeJS地球

本帖最后由 马黑黑 于 2025-6-4 22:06 编辑 <br /><br /><style>
        .artBox { font-size: 18px; }
        .artBox > p { margin: 10px 0; line-height: 30px; }
        .artBox mark { background: lightblue; padding: 4px 8px; }
        #prevBox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: beige; display: none; padding: 0; overflow: hidden; z-index: 1000; margin: 0; }
        #prevBox::after { position: absolute; content: '关闭预览'; bottom: 10px; left: calc(50% - 40px); padding: 0 4px; width: 80px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #efe; border-radius: 6px; background: #eee; font-size: 14px; box-shadow: 2px 2px 6px rgba(0,0,0,.25); cursor: pointer; }
        iframe { position: relative; width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box; margin: 0; }
</style>

<div id="prevBox"></div>
<div id="hEdiv"><pre id="hEpre">
&lt;div style="padding: 10px; position: absolute; color: #eee;"&gt;提示：地球可手动翻转伸缩&lt;/span&gt;&lt;/div&gt;

&lt;script type="importmap"&gt;
        {
                "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/"
                }
}
&lt;/script&gt;

&lt;script type="module"&gt;
    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) =&gt; {
                        texture.colorSpace = THREE.SRGBColorSpace;
                        ball.material.map = texture;
                        animate();
                },
                undefined,
                (err) =&gt; console.log(err)
        );
       
        window.onresize = () =&gt; {
                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);
        }
&lt;/script&gt;
</pre></div>
        <blockquote><button id="btnPrev">运行代码</button></blockquote>
</div>

<script type="module">
        import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
        hlight.hl(hEdiv, hEpre);
       
        const preView = (htmlCode, targetBox) => {
                if (targetBox.innerHTML) return;
                const iframe = document.createElement('iframe');
                htmlCode = htmlCode + '<style>body {margin: 0; }</style>';
                iframe.srcdoc = htmlCode;
                targetBox.appendChild(iframe);
                targetBox.style.display = 'block';
                targetBox.onclick = () => {
                        targetBox.innerHTML = '';
                        targetBox.style.display = 'none';
                }
        };

        const value = hEpre.textContent;
        btnPrev.onclick = () => preView(value, prevBox);
</script>

马黑黑 发表于 2025-6-4 21:19

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

花飞飞 发表于 2025-6-4 21:38

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

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

花飞飞 发表于 2025-6-4 21:40

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

花飞飞 发表于 2025-6-4 21:48

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

马黑黑 发表于 2025-6-4 21:55

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

专业的纹理贴图是有的

马黑黑 发表于 2025-6-4 21:55

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

这是专业贴图

马黑黑 发表于 2025-6-4 21:56

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

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

红影 发表于 2025-6-4 22:25

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

红影 发表于 2025-6-4 22:26

转动着这个3D图，看了又看，这太神奇了。{:4_199:}

马黑黑 发表于 2025-6-4 22:46

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

这是纹理设计得好

马黑黑 发表于 2025-6-4 22:47

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

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

梦江南 发表于 2025-6-5 09:04

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

马黑黑 发表于 2025-6-5 12:29

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

都在里面

杨帆 发表于 2025-6-5 12:52

漂亮的地球仪，谢谢马老师经典分享{:4_191:}

小文 发表于 2025-6-5 13:09

高深！佩服！

马黑黑 发表于 2025-6-5 18:21

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

{:4_190:}

花飞飞 发表于 2025-6-5 18:43

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

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

花飞飞 发表于 2025-6-5 18:43

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

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

花飞飞 发表于 2025-6-5 18:46

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

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

查看完整版本: ThreeJS地球