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

时间:2019-03-14 17:15:08   收藏:0   阅读:1051

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

注意事项

代码加入的位置很重要

原文:https://www.cnblogs.com/richardwlee/p/10531484.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!