需要一些关于Three.js 360全景的建议

Question

我是一个初学者程序员，我对360全景摄影在three.js引擎( http://threejs.org/examples/#webgl_panorama_equirectangular )上制作感兴趣。我分析了其他示例( https://ggnome.com/samples/pano2vr_4/tour/ )，我想问一下如何制作全景图中的白点，它允许您通过地图上的不同位置来查看下一个全景图。他是如何与sfere中的那个部分融合的呢？它与THREE.CSS3DRenderer有关吗？另外，如何使红色视图箭头(在迷你地图中)与全景图一起移动。这是如何精确地实现的，它是使用transform属性( css3 )这样的旋转操作，还是沿着相机旋转轴的一侧相机旋转工作。

提前谢谢你。

Answer 1

我使用这个example进行训练。所以我做了箭头，这是我需要的jQuery和CSS转换属性。完美工作:)

        function update() {


            lat = Math.max( - 85, Math.min( 85, lat ) );
            phi = THREE.Math.degToRad( 90 - lat );
            theta = THREE.Math.degToRad( lon );


           //This one

            *$("#nx").text(Math.round(lon,2));
            $('img#siaip').css({'-webkit-transform' : 'rotate(' + lon + 
            'deg)'});*

           //



            camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
            camera.target.y = 500 * Math.cos( phi );
            camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

            camera.lookAt( camera.target );

            /*
            // distortion
            camera.position.copy( camera.target ).negate();
            */

            renderer.render( scene, camera );

        }

现在，我坚持如何制作物体，以获得另一个全景图。我的意思是像this -绿色闪烁的对象，它允许去到另一个地方。我不能理解如何构建它。仅仅考虑到一些球体表面点与CSS属性相关，比如top，left？每一个观点对我来说都很重要。