THREEJS基础CSS3D实现介绍框效果准备自己想要实现的内容，然后用CSS3DObject或者CSS3DSprite

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

所用知识

实现思路

准备自己想要实现的内容，然后用CSS3DObject或者CSS3DSprite包含这些元素，最后通过CSS3DRenderer渲染上去

初始化

初始化场景相机渲染器，轨道控制器等，再添加一个CSS3DRenderer

<template>
    <div id="test">
      </div>
</template>

//import
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';

//创建css3drender
const render3d = new CSS3DRenderer();
render3d.setSize(window.innerWidth, window.innerHeight);
document.querySelector("#test").appendChild(render3d.domElement);
render3d.render(scene, camera)

let animate3d = function () {
    controls.update();
    render3d.render(scene, camera)
    render3d.setSize(window.innerWidth, window.innerHeight);
    requestAnimationFrame(animate3d);
 };
    animate3d();

写点内容

这里，很关键，写的内容好不好关乎到效果的好不好！(×，其实可以随便写) 嘉然，我真的好喜欢你啊，为了你，我要把它写下来。

  const element = document.createElement('div');
  element.innerHTML = `
      <div class="elementContent"  >
        <h5>然然我真的好喜欢你啊！</h5>  //关注嘉然，顿顿解馋！
      </div>
    `;

使用CSS3DObject包含元素

使用CSS3DObject包含元素然后添加到场景中

  const objcss3d = new CSS3DObject(element);
  objcss3d.position.x = 0,
  objcss3d.position.y = 4,
  objcss3d.position.z = 0,
  objcss3d.scale.set(0.05, 0.05, 0.05)
  // objcss3d.rotation.y = Math.PI
  scene.add(objcss3d)

调整样式

调整上面div的position和z-index，看看效果。

#test {
  position: absolute;
  /* z-index: 100; */
  pointer-events: none;
}

我们可以看到文字就出来了，但是效果不是很好，我想要一个粉红色的框！上面我将class设置为elementContent，直接在css里面调。

/* 众所周知嘉然应援色为E799B0   身高153*/
.elementContent {
  background-color: rgba(231, 153, 176, 0.8);     
  /* box-shadow:0 0 0 1px rgba(4, 148, 245, 0.5); */
  border: 1px solid rgba(154, 200, 226, 0.75);
  padding: 20px;
  color: #eee;
}

感觉效果emmm不是很理想大伙自己调吧

最终

这个效果可以用在一些建筑上面比如说在一个建筑头上做一个这样的框然后介绍这个建筑的具体信息。

萌新发文，如果文章有啥错误或者建议欢迎大伙指出🥰