参见three.js的官方示例文档:
https://threejs.org/examples/#css2d_label
API文档页面:
https://threejs.org/docs/index.html#examples/en/renderers/CSS2DRenderer
github源码示例:
https://github.com/mrdoob/three.js/blob/master/examples/css2d_label.html
在three.js的场景上创建标签,提供了两种方式,一种是css2drender,另一种是css3drender,都有相应的样例,下边对使用css2drender创建便签进行一个简要说明。
按照示例的代码,需要在场景渲染的基本render上,再添加一个CSS2DRenderer渲染器,这个在three.js的example中,需要单独引用js文件,在基本页面上添加:
在基本的WebGLRenderer后,再添加一个css2drender的对象初始化,最后也加入到container中去:
css2drenderer = new THREE.CSS2DRenderer();
css2drenderer.setSize(window.innerWidth, window.innerHeight);
css2drenderer.domElement.style.position = 'absolute';
css2drenderer.domElement.style.top = 0;
container.appendChild(css2drenderer.domElement);
此渲染器需要根据场景和相机动态进行渲染,和基本的render同步进行:
renderer.render(scene, camera);
css2drenderer.render(scene, camera);
添加html的元素到css2dobject中,设置对象在场景中的坐标,加入到场景scene中:
var element = document.createElement("div");
var object = new THREE.CSS2DObject(_cloneNode);
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
scene.add(object);
需要注意的是:使用OrbitControls时,要设置css2drenderer的dom进行控制,要不然会不起作用。
controls =
new THREE.OrbitControls(camera, css2drenderer.domElement);
添加注记的效果: