ThreeJS教程:UI交互按钮与3D场景交互

推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

UI交互按钮与3D场景交互

实际开发的时候,往往会通过前端的HTML、CSS代码创建按钮等交互界面,用来与3D场景交互。

如果你是用vue或react开发web3d项目,也可以不用HTML、CSS自己写,可以使用UI组件库。

UI按钮改变Mesh颜色

<div  id="red" class="bu">红</div>
<div  id="green" class="bu" style="margin-left: 10px;">绿</div>

通过UI按钮与3D场景交互,改变mesh颜色

document.getElementById('red').addEventListener('click',function(){
    mesh.material.color.set(0xff0000);
})
document.getElementById('green').addEventListener('click',function(){
    mesh.material.color.set(0x00ff00);
})


上一篇:ThreeJS教程:UI交互界面与Canvas画布叠加 (mvrlink.com)

下一篇:ThreeJS教程:Three.js背景透明度 (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号