Three.js中的div标签跟随(模型弹框)
时间:2019-03-14 17:15:08
收藏:0
阅读:1051
Three.js中的div标签跟随(模型弹框)
参考官方案例
核心渲染器
three.js-master\examples\js\renderers\CSS2DRenderer.js
用法
把div存为变量
var testDiv = document.getElementById('testDiv');
把上述div对象转化为一个CSS2DObject对象
var moonLabel = new THREE.CSS2DObject( testDiv ); //前两个参数是对于屏幕xy坐标,可以取负数 第三个不清楚,按道理应该是z轴坐标,不知道怎么体现 moonLabel.position.set( 0, 1, 0 );
在模型中加入该CSS2DObject对象
textObject.add( moonLabel );
CSS2DRenderer渲染
var labelRenderer = new THREE.CSS2DRenderer(); labelRenderer.setSize( window.innerWidth, window.innerHeight ); labelRenderer.domElement.style.position = 'absolute'; labelRenderer.domElement.style.top = 0;
在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);
原文:https://www.cnblogs.com/richardwlee/p/10531484.html
评论(0)