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);