three.js 创建文本的几种方式

蜡笔小先

已于 2023-07-21 10:53:33 修改

阅读量775

点赞数 3

分类专栏： threejs 文章标签： javascript 前端 css

于 2023-03-06 22:06:52 首次发布

本文链接：https://blog.csdn.net/m0_38004751/article/details/129371954

版权

threejs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

精灵贴图文本

.text {
      width: 128px;
      height: 128px;
      font-size: 16px;
      text-align: center;
      color: #ffffff;
      background: #ff0000;
    }

 <div class="text" id="text">精灵贴图文本</div>
  <div class="text" id="text2">平面贴图文本</div>
  <div class="text" id="text3">CSS2DRenderer渲染文本</div>
  <div class="text" id="text4">CSS3DRenderer CSS3DObject渲染文本</div>
  <div class="text" id="text5">CSS3DRenderer CSS3DSprite渲染文本</div>



  let div1 = document.getElementById('text');
  let div2 = document.getElementById('text2');
  let div3 = document.getElementById('text3');
  let div4 = document.getElementById('text4');
  let div5 = document.getElementById('text5');


	html2canvas(div1).then(canvas => {
	    let texture = new THREE.CanvasTexture(canvas);
	    let material = new THREE.SpriteMaterial({
	      map: texture
	    });
	    let sprite = new THREE.Sprite(material);
	    sprite.scale.set(4, 4, 1);
	    scene.add(sprite)
  })

平面贴图文本

html2canvas(div2).then(canvas => {
	    let texture = new THREE.CanvasTexture(canvas);
	    let material = new THREE.MeshBasicMaterial({
	      map: texture,
	      side: THREE.DoubleSide
	    });
	    let geometry = new THREE.PlaneGeometry(4, 4, 2);
	    let plane = new THREE.Mesh(geometry, material);
	    plane.position.set(10, 0, 0);
	    scene.add(plane)
  })

CSS2DRenderer

let label2DRenderer = new THREE.CSS2DRenderer();
  label2DRenderer.setSize(window.innerWidth, window.innerHeight);
  label2DRenderer.domElement.style.position = 'absolute';
  label2DRenderer.domElement.style.top = '0px';
  label2DRenderer.domElement.style.left = '0px';
  //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
  label2DRenderer.domElement.style.pointerEvents = 'none';
  document.body.appendChild(label2DRenderer.domElement);

let label2D = new THREE.CSS2DObject(div3);
  label2D.position.set(-10, 0, 0);
  scene.add(label2D);

label2DRenderer.render(scene, camera)

CSS3DRenderer

 let label3DRenderer = new THREE.CSS3DRenderer();
  label3DRenderer.setSize(window.innerWidth, window.innerHeight);
  label3DRenderer.domElement.style.position = 'absolute';
  label3DRenderer.domElement.style.top = '0px';
  label3DRenderer.domElement.style.left = '0px';
  //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
  label3DRenderer.domElement.style.pointerEvents = 'none';
  document.body.appendChild(label3DRenderer.domElement);

 let label3DObject = new THREE.CSS3DObject(div4);
  label3DObject.position.set(-20, 0, 0);
  label3DObject.scale.set(0.05, 0.05, 0.05);
  scene.add(label3DObject);

  let label3DSprite = new THREE.CSS3DSprite(div5);
  label3DSprite.position.set(-30, 0, 0);
  label3DSprite.scale.set(0.05, 0.05, 0.05);
  scene.add(label3DSprite);

label3DRenderer.render(scene, camera)

总结

CSS2DRenderer渲染的文本的大小不会随着缩放而改变，会一直保持原大小，其余的均会对应的改变大小
CSS3DRenderer渲染的CSS3DSprite 和精灵模型渲染的文本始终会面朝屏幕，不会随着旋转而改变角度。CSS3DRenderer渲染的CSS3DObject 和平面渲染的文本会随着角度的改变而改变
添加事件的方式不同，CSS3DRenderer和CSS2DRenderer渲染的本质还是dom，可以直接添加dom事件，精灵模型和mesh则是要通过射线的方式。
在渲染大批量文本的时候使用CSS3DRenderer和CSS2DRenderer性能最佳，将html转化为canvas这个步骤消耗的性能很大，如果直接是生成的canvas进行贴图则无所谓。