three.js如何实现标签注记添加效果

发布时间：2021-12-03 14:38:48 作者：小新
来源：亿速云阅读：1641

小编给大家分享一下three.js如何实现标签注记添加效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

添加注记的效果：

three.js如何实现标签注记添加效果

以上是“three.js如何实现标签注记添加效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！

相关阅读