Three.js中的div标签跟随（模型弹框）

Three.js中的div标签跟随（模型弹框）Three.js中的div标签跟随(模型弹框)
⽬录
参考官⽅案例
核⼼渲染器
three.js-master\examples\js\renderers\CSS2DRenderer.js
⽤法
1. 把div存为变量
var testDiv = document.getElementById('testDiv');
2. 把上述div对象转化为⼀个CSS2DObject对象
var moonLabel = new THREE.CSS2DObject( testDiv );
//前两个参数是对于屏幕xy坐标,可以取负数第三个不清楚,按道理应该是z轴坐标,不知道怎么体现
moonLabel.position.set( 0, 1, 0 );
3. 在模型中加⼊该CSS2DObject对象
textObject.add( moonLabel );
4. CSS2DRenderer渲染
var labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
5. 在animate中renderer前加⼊该渲染
var animate = function () {
requestAnimationFrame( animate );
labelRenderer.render( scene, camera );
renderer.render( scene, camera );
};
注意事项
代码加⼊的位置很重要
上⾯的代码放在camera / OrbitControls之后, 否则相机控制不能⽤
如果要加button等,要在这段代码之后
var moonDiv = document.getElementById('testDiv');
var moonLabel = new THREE.CSS2DObject( moonDiv );
moonLabel.position.set( 0, 0, 20 );
group.add( moonLabel );
//上⾯是原来加的代码
//下⾯是需要加的⼀个button
var btn = document.getElementById("btn");
document.body.appendChild(btn);。