个人中心
gpt4 book ai didi

javascript - 在 Three.js 中旋转球体，以便地球仪的映射图像与 Three.js 中也显示的 GeoJSON 相匹配

转载 作者：行者123 更新时间：2023-11-28 18:17:59 26 4
gpt4 key购买 nike

我在 Three.js 中创建了一个地球仪，并使用映射到该球体的图像。

除此之外，我正在使用 ThreeGeoJSON library渲染 geojson 数据。

但是地理位置不匹配。 three.js globe

我需要使用映射图像旋转地球仪，以便它们对齐，但我不知道如何做到这一点。我尝试设置一个四元数变量并基于该变量进行旋转，但无法使其工作。任何帮助或指示将不胜感激。

在这里您可以看到我迄今为止所做的工作的工作版本: http://bl.ocks.org/jhubley/8450d7b0df0a4a9fd8ce52d1775515d5

所有代码、图像、数据都在这里: https://gist.github.com/jhubley/8450d7b0df0a4a9fd8ce52d1775515d5

我还粘贴了下面的index.html。

    <html>
        <head>
            <title>ThreeGeoJSON</title>

            <script src="threeGeoJSON.js"></script>

            <!-- Three.js library, movement controls, and jquery for the geojson-->
            <script src="three.min.js"></script>
            <script src="TrackballControls.js"></script>
            <script src="jquery-1.10.2.min.js"></script>
        </head>
        <body>
        <script type="text/JavaScript">
              var width  = window.innerWidth,
                height = window.innerHeight;

              // Earth params
              var radius   = 9.99,
                segments = 32,
                rotation = 0 ;

                //New scene and camera
                var scene = new THREE.Scene();
                var camera = new THREE.PerspectiveCamera(55, width / height, 0.01, 1000);
                camera.position.z = 1;
                camera.position.x = -.2;
                camera.position.y = .5;

                //New Renderer
                var renderer = new THREE.WebGLRenderer();
                renderer.setSize(width, height);
                document.body.appendChild(renderer.domElement);

                //Add lighting
                scene.add(new THREE.AmbientLight(0x333333));

                var light = new THREE.DirectionalLight(0xe4eef9, .7);
                light.position.set(12,12,8);
                scene.add(light);

                var quaternion = new THREE.Quaternion();
                quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 2 );



                var sphere = createSphere(radius, segments);
                //sphere.rotation.y = rotation;
                sphere.rotation = new THREE.Euler().setFromQuaternion( quaternion );

                scene.add(sphere)

                //Create a sphere to make visualization easier.
                var geometry = new THREE.SphereGeometry(10, 32, 32);
                var material = new THREE.MeshPhongMaterial({
                    //wireframe: true,
                    //transparent: true
                });

                function createSphere(radius, segments) {
                  return new THREE.Mesh(
                    new THREE.SphereGeometry(radius, segments, segments),
                    new THREE.MeshPhongMaterial({
                      map:         THREE.ImageUtils.loadTexture('relief.jpg'),
                      bumpMap:     THREE.ImageUtils.loadTexture('elev_bump_4k.jpg'),
                      bumpScale:   0.005,
                      specularMap: THREE.ImageUtils.loadTexture('wateretopo.png'),
                      specular:    new THREE.Color('grey')
                    })
                  );
                }

                var clouds = createClouds(radius, segments);
                clouds.rotation.y = rotation;
                scene.add(clouds)

                function createClouds(radius, segments) {
                  return new THREE.Mesh(
                    new THREE.SphereGeometry(radius + .003, segments, segments),
                    new THREE.MeshPhongMaterial({
                      map:         THREE.ImageUtils.loadTexture('n_amer_clouds.png'),
                      transparent: true
                    })
                  );
                }

                //Draw the GeoJSON
                var test_json = $.getJSON("countries_states.geojson", function(data) {

                    drawThreeGeo(data, 10, 'sphere', {
                        color: 'red'
                    })
                });

                //Draw the GeoJSON loggerhead data
                var test_json = $.getJSON("loggerhead-distro-cec-any.json", function(data) {
                    drawThreeGeo(data, 10, 'sphere', {
                        color: 'blue'
                    })
                });

                //Set the camera position
                camera.position.z = 30;

                //Enable controls
                var controls = new THREE.TrackballControls(camera);

                //Render the image
                function render() {
                    controls.update();
                    requestAnimationFrame(render);
                    renderer.render(scene, camera);
                }

                render();
            </script>
      </body>
    </html>

最佳答案

我使用了 r81，而不是古老的 r66(只是替换了 two.min.js)。我稍微修改了您的 createSphere() 函数，看起来它正在工作。

        function createSphere(radius, segments) {
            var sphGeom = new THREE.SphereGeometry(radius, segments, segments);
            sphGeom.rotateY(THREE.Math.degToRad(-90));
            return new THREE.Mesh(
                sphGeom,
                new THREE.MeshPhongMaterial({
                    map:         new THREE.TextureLoader().load('relief.jpg'),
                    bumpMap:     new THREE.TextureLoader().load('elev_bump_4k.jpg'),
                    bumpScale:   0.005,
                    specularMap: new THREE.TextureLoader().load('wateretopo.png'),
                    specular:    new THREE.Color('grey')
                })
            );
        }

我所做的唯一一件事就是将球体的几何形状绕 Y 轴旋转 -90 度。结果是here

ORBIS TERRARVM

关于javascript - 在 Three.js 中旋转球体，以便地球仪的映射图像与 Three.js 中也显示的 GeoJSON 相匹配，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40514926/

26 4 0
文章推荐： jquery - chzn-select 不需要的下拉列表创建了 jquery
文章推荐： ios - LaunchImage 没有运行我的自定义图像
文章推荐： html - 如何在父 DIV 中对齐水平 DIV？
文章推荐： css - ul bg 没有显示在所有 li 后面
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com