Three.js中的div标签跟随（模型弹框）Three.js中的div标签跟随(模型弹框)
⽬录
参考官⽅案例
核⼼渲染器
three.js-master\examples\js\renderers\CSS2DRenderer.js
⽤法
1. 把div存为变量
var testDiv = ElementById('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.p = 0;
5. 在animate中renderer前加⼊该渲染
var animate = function () {
requestAnimationFrame( animate );
position标签属性
};
注意事项
代码加⼊的位置很重要
上⾯的代码放在camera / OrbitControls之后, 否则相机控制不能⽤
如果要加button等，要在这段代码之后
var moonDiv = ElementById('testDiv');
var moonLabel = new THREE.CSS2DObject( moonDiv );
moonLabel.position.set( 0, 0, 20 );
group.add( moonLabel );
/
/上⾯是原来加的代码
//下⾯是需要加的⼀个button
var btn = ElementById("btn");
document.body.appendChild(btn);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。