threejs 矩形Mesh+背景透明png贴图(场景标注) 学习笔记

js yekong

threejs 矩形Mesh+背景透明png贴图(场景标注) 学习笔记

threejs项目开发中,把一个背景透明的png 图像作为平面矩形网格模型Mesh的颜色贴图是一个非常有用的功能,通过这样一个功能,可以对threejs三维场景进行标注。
整体思路:创建一个矩形平面,设置颜色贴图map,注意选择背景透明的png 图像作为颜色贴图,同时材质设置 transparent:true,这样png图片背景完全透明的部分不显示。

网格地面辅助观察 Gridllelper

//添加一个辅助网格地面
const gridHelper = new THREE.GridHelper(300, 25, 0x004444, 0x004444)

矩形平面PlaneGeometry设置颜色贴图

开启透明 transparent: true

PlaneGeometry矩形平面默认是在XOY平面上,如果你想平行于XOZ平面,就需要手动旋转。

mesh.rotateX(-Math.PI / 2)

如果你不想矩形平面Mesh与地面网格线重合,可以通过位置属性.position偏移。

//适当偏移,不与地面重合
mesh.position.y = 1
喜欢