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

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

我是three.js的初学者。我正在尝试构建与此https://virtualshowroom.nissan.in/car-selected.html?selectedCar=ext360_deep_blue_pearl类似的内容。我使用three.js构建了所有内容，但无法弄清楚如何创建热点（如上述链接中的红点）并在单击时显示弹出窗口。以下是我的项目代码，请告知是否还有其他要求。

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { display: block; }
        </style>
    </head>
    <body>
        <h1></h1>
    
        <script src="./three.js"></script>
        
        <script type="module">
                import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
            import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
            var renderer,scene,camera;
            
            
           
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xfff6e6)
            camera = new THREE.PerspectiveCamera( 75,window.innerWidth / window.innerHeight,0.1,1000 );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth,window.innerHeight );
                
            document.body.appendChild( renderer.domElement );
            var loader = new GLTFLoader();
            var hlight = new THREE.AmbientLight(0x404040,100)
    scene.add(hlight)

    var directionalLight = new THREE.DirectionalLight(0xffffff,100)
    directionalLight.position.set(0,1,0)
    directionalLight.castShadow = true
    scene.add(directionalLight)
            

    var light = new THREE.PointLight(0xffffff,10)
    light.position.set(0,300,500)
    scene.add(light)

        var light2 = new THREE.PointLight(0xffffff,10)
    light2.position.set(500,100,0)
    scene.add(light2)

    var light3 = new THREE.PointLight(0xffffff,10)
    light3.position.set(0,-500)
    scene.add(light3)

    var light4 = new THREE.PointLight(0xffffff,10)
    light4.position.set(-5000,0)
    scene.add(light4)
    var controls = new OrbitControls(camera,renderer.domElement);
    document.body.appendChild(renderer.domElement)
            
            


    var loader = new GLTFLoader(); 
            loader.load( './scene.gltf',function ( gltf ) 
                        { 
                scene.add( gltf.scene ); 
            },undefined,function ( error ) { console.error( error ); } );
           
            

// load a image resource
            

camera.position.z = 5;
            

            
            var animate = function () {
                requestAnimationFrame( animate );

                

                renderer.render( scene,camera );
            };

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

解决方法

您所说的“热点”是Annotations，其中注释内容基本上是纯HTML。

tutorial in the link可能是您逐步了解如何在场景中进行操作的最佳准备。

由于我自己做了几次，因此我可以逐步介绍获得所需效果的步骤。

在场景中定义热点应位于的3d点。您可以选择将此对象嵌套在另一个Object3D中，以确保其随模型/父对象缩放，移动和旋转。
在此点添加一个平面将图像纹理加载到该平面。那里就有您可见的热点
通过使用lookAt功能来更新热点，以确保它们始终在看着相机。
当用户单击屏幕时，对您场景中所有热点投射光线。最简单的方法是将所有热点存储在一个阵列中。
当射线投射击中热点时，获取命中点或热点位置。将其转换为屏幕坐标。在stackoverflow上搜索如何执行此操作。我确定有关于此的帖子。
最后一步将html显示在上一步获得的正确位置。

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

这就是它的全部内容。让我知道您是否需要进一步的澄清！

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

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

解决方法

相关推荐