放置链接或“热点”三个JS里面的equirectangular全景

本文介绍了放置链接或“热点”三个JS里面的equirectangular全景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在寻找详细的教程或示例或关于如何在带有Three.js的equirectangular全景图中放置链接的详细文档。I am looking for a detailed tutorial or example or good documentation on how to place a link inside an equirectangular panorama with Three.js.使用 equirectangular全景演示学习如何放置一个圆圈或任何一个圈子会很棒在该图片的一部分中的一种对象，当点击它时，它可以打开另一个equirectangular全景或任何真实的东西。With the equirectangular panorama demo it would be great to learn how to for example place a circle or any kind of object in a part of that picture and when clicked it can open another equirectangular panorama or anything really.我需要什么技术来研究？我需要注意哪些依赖项？对于像这样的东西我还需要哪些其他的图书馆？What techniques do I need to research please? What dependencies do I need to look out for? What other libraries would I need for something like this?我认为这可以在不使用一些有所谓热点的昂贵的全景观众的情况下完成。不，我想自己学习这个，以及我自己能够编码的内容。任何人都可以购买插件，但我想学习如何做到这一点。I think that this surly can be done without using some of the pricey panorama viewers that have so called "hotsposts". No I want to learn this myself and what to be able to code this myself. Anyone can buy a plugin but I want to learn how to do this.因为我是Three.js的新手并且非常喜欢它我真的只是在寻求指针或研究的东西。我不介意这需要时间和精力。他们说没有痛苦没有收获。但我的问题是，由于我是这个领域的初学者，我甚至不知道从哪里开始或研究哪些术语。Because I am very new to Three.js and really like it I am really just asking for pointers or things to research. I don't mind if this takes time and effort. No pain no gain as they say. But my issue is that I would not even know where to start or what terms to research since I am a beginner in this field.例如我正在看 Three.js的文档，并想知道我需要查找或了解的条款。我也很好地看了SO上的类似问题，看到他们链接了 clickable对象示例。这是我需要在equirectangular全景中简单地链接吗？For example I am looking at the documentation of Three.js and wonder what terms I need to look up or find out about. I have also had a good look at similar questions on SO and see that they link the clickable objects example. Is this what I need to simply have a link in the equirectangular panorama?我真的很乐意给出一些关于我想要做的事情的术语或技术示例。例如，这篇博文真的帮助我理解了基础知识equirectangular全景图。如果有类似的东西有关添加链接到equirectangular全景将是伟大的。I would really be happy to be given some terms or technical examples of what I am trying to do. For example this blog post really helped me understand the basics of the equirectangular panorama. If there is something similar concerning adding links to the equirectangular panorama that would be great.你能指出我正确的方向吗？Can you point me in the right direction?推荐答案全景图通过天空盒/立方体贴图呈现，这可能意味着两件事。The panorama is rendered through a skybox/cubemap, which could mean two things.在任何一种情况下，它都涉及6张图像，没有失真（因此你可以通过像ptgui之类的东西将你的2：1失真图像转换成6个方形图像）。 In either case, it involves 6 images, without distortion (so you would convert your 2:1 distorted image into 6 square images through something like ptgui). 阅读立方体贴图 现在，这可以像 skybox 一样简单。这六个图像被映射到一个网格，立方体 - 六个平面，这个立方体总是与相机的位置对齐，即。相机总是从立方体的中心渲染立方体。 three.js中唯一需要的魔法就是将.renderOrder设置为首先渲染，并将depthWrite设置为false，以免影响其他对象的渲染（即它无限远）。Now, this can be as simple of a concept as a skybox. These six images are mapped onto a mesh, cube - six planes, and this cube is always aligned with the camera's position, ie. the camera is always rendering the cube from the cube's center. The only magic needed in three.js is to set the .renderOrder to have it render first, and depthWrite to false, as to not affect the rendering of other objects (ie its infinitely far away).//do for every face (plane)myCubeMapFaceMaterial = new THREE.MeshBasicMaterial({ map:cube.up.jpg, depthWrite:false});另一个例子显示，是在着色器中进行实际的textureCube提取。该示例抽象了这一点，您只需从库中获取立方体着色器，并将其应用于多维数据集。这样你就可以避免制作6个平面，6个不同的材质（6个绘制调用），但是加载一个立方体贴图结构（three.texture）并让三个在一个绘图调用中在着色器中读取它。Another, which the example shows, is to do an actual textureCube fetch in the shader. The example abstracts this, you just get the cube shader from the library, and apply it to a cube. This way you avoid making 6 planes, 6 different materials (6 draw calls), but load one cubemap struct (three.texture) and let three read it in the shader in one draw call.现在让我们假设你在场景的某个地方添加一个球体。由于天空盒从未写过深度，它就好像它不存在一样，它只是以某种方式为你的背景着色。你接下来绘制的任何东西都会被绘制在它上面（在立方体内部），如果它比立方体范围更远，没有关系，没有深度信息，所以它不会对任何东西进行测试。 Now lets say you add a sphere somewhere in the scene, anywhere. Since the skybox never wrote depth, it's as if it didnt exist, it just colored your background a certain way. Anything you draw next, will be drawn on top of it (inside the cube), doesnt matter if its much farther away than the cube extents, there is no depth information so it tests against nothing. 这是你的光盘。你可以做任何你想做的事情，放置粒子系统，将精灵对准相机，制作3d东西，背景保持背景。Thats your disc. You can do whatever you want, put particle systems, align sprites to cameras, make 3d stuff, the background stays the background. 这篇关于放置链接或“热点”三个JS里面的equirectangular全景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！