Javascript 如何使用threejs在3d环境中创建热点？_Javascript_Html_Three.js

Javascript 如何使用threejs在3d环境中创建热点？

javascript html three.js

Javascript 如何使用threejs在3d环境中创建热点？,javascript,html,three.js,Javascript,Html,Three.js,我是three.js的初学者。我正在尝试构建类似的东西。我使用three.js构建了所有东西，但我不知道如何创建热点（如上面链接中的红点）并在单击它时显示弹出窗口。下面是我的项目代码，如果还需要什么，请告诉我。我的前三个.js应用程序正文{页边距：0；} 画布{显示：块；} 从导入{GLTFLoader}https://threejs.org/examples/jsm/loaders/GLTFLoader.js'; 从导入{OrbitControls}https://threejs.org

我是three.js的初学者。我正在尝试构建类似的东西。我使用three.js构建了所有东西，但我不知道如何创建热点（如上面链接中的红点）并在单击它时显示弹出窗口。下面是我的项目代码，如果还需要什么，请告诉我。


我的前三个.js应用程序
正文{页边距：0；}
画布{显示：块；}
从导入{GLTFLoader}https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
从导入{OrbitControls}https://threejs.org/examples/jsm/controls/OrbitControls.js';
var渲染器、场景、相机；
场景=新的三个。场景（）；
scene.background=新的三种颜色（0xfff6e6）
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，0.11000）；
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var loader=新的GLTFLoader（）；
var hlight=新的三个环境光（0x4040401000）
场景。添加（高亮度）
var方向灯=新的三个方向灯（0xffffff，100）
方向灯位置设置（0,1,0）
directionalLight.castShadow=真
场景.添加（方向光）
var灯=新的三点灯（0xffffff，10）
光。位置。设置（0，300，500）
场景。添加（灯光）
var light2=新的三点光源（0xffffff，10）
light2.位置设置（500100,0）
场景。添加（light2）
var light3=新的三点光源（0xffffff，10）
light3.位置设置（0，100，-500）
场景。添加（light3）
var light4=新的三点光源（0xffffff，10）
light4.位置设置（-5000300,0）
场景。添加（light4）
var controls=新的轨道控制（摄影机、渲染器.doElement）；
document.body.appendChild（renderer.doElement）
var loader=新的GLTFLoader（）；
loader.load（'./scene.gltf'，函数（gltf）
{ 
scene.add（gltf.scene）；
}，未定义，函数（错误）{console.error（error）；}）；
//加载图像资源
摄像机位置z=5；
var animate=函数（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
};
制作动画（）；

您称之为“热点”的注释内容基本上是纯HTML的。

这可能是您学习如何在场景中执行此操作的最佳准备步骤。

您所称的“热点”是注释内容基本上是纯HTML的地方。

这可能是您学习如何在场景中进行此操作所能遵循的最好的一步一步准备工作。

由于我自己已经做了几次，因此我可以对获得所需效果所需的步骤进行演练

在场景中定义热点应位于的三维点。您可以选择将其嵌套在其他Object3D中，以确保其与模型/父对象一起缩放、移动和旋转

将平面添加到此点将图像纹理加载到此平面。这就是你的可见热点

使用

lookAt

功能更新热点，以确保它们始终注视摄像机

当用户单击屏幕时，对场景中的所有热点进行光线投射。最简单的方法是将所有热点存储在一个阵列中

当光线投射命中热点时，获取命中点或热点位置之一。将其转换为屏幕坐标。在stackoverflow上搜索如何执行此操作。我肯定有一篇关于这个的帖子

最后一步在从上一步获得的正确位置显示html

此方法的优点是，热点将与场景中的模型很好地集成。因为基于html的热点将始终位于场景顶部

这就是全部。如果您需要任何进一步的澄清，请告诉我

由于我自己做过几次，所以我可以演练一下达到预期效果所需的步骤