threejs给物体添加选中效果

最新推荐文章于 2025-11-04 00:00:00 发布

原创最新推荐文章于 2025-11-04 00:00:00 发布 · 7.5k 阅读

8 ·

CC 4.0 BY-SA版权

threejs 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Three.js中使用辅助对象如BoxHelper来高亮显示选定的3D对象，通过设置辅助对象的可见性和从选定对象生成辅助对象，实现对场景中物体的精确选择和视觉反馈。

const scene = new THREE.Scene(); 
const sceneHelpers = new THREE.Scene();
const helper = new THREE.BoxHelper();

renderer.autoClear = false;


sceneHelpers.add( helper ); //不要将helper直接添加到scene中, 有可能导致选中物体时意外选中helper;

function selectedObjectChanged ( object ){

    if(object === undefined) object = null;
    if(object === null){
        helper.visible = false;
    } else{
        helper.setFromObject( object );
        helper.visible = true;
    }

}


function render(){

    renderer.render(scene, camera);
    renderer.render(sceneHelpers, camera);

}