three.js如何實(shí)現(xiàn)標(biāo)簽注記添加效果

發(fā)布時(shí)間：2021-12-03 14:38:48 來(lái)源：億速云閱讀：1603 作者：小新欄目：大數(shù)據(jù)

小編給大家分享一下three.js如何實(shí)現(xiàn)標(biāo)簽注記添加效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

API文檔頁(yè)面：

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的場(chǎng)景上創(chuàng)建標(biāo)簽，提供了兩種方式，一種是css2drender，另一種是css3drender，都有相應(yīng)的樣例，下邊對(duì)使用css2drender創(chuàng)建便簽進(jìn)行一個(gè)簡(jiǎn)要說(shuō)明。

按照示例的代碼，需要在場(chǎng)景渲染的基本render上，再添加一個(gè)CSS2DRenderer渲染器，這個(gè)在three.js的example中，需要單獨(dú)引用js文件，在基本頁(yè)面上添加：

在基本的WebGLRenderer后，再添加一個(gè)css2drender的對(duì)象初始化，最后也加入到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);

此渲染器需要根據(jù)場(chǎng)景和相機(jī)動(dòng)態(tài)進(jìn)行渲染，和基本的render同步進(jìn)行：

renderer.render(scene, camera);

css2drenderer.render(scene, camera);

添加html的元素到css2dobject中，設(shè)置對(duì)象在場(chǎng)景中的坐標(biāo)，加入到場(chǎng)景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時(shí)，要設(shè)置css2drenderer的dom進(jìn)行控制，要不然會(huì)不起作用。

controls =

new THREE.OrbitControls(camera, css2drenderer.domElement);

添加注記的效果：

three.js如何實(shí)現(xiàn)標(biāo)簽注記添加效果

以上是“three.js如何實(shí)現(xiàn)標(biāo)簽注記添加效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

three.js如何實(shí)現(xiàn)標(biāo)簽注記添加效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽