threejs 3D标注

这篇具有很好参考价值的文章主要介绍了threejs 3D标注。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

threejs 3D标注,web3D,3d,javascript文章来源地址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);

到了这里,关于threejs 3D标注的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 什么是Web3D?Web3D技术发展历程以及Web3D应用场景

    当今的互联网已经迈入了第三代,这被称为Web3.0,而Web3D正是Web3.0的其中一个技术分支。Web3D是指将三维图形技术应用于Web上的技术,它是将3D图形和Web技术结合起来的一个分支,可以使用户在Web上以更真实、更直观的方式浏览和操作虚拟场景。本文将介绍什么是Web3D、Web3D技术

    2024年02月15日
    浏览(45)
  • Web3D开发经验分享:基于Three.js的Web3D建模案例

    个人主页: 左本Web3D,更多案例预览请点击==》 在线案例 个人简介:专注Web3D使用ThreeJS实现3D效果技巧和学习案例 💕 💕积跬步以至千里,致敬每个爱学习的你。喜欢的话请三连,有问题请私信或者加微信         随着互联网的快速发展,Web3D技术也越来越成熟,越来越

    2024年02月13日
    浏览(49)
  • 初识web3D--webGL/webGPU

    当今互联网时代,我们已经逐渐习惯了浏览和享受丰富多样的网络内容。从文字、图片到视频,我们可以在Web上畅游于各种信息和娱乐资源之间。然而,随着科技的不断进步,一个全新而令人兴奋的概念正在崭露头角——Web3D。 Web3D是一种革命性的技术,它将三维图形、虚拟

    2024年02月04日
    浏览(50)
  • 17个WebGL框架及Web3D图形库

    WebGL是基于OpenGL的JavaScript API库,允许Web浏览器在浏览器中渲染3D / 2D图形,而无需安装额外的插件、桌面应用程序。WebGL允许通过浏览器使用机器GPU将3D图形渲染成HTML页面。WebGL目前在大多数浏览器(如Google Chrome,Mozilla Firefox和Safari)中都受支持。WebGL可以通过浏览器设置或使用

    2024年02月06日
    浏览(61)
  • 纯干货!最全WebGL框架及Web3D图形库

    WebGL 是一个 JavaScript API,用于在 Web 浏览器中呈现交互式 2D 和 3D 图形。它基于 OpenGL ES,这是一种广泛使用的嵌入式系统图形渲染标准。 WebGL 通常用于各种应用程序,包括: 3D 图形: WebGL 允许开发人员在 Web 浏览器中创建和显示 3D 图形,从而实现沉浸式体验、游戏、模拟和

    2024年02月21日
    浏览(52)
  • 智慧大棚Web3D可视化系统 构建高效农业场景

    农业的发展离不开农作物的生长,而农作物的生长会受到多方面的限制,主要是外界因素,因此,智慧农业便将传统农业与科技结合起来,衍生出智慧大棚,从而让农业得以快速发展。 我国农业的基本现状是“大国小农”,农业产业发展仍然受限于农业从业人员匮乏、年龄老

    2023年04月19日
    浏览(82)
  • 智慧垃圾焚烧发电厂Web3D可视化管理系统

    随着我国生产力的飞速发展和经济的迅速崛起,城市生活垃圾作为一种生物质能,将其燃烧用于发电,可以有效节约化石能源。 随着城镇化进程加速、人民生活水平持续提升,城市生活垃圾产生量也在逐年增长。生活垃圾是“放错地方的资源”,能否处理好这些“放错地方的资

    2024年02月08日
    浏览(53)
  • threejs 3D标注

    css 样式内不要加 scoped 会找不到样式

    2024年02月21日
    浏览(42)
  • 前端前沿web 3d可视化技术 ThreeJS学习全记录

    完整案例与项目代码: gitee开源项目地址 https://gitee.com/jumping-world-line/01_threeJS_basic 随着浏览器性能和网络带宽的提升 使得3D技术不再是桌面的专利 打破传统平面展示模式 前端方向主要流向的3D图形库包括Three.js和WebGL WebGL灵活高性能,但代码量大,难度大,需要掌握很多底层

    2024年02月01日
    浏览(58)
  • web3d-three.js场景设计器-sprite广告牌

    three.js使用Sprite精灵实现文字或者图片广告牌 1.将文字绘制到Canvas,调整对应宽高。 2.作为Cavans材质绑定到Sprite 3.加载到场景调整适当的scale function createLabel({ text, fontSize, textColor, color, imageUrl }) {     return new Promise((resolve, reject) = {         let canvas = document.createElement(\\\'canvas\\\')

    2024年02月02日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包