threejs_threejs1

3D场景加载2D标签

2D的html标签

  <div id="tag">计数器:{{ count }}</div>
  <button type="button" class="btn" @click="increment">+1</button>

通过CSS2DObject将2D的html标签转换成3DObject物体,并添加到场景中去

// CSS2DObject---------------------------
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
// label
const labelEle = document.getElementById('tag')!
const label = new CSS2DObject(labelEle)
label.position.set(0, 1, 0)
scene.addObject(label)

初始化CSS2Renderer渲染器,就和renderer渲染器一样

const css2drenderer = new CSS2DRenderer()
css2drenderer.domElement.style.position = 'absolute'
css2drenderer.domElement.style.top = '0px'
css2drenderer.domElement.style.left = '0px'
css2drenderer.domElement.style.pointerEvents = 'none'
css2drenderer.setSize(dom.offsetWidth, dom.offsetHeight);
 
 
const render = () => {
 
  css2drenderer.render(scene, camera)
 
  requestAnimationFrame(renderFun);
};
render()

视频例子

1. 引入CSS2DObject,
2. 然后加入到场景中

1. 初始化一个css2dlabelrenderer,然后渲染