threejs展示glb模型

原模型为rvt模型


<template><div ref="threeJsContainer"class="three-js-container"></div>
</template>  <script>  
import { defineComponent } from "vue";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { DragControls } from "three/examples/jsm/controls/DragControls";
import { onMounted, ref, onUnmounted } from "vue";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
export default {name: 'ThreeJsScene',mounted () {this.initThreeJS();},methods: {initThreeJS () {// 创建场景  const scene = new THREE.Scene();const url = "/glb/1.glb";// 创建相机  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 5;// 创建渲染器  const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器的DOM元素添加到Vue组件的容器中  this.$refs.threeJsContainer.appendChild(renderer.domElement);// 创建几何体  // const geometry = new THREE.BoxGeometry(1, 1, 1);// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// const cube = new THREE.Mesh(geometry, material);// scene.add(cube);// 添加环境光const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambientLight);//添加坐标轴// const axesHelper = new THREE.AxesHelper(5)// scene.add(axesHelper)//添加轨道控制器const controls = new OrbitControls(camera, renderer.domElement);// 加载 glb 格式的 3D 模型const loader = new GLTFLoader();const dracoLoader = new DRACOLoader();dracoLoader.setDecoderPath("/gltf/");dracoLoader.preload();loader.setDRACOLoader(dracoLoader);loader.load(url,(gltf) => {console.log('------------')console.log(gltf)// 加载成功后的回调函数const model = gltf.scene;model.scale.set(0.8, 0.8, 0.8); // 缩小模型const box = new THREE.Box3().setFromObject(model);const center = box.getCenter(new THREE.Vector3());model.position.sub(center); // 将模型位置移到原点处scene.add(model);// 创建DragControls实例 拖动模型// const controls = new DragControls([model], camera, renderer.domElement);//controls.addEventListener('dragstart', (event) => {// 拖动开始时的事件处理  //console.log('Drag started:', event.object);// 可以从 event 对象中获取有关拖动开始的信息  //});},(xhr) => {// 加载过程中的回调函数console.log((xhr.loaded / xhr.total) * 100 + "% loaded");},(error) => {// 加载失败的回调函数console.error("Failed to load model", error);});// 渲染循环  const animate = () => {requestAnimationFrame(animate);// 更新物体或相机位置  // cube.rotation.x += 0.01;// cube.rotation.y += 0.01;// 渲染场景  renderer.render(scene, camera);};animate();// 窗口大小变化时调整相机和渲染器大小  window.addEventListener('resize', onWindowResize, false);window.addEventListener('click', onMouseClick, false);function onWindowResize () {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function onMouseClick (event) {event.preventDefault();const mouseX = (event.clientX / window.innerWidth) * 2 - 1;const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;const vector = new THREE.Vector2(mouseX, mouseY);// vector.unproject(camera);const raycaster = new THREE.Raycaster();raycaster.setFromCamera(vector, camera);const intersects = raycaster.intersectObjects(scene.children, true);// 如果有交点  if (intersects.length > 0) {// 获取最近的交点  const intersect = intersects[0];// 获取相交的物体  const object = intersect.object;// 改变物体的材质以实现高亮效果  // 可以改变颜色或透明度  object.material.color.set(0xff0000); // 设置为红色以高亮  object.material.needsUpdate = true; // 更新材质  }}},},};
</script>  <style scoped>
.three-js-container {width: 100%;height: 100%;
}
</style>

配置文件
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Golang-channel合集——源码阅读、工作流程、实现原理、已关闭channel收发操作、优雅的关闭等面试常见问题。

前言 面试被问到好几次“channel是如何实现的”&#xff0c;我只会说“啊&#xff0c;就一块内存空间传递数据呗”…所以这篇文章来深入学习一下Channel相关。从源码开始学习其组成、工作流程及一些常见考点。 NO&#xff01;共享内存 Golang的并发哲学是“要通过共享内存的…

C++ STL自定义排序

更具体的看【速记】C STL自定义排序 - 知乎 (zhihu.com) sort sort第三个位置放的greater<int>和less<int>萌新可能会弄错&#xff0c;这两个单词不是更大和更小的意思&#xff0c;而是大于和小于&#xff0c;并且比较就是自定义排序中的前者和后者。 如果是less…

2024-3-5 python 序列小知识点

1、for循环的变量作用域不限于for循环内 >>>i 10 >>>for i in range(100): >>> print(i) >>> i 100此处&#xff0c;for循环里的 i 修改了之前的 i 变量的值。 2、列表推导式里的变量作用域仅限于推导式内 推导式犹如一个函数&…

App测试中iOS和Android的差异

1、系统版本&#xff1a; iOS和Android系统版本的更新速度、使用人数比例以及功能的不同都可能导致应用程序在不同操作系统版本上的表现和兼容性存在区别。 例如&#xff0c;在iOS平台上&#xff0c;很多用户会更快地升级到最新版本的iOS系统&#xff0c;而在Android平台上&a…

Apache ECharts数据可视化技术

介绍 官方地址:Apache ECharts 快速入门案例echarts.init //初始化方法 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src"echart…

分布式系统中常用的缓存方案

1. 引言 随着互联网应用的发展和规模的不断扩大&#xff0c;分布式系统中的缓存成为了提升性能和扩展性的重要手段之一。本文将介绍几种在分布式系统中常用的缓存方案&#xff0c;包括分布式内存缓存、分布式键值存储、分布式对象存储和缓存网关等。 1.1 缓存在分布式系统中的…

工作电压范围宽的国产音频限幅器D2761用于蓝牙音箱,输出噪声最大仅-90dBV

近年来随着相关技术的不断提升&#xff0c;音箱也逐渐从传统的音箱向智能音箱、无线音箱升级。同时在消费升级的背景下&#xff0c;智能音箱成为人们提升生活品质的方式之一。智能音箱是智能化和语音交互技术的产物&#xff0c;具有点歌、购物、控制智能家居设备等功能&#xf…

Python给图片加水印

受到“手动给证件加文字太麻烦”的感触&#xff0c;想用Python来实现给图片加水印&#xff0c;这不方便多了。 这里使用PIL模块&#xff1a; from PIL import Image from PIL import ImageFont from PIL import ImageDrawimg_t Image.open(cat.jpg) img_size_t img_t.size…

C# OpenVINO Crack Seg 裂缝分割 裂缝检测

目录 效果 模型信息 项目 代码 数据集 下载 C# OpenVINO Crack Seg 裂缝分割 裂缝检测 效果 模型信息 Model Properties ------------------------- date&#xff1a;2024-02-29T16:35:48.364242 author&#xff1a;Ultralytics task&#xff1a;segment version&…

MongoDB获评2023年Gartner®云数据库管理系统“领导者”

MongoDB 很荣幸在《2023 年 Gartner 云数据库管理系统 (CDBMS) 魔力象限》报告中被评为领导者。我们相信这一成就让 MongoDB 成为唯一一家连续两年斩获“领导者”称号的纯应用程序数据库服务提供商。 社区及开发者数据平台用户的需求一向是 MongoDB 关注的重点&#xff0c;而这…

android开发教程百度网盘,高并发系统基础篇

展望未来 操作系统 移动操作系统的演变过程&#xff0c;从按键交互的塞班功能机到触摸屏交互的Android/IOS智能机&#xff0c;从小屏幕手机到全面屏、刘海屏、水滴屏。任何系统无非干两件事&#xff1a;输入和输出&#xff0c;接收到外部输入信号后经过操作系统处理后输出信息…

小白优化Oracle的利器”sqltrpt.sql”脚本

SQL调优顾问是Oracle自带的一个功能强大的内部诊断工具&#xff0c;用于对性能不佳的SQL语句给出优化建议。但如果从命令行调用它比较麻烦&#xff0c;幸运的是&#xff0c;Oracle提供了一个方便的内置脚本“sqltrpt.sql”&#xff0c;简化了调用过程。 sqltrpt.sql脚本位于Or…

【OpenGL】(1) 专栏介绍:OpenGL 库 | 3D 计算机图形应用 | GPGPU 计算 | 3D 建模和 3D动画 | 渲染技术介绍

&#x1f517; 《C语言趣味教程》&#x1f448; 猛戳订阅&#xff01;&#xff01;&#xff01; &#x1f4ad; 写在前面&#xff1a;本专栏主要内容是关于 3D 计算机图形技术的学习&#xff0c;重点是学习与此技术相关的 3D 实时渲染 (3D real-time rendering) 技术。我们会以…

VR科学知识互动展示介绍|游戏体验馆加盟|VR展示厅

VR科学知识互动展示是一种利用虚拟现实技术来呈现科学知识并与观众进行互动的展示方式。通过VR设备&#xff0c;参观者可以沉浸在各种科学主题的虚拟环境中&#xff0c;以全新的视角和体验来探索科学领域的知识。 这样的展示通常结合了视觉、听觉和触觉等感官体验&#xff0c;使…

LeetCode 刷题 [C++] 第98题.验证二叉搜索树

题目描述 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 题目分析 由题…

花王如何让护舒宝退出日本市场?|日本极致产品力

摘要&#xff1a;《极致产品力》日本深度研学是一个顾问式课程,可以帮助企业找产品、找方向、找方法,在日本终端市场考察中洞悉热销产品背后的成功逻辑&#xff0c;了解最新最前沿的产品趋势和机会。结合日本消费趋势中国转化的众多经验,从品牌、包装、卖点、技术和生产工艺等多…

面试经典150题【51-60】

文章目录 面试经典150题【51-60】71.简化路径155.最小栈150.逆波兰表达式求值224.基本计算器141.环形链表2.两数相加21.合并两个有序链表138.随机链表的复制19.删除链表的倒数第N个节点82.删除链表中的重复元素II 面试经典150题【51-60】 71.简化路径 先用split(“/”)分开。然…

Ubuntu进入python时报错:找不到命令 “python”,“python3” 命令来自 Debian 软件包 python3

一、错误描述 二、解决办法 进入”/usr/bin”目录下&#xff0c;查看/usr/bin目录中所有与python相关的文件和链接&#xff1a; cd /usr/bin ls -l | grep python 可以看到Python3指向的是Python3.10&#xff0c;而并无指向python3的软连接 只需要在python与python3之间手动…

第五十天| 123.买卖股票的最佳时机III、188.买卖股票的最佳时机IV

第四十八天| 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II-CSDN博客 Leetcode 123.买卖股票的最佳时机III 题目链接&#xff1a;123 买卖股票的最佳时机III 题干&#xff1a;给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。 设计一个算法来…

centos上部署k8s

环境准备 四台Linux服务器 主机名 IP 角色 k8s-master-94 192.168.0.94 master k8s-node1-95 192.168.0.95 node1 k8s-node2-96 192.168.0.96 node2 habor 192.168.0.77 镜像仓库 三台机器均执行以下命令&#xff1a; 查看centos版本 [rootlocalhost Work]# cat /…