Three.js中的div标签跟随(模型弹框)

Three.js中的div标签跟随(模型弹框)

目录

• Three.js中的div标签跟随(模型弹框)
  • 参考官方案例
  • 核心渲染器
  • 用法
  • 注意事项

参考官方案例

核心渲染器

three.js-masterexamplesjs enderersCSS2DRenderer.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);