three.js CSS2DRenderer、CSS2DObject渲染HTML标签

 有空的老铁关注一下我的抖音:

效果:

<template><div><el-container><el-main><div class="box-card-left"><div id="threejs" style="border: 1px solid red;position: relative;"></div></div></el-main></el-container></div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 效果制作器
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
// 渲染通道
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
// 发光描边OutlinePass
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import { CSS2DObject, CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer.js";export default {data() {return {name: "",scene: null,camera: null,renderer: null,css2DRenderer: null,effectComposer: null,mesh: null,geometry: null,group: null,material: null,texture: null,position: null,outlinePass: null,canvasWidth: 1000,canvasHeight: 800,color: [],meshArr: [],};},created() {},mounted() {this.name = this.$route.query.name;this.init();},methods: {goBack() {this.$router.go(-1);},init() {//  创建场景对象this.scene = new this.$three.Scene();// 调用方法创建盒模型 1this.careateBox1();// 调用方法创建盒模型 2this.careateBox2();this.createCone();// 创建辅助坐标轴对象const axesHelper = new this.$three.AxesHelper(200);this.scene.add(axesHelper);// 创建透视投影相机对象this.camera = new this.$three.PerspectiveCamera(60,1,0.01, 2000);// 设置相机位置this.camera.position.set(200,200,200);// 设置相机指向this.camera.lookAt(0,0,0);// 创建WebGL渲染器对象this.renderer = new this.$three.WebGLRenderer();// 设置渲染器渲染的尺寸this.renderer.setSize(1000,800);// 调用渲染器的render方法开始渲染,参数是 场景,相机 对象this.renderer.render(this.scene, this.camera);// 获取id 是 threejs 的元素并添加domElementwindow.document.getElementById("threejs").appendChild(this.renderer.domElement);// 创建 CSS2D 渲染器对象(主要:)this.css2DRenderer = new CSS2DRenderer();this.css2DRenderer.setSize(1000,800);this.css2DRenderer.render(this.scene, this.camera);this.css2DRenderer.domElement.style.position = "absolute";this.css2DRenderer.domElement.style.top = 0;this.css2DRenderer.domElement.style.pointerEvents = 'none'; // 取消标签的点击事件window.document.getElementById("threejs").appendChild(this.css2DRenderer.domElement);this.renderFun();// 创建空间轨道控制器对象const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.addEventListener("change", () => {this.renderer.render(this.scene, this.camera);})},// 创建一个盒模型,父组件是 scene 场景;盒模型设置了位置careateBox1() {// 创建立方缓存几何体对象this.geometry = new this.$three.BoxGeometry(50,50,60);// 创建网格基础材质对象this.material = new this.$three.MeshBasicMaterial({color: 0xfafa,});// 创建网格对象this.mesh = new this.$three.Mesh(this.geometry, this.material);// 设置网格对象位置this.mesh.position.set(-50,60,60);// 调用方法创建html元素let dom = this.createDiv("父对象是Scene的模型的标签");// 创建 CSS2DObject对象,参数是html元素,作用:将html元素转为threejs的css2模型对象const tag = new CSS2DObject(dom);// 创建Vector3对象const wp = new this.$three.Vector3();// 获得this.mesh的世界坐标this.mesh.getWorldPosition(wp);tag.position.set(wp.x, wp.y, wp.z);// this.mesh.add(tag);this.scene.add(this.mesh);this.scene.add(tag);},// 创建一个盒模型,父组件是 组对象,盒模型与组对象都设置了位置careateBox2() {const group = new this.$three.Group();group.position.set(30,0,0);const geometry = new this.$three.BoxGeometry(50,50,60);const material = new this.$three.MeshBasicMaterial({color: 0xfaf33a,});const mesh = new this.$three.Mesh(geometry, material);// 网格模型设置了位置,且父对象是组对象,这样css2模型对象添加到mesh中后,会直接继承mesh的世界坐标mesh.position.set(50,60,-60);let dom = this.createDiv("父对象是Group的模型标签");const obj = new CSS2DObject(dom);mesh.add(obj);group.add(mesh);this.scene.add(group);},// 标注模型几何体的某个顶点createCone() {// 创建圆锥缓冲几何体对象const coneGeometry = new this.$three.ConeGeometry(20,100,32);// 创建材质对象const material = new this.$three.MeshBasicMaterial({color: 0xffaadd});// 创建网格模型对象const cone_mesh = new this.$three.Mesh(coneGeometry, material);const pos = coneGeometry.attributes.position;const dom = this.createDiv("我是圆锥的标注标签");const tag = new CSS2DObject(dom);cone_mesh.add(tag);cone_mesh.translateY(50); // 圆锥几何体Y轴平移50tag.position.y += 50; //  css2模型对象this.scene.add(cone_mesh);},createDiv(innerText='盒子模型标签') {let dom = window.document.createElement("div");dom.innerHTML = innerText;dom.style.border = '1px solid blue';dom.style.height = '20px';dom.style.color = '#0A58F6';dom.style.padding = '5px 10px';dom.style.borderRadius = "5px";dom.style.top = '-20px';dom.style.background = "#F7F2EE";return dom;},renderFun() {this.renderer.render(this.scene, this.camera);this.css2DRenderer.render(this.scene, this.camera);window.requestAnimationFrame(this.renderFun);},},
};
</script>
//
<style lang="less" scoped>
.box-card-left {display: flex;align-items: flex-start;flex-direction: row;position: relative;width: 100%;.box-right {img{width:500px;user-select: none;}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/250247.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud_学习笔记_1

SpringCloud01 1.认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢&#xff1f; 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构&#xff…

FairGuard游戏加固入选《CCSIP 2023中国网络安全行业全景册(第六版)》

2024年1月24日&#xff0c; FreeBuf咨询正式发布《CCSIP 2023中国网络安全行业全景册(第六版)》。本次发布的全景图&#xff0c;共计展示20个一级分类、108个细分安全领域&#xff0c;旨在为广大企业提供网络安全产品选型参考&#xff0c;帮助企业了解中国网络安全技术与市场的…

一道sql注入的ctf题目致使用phpmyadmin上传 webshell 拿后台权限

以下均为靶场测试环境渗透&#xff0c;非正式环境。 遇见登录框&#xff0c;直接万能密码’or(11)or’/1 直接登录成功并返回结果: 既然存在sql注入&#xff0c;那就用sqlmap跑一下吧&#xff1a; 输出所有的数据库&#xff1a; sqlmap -u <目标URL> --dbs 要输出数据库…

docker中三种常用的持久化数据的方式

文章目录 介绍1.docker run -v2.volumes3.bind mounts 介绍 “前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。” 在Docker中&#xff0c;有以下三种常用的持久化数据的方式&#xff0c;可…

Kotlin快速入门系列10

Kotlin的委托 委托模式是常见的设计模式之一。在委托模式中&#xff0c;有两个对象参与处理同一个请求&#xff0c;接受请求的对象将请求委托给另一个对象来处理。与Java一样&#xff0c;Kotlin也支持委托模式&#xff0c;通过关键字by。 类委托 类的委托即一个类中定义的方…

2024美赛数学建模A题思路分析 - 资源可用性和性别比例

1 赛题 问题A&#xff1a;资源可用性和性别比例 虽然一些动物物种存在于通常的雄性或雌性性别之外&#xff0c;但大多数物种实质上是雄性或雌性。虽然许多物种在出生时的性别比例为1&#xff1a;1&#xff0c;但其他物种的性别比例并不均匀。这被称为适应性性别比例的变化。例…

【Javaweb程序】【C00155】基于SSM的旅游旅行管理系统(论文+PPT)

基于SSM的旅游旅行管理系统&#xff08;论文PPT&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于SSM的旅游旅行管理系统 本系统分为前台系统模块、管理员模块、用户模块以及商家模块 其中前台系统模块的权限为&#xff1a;当游客打开系统的网址后…

C++ 数论相关题目 博弈论:拆分-Nim游戏

给定 n 堆石子&#xff0c;两位玩家轮流操作&#xff0c;每次操作可以取走其中的一堆石子&#xff0c;然后放入两堆规模更小的石子&#xff08;新堆规模可以为 0 &#xff0c;且两个新堆的石子总数可以大于取走的那堆石子数&#xff09;&#xff0c;最后无法进行操作的人视为失…

Scrum敏捷开发企业培训-敏捷研发管理

课程简介 Scrum是目前运用最为广泛的敏捷开发方法&#xff0c;是一个轻量级的项目管理和产品研发管理框架。 这是一个两天的实训课程&#xff0c;面向研发管理者、项目经理、产品经理、研发团队等&#xff0c;旨在帮助学员全面系统地学习Scrum和敏捷开发, 帮助企业快速启动敏…

带libc源码gdb动态调试(导入glibc库使得可执行文件动态调试时可看见调用库函数源码)

文章目录 参考部分查看源码是否编译时有-g调试信息和符号表在 gdb 中加载 debug 文件/符号表将 debug 文件放入 ".debug" 文件夹通过 gdb 命令 set debug-file-directory directories GCC的gcc和g区别指定gcc/g&#xff0c;glibc的版本进行编译指定gcc/g的版本指定gl…

bash脚本学习笔记

一、扫盲 脚本文件是一种文本文件&#xff0c;其中包含了一系列的命令和指令&#xff0c;可以被操作系统解释器直接解释执行。脚本文件通常被用来完成特定的任务或执行重复性的操作。 脚本文件通常以某种编程语言的语法编写&#xff0c;例如 Bash、Python、Perl、Ruby 等等。…

Vue Router

Vue Router 一、Vue Router 回顾 1、路由简介 路由是一个比较广义和抽象的概念&#xff0c;路由的本质就是对应关系。 在开发中&#xff0c;路由分为&#xff1a; ​ 后端路由​ 前端路由 后端路由 概念&#xff1a;根据不同的用户 URL 请求&#xff0c;返回不同的内容本…

k8s中调整Pod数量限制的方法

一、介绍 Kubernetes节点每个默认允许最多创建110个pod&#xff0c;有时可能由于主机配置扩容的问题&#xff0c;从而需要修改节点pod运行数量的限制。 即&#xff1a;需要调整Node节点的最大可运行Pod数量。 一般来说&#xff0c;只需要在kubelet启动命令中增加–max-pods参数…

MySQL进阶之锁(全局锁以及备份报错解决)

锁 全局锁 全局锁就是对整个数据库实例加锁&#xff0c;加锁后整个实例就处于只读状态&#xff0c;后续的DML的写语句&#xff0c;DDL语 句&#xff0c;已经更新操作的事务提交语句都将被阻塞。 其典型的使用场景是做全库的逻辑备份&#xff0c;对所有的表进行锁定&#xff…

Java 基于 SpringBoot+Vue 的考研论坛管理系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

在PostgreSQL中不开归档?恭喜你!锅你背定了

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

微信小程序~上推加载更多组件

本组件使用的是TaroReact 实现的 &#xff0c;具体代码如下 一共分为tsx和less文件 //index.tsx /** RefreshLoading* description 上推加载更多组件* param loading boolean* param style* returns*/import { View } from "tarojs/components"; import React, { FC…

深入解剖指针篇(3)

个人主页&#xff08;找往期文章&#xff09; &#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 目录 二级指针 指针数组 指针数组模拟二维数组 字符指针变量 数组指针 数组指针初始化 二维数组传参的本质 函数指针 函数指针的使用 typedef关键字 函数指针数组 二级指针…

U盘文件管理,禁止拷贝文件到U盘的解决办法

在许多企业和组织中&#xff0c;为了防止敏感数据的泄露和保护计算机系统的安全&#xff0c;通常会采取一些措施来限制员工拷贝文件到U盘的行为。然而&#xff0c;有些员工可能会试图绕过这些限制&#xff0c;导致数据安全风险增加。 案例 2015年5月&#xff0c;隶属于某县政府…