文章来源地址https://www.toymoban.com/news/detail-833993.html
import { CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer";
gltfLoader.load("./model/exhibit2.glb", (gltf) =>{
let array = ["雕像", "中药房", "浸制区", "道地沙盘","动物标本区","灵芝","茶话室","药材制作"];
console.log(gltf)
this.exhibitionHall = gltf.scene;
// 判断子元素是否是物体
this.exhibitionHall.traverse((child) => {
if(child.isMesh){
child.material.emissiveIntensity = 15;
}
if (array.indexOf(child.name) !== -1){
console.log(child)
const css3DObject = this.createTag(child);
css3DObject.visible =true
this.floor2Tags.push(css3DObject);
this.exhibitionHall.add(css3DObject);
}
})
let fakeChild = {
name: "标注",
position: {
x:100,
y:100,
z:20}
}
const css3DObject = this.createTag(fakeChild);
css3DObject.visible =true
this.floor2Tags.push(css3DObject);
this.exhibitionHall.add(css3DObject);
this.exhibitionHall.position.set(0,0,0)
this.exhibitionHall.scale.set(15,15,15)
console.log(gltf)
scene.add(this.exhibitionHall)
})
createTag(object3d) {
// 创建各个区域的元素
const element = document.createElement("div");
element.className = "elementTag";
element.innerHTML = `
<div class="elementContent">
<h3>${object3d.name}</h3>
<p>温度:26℃</p>
<p>湿度:50%</p>
</div>
`;
const objectCSS3D = new CSS3DObject(element);
objectCSS3D.position.copy(object3d.position);
objectCSS3D.scale.set(0.2, 0.2, 0.2);
return objectCSS3D;
// scene.add(objectCSS3D);
}
css 样式内不要加 scoped
会找不到样式
// app.vue
<style lang="less">
.cssrender {
display: flex;
position: fixed;
top: 0;
left: 0;
z-index: 100;
pointer-events: none;
}
.elementTag {
position: relative;
left: -30px;
top: 20px;
}
.elementTag::before {
content: "";
display: block;
position: absolute;
width: 100px;
height: 1px;
background: rgb(127 177 255 / 75%);
bottom: 0;
right: -100px;
transform-origin: 0 0;
transform: rotate(30deg);
}
.elementTag::after {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
background: rgb(127 177 255 / 75%);
bottom: -65px;
right: -105px;
border-radius: 50%;
}
.elementContent {
background-color: rgb(20 143 221 / 68%);
box-shadow: 0px 0px 12px rgb(0 128 255 / 75%);
border: 1px solid rgb(127 177 255 / 75%);
padding: 20px;
color: #efefef;
}
.elementContent h3 {
font-size: 20px;
font-weight: bold;
margin: 15px 0;
color: #efefef;
}
</style>
//index.html
// 加入css样式渲染区
<div class="cssrender"></div>
// renderer.js
import { CSS3DRenderer } from "three/examples/jsm/renderers/CSS3DRenderer.js";
// 创建css3drender
// 所有涉及到渲染的 都需要css3drender 去渲染
const css3drender = new CSS3DRenderer();
css3drender.setSize(window.innerWidth, window.innerHeight);
document.querySelector(".cssrender").appendChild(css3drender.domElement);
export default { css3drender };
import rendererModule from "@/three/renderer.js";
// 使用渲染器渲染相机看到这个场景的内容渲染出来
rendererModule.renderer.render(scene, cameraModule.activeCamera);
rendererModule.css3drender.render(scene, cameraModule.activeCamera);
文章来源:https://www.toymoban.com/news/detail-833993.html
到了这里,关于threejs 3D标注的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!