How to realize the effect of tag tagging in three.js

Editor to share with you how three.js to achieve tag tagging effect, I believe that most people do not understand, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

API document page:

Https://threejs.org/docs/index.html#examples/en/renderers/CSS2DRenderer

Github source code example:

Https://github.com/mrdoob/three.js/blob/master/examples/css2d_label.html provides two ways to create tags on three.js scenarios, one is css2drender, the other is css3drender, and there are corresponding examples. The following is a brief description of creating notes using css2drender. According to the example code, you need to add a CSS2DRenderer renderer to the basic render of scene rendering. In the example of three.js, you need to reference the js file separately and add it on the basic page: after the basic WebGLRenderer, add an object initialization of css2drender, and finally add it to the 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)

This renderer needs to render dynamically according to the scene and camera, synchronizing with basic render:

Renderer.render (scene, camera); css2drenderer.render (scene, camera); add the elements of html to css2dobject, set the coordinates of objects in the scene, and add them to the scene 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)

It should be noted that when using OrbitControls, set the dom of css2drenderer to control, otherwise it will not work.

Controls =

New THREE.OrbitControls (camera, css2drenderer.domElement)

Effect of adding annotations:

The above is all the content of the article "how to add tags in three.js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!