时间戳

首页 > 解决方案 > three.js 在对象上添加按钮以显示有关该位置的信息

javascript - three.js 在对象上添加按钮以显示有关该位置的信息

问题描述

我有一个用 GLTF 加载器加载到我的场景中的对象：

        var loader = new THREE.GLTFLoader();
        loader.load( 'files/3.gltf', function ( gltf ) {

            gltf.scene.traverse( function ( child ) {

我需要在这个对象上创建一个点来显示弹出信息。

如何将点添加到对象上的规范位置？

标签： javascriptanimationthree.js3d

解决方案

您可以使用在线 three.js 编辑器https://threejs.org/editor/添加不可见的立方体/球体，将其放置在您想要的位置，将用户数据添加到此对象，例如 raycast: true，导出到 gltf，然后将元素添加到raycastable 元素数组

gltf.scene.traverse( function ( child ) {
    if(child.userData.raycast) raycastable.push(child);
})

然后检查渲染循环中的交叉点 https://threejs.org/docs/#api/en/core/Raycaster

推荐阅读