Three.js加载PLY文件

 这是官方的例子

three.js webgl - PLY

我在Vue3中使用,测试了好久始终不显示点云数据。在网上查询后发现ply文件要放置在public目录下才行

			<el-row><el-button type="primary" class="el-btn" @click="IniThree1">PLY</el-button><div id="my-three" style="height:600px;width:100%"></div></el-row><script setup lang="ts" name="Camera3DScan">
import { ref, onMounted, watch } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader'const scene = new THREE.Scene();
//创建一个透视相机,窗口宽度,窗口高度
const width = window.innerWidth, height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
//创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer()const IniThree1 = async () => {console.log('initThree --')// 添加多个模型(添加圆形)// const  geometry2 = new THREE.SphereGeometry(60, 40, 40);// const  material2 = new THREE.MeshLambertMaterial({//     color: 0xffff00// });// const mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh// // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120// mesh2.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0// scene.add(mesh2);scene.add(new THREE.HemisphereLight(0x8d7c7c, 0x494966, 3));//添加光源 //会照亮场景里的全部物体(氛围灯),前提是物体是可以接受灯光的,这种灯是无方向的,即不会有阴影。const ambient = new THREE.AmbientLight(0xffffff, 0.4);const light = new THREE.PointLight(0xffffff, 1);//点光源,color:灯光颜色,intensity:光照强度scene.add(ambient);light.position.set(200, 300, 400);scene.add(light);//设置相机位置camera.position.set(300, 300, 300);//设置相机方向camera.lookAt(0, 0, 0);//创建辅助坐标轴const axesHelper = new THREE.AxesHelper(200);//参数200标示坐标系大小,可以根据场景大小去设置scene.add(axesHelper);const loader = new PLYLoader();try {//在此运行代码//let s = '../../plublic/Static/ply/Lucy100k'//let s = './assets/ply/Result.ply'let s ='../public/Static/ply/Result.ply'loader.load(s,function (geometry) {console.log('loader.load ');//import {aa} from s;console.log(geometry);geometry.computeVertexNormals();const  material2 = new THREE.PointsMaterial({ size: 0.01 });//const material.vertexColors = true;let mesh2 = new THREE.Points(geometry, material2);mesh2.position.x = 0;mesh2.position.y = -1;mesh2.position.z = 0;mesh2.scale.multiplyScalar(0.2);mesh2.castShadow = true;mesh2.receiveShadow = true;scene.add(mesh2);scene.background = new THREE.Color(0x52645b);console.log('loader.load OK');// //创建一个物体(形状)// const geometry1 = new THREE.BoxGeometry(100, 200, 100);//长宽高都是100的立方体// console.log(geometry1);// // const geometry = new THREE.SphereGeometry(60,40,40);//半径是60的圆// //widthSegments, heightSegments:水平方向和垂直方向上分段数。widthSegments最小值为3,默认值为8。heightSegments最小值为2,默认值为6。// //创建材质(外观)// const material = new THREE.MeshLambertMaterial({// 	// color: 0x0000ff,//设置材质颜色(蓝色)// 	color: 0x00ff00,//(绿色)// 	transparent: true,//开启透明度// 	opacity: 0.5 //设置透明度// });// //创建一个网格模型对象// const mesh = new THREE.Mesh(geometry1, material);//网络模型对象Mesh// //把网格模型添加到三维场景// scene.add(mesh);//网络模型添加到场景中},function (xhr) {console.log((xhr.loaded / xhr.total) * 100 + "% loaded");},function (err) {console.error(err);});console.log('loader ok')}catch (err) {//在此处理错误console.log(err)}console.log('loader ok end')renderer.setSize(width, height)//设置渲染区尺寸renderer.render(scene, camera)//执行渲染操作、指定场景、相机作为参数const controls = new OrbitControls(camera, renderer.domElement)//创建控件对象controls.addEventListener('change', () => {renderer.render(scene, camera)//监听鼠标,键盘事件console.log('mouse ')})document.getElementById('my-three')?.appendChild(renderer.domElement)
} //let cameraTarget, renderer;//scene: { background: any; fog: any; add: (arg0: any) => void; }, camera,onMounted(() => {IniThree1()})

最终效果

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

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

相关文章

docker部署seata1.6.0

docker部署seata1.6.0 Seata 是 阿里巴巴 开源的 分布式事务中间件&#xff0c;解决 微服务 场景下面临的分布式事务问题。需要先搭建seata服务端然后与springcloud的集成以实现分布式事务控制的过程 &#xff0c;项目中只需要在远程调用APi服务的方法上使用注解 GlobalTransa…

使用logicflow流程图实例

一.背景 需要使用流程引擎开发项目&#xff0c;没有使用flowable、activiti这类的国外流程引擎&#xff0c;想使用国内的引擎二次开发&#xff0c;缺少单例模式的流程画图程序&#xff0c;都是vue、react、angluer的不适合&#xff0c;从网上找了antx6、logicflow、bpmn.js。感…

架构设计:数据库扩展

引言 随着业务的发展和用户规模的增长&#xff0c;数据库往往会面临着存储容量不足、性能瓶颈等问题。为了解决这些问题&#xff0c;数据库扩展成为了一种常见的解决方案。在数据库扩展的实践中&#xff0c;有许多不同的策略和技术可供选择&#xff0c;其中包括水平拆分、垂直…

【MySQL 探索之旅】初始MySQL数据库

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有…

【LeetCode每日一题】 单调栈的案例84 柱状图中最大的矩形

84 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;heights [2,1,5,6,2,3] 输出&#xff1a;10 解释…

Conmi的正确答案——将JAVA中maven的.m2文件夹放到D盘

系统&#xff1a;WIN11 1、将.m2文件夹移动到D盘 移动后&#xff1a; 2、创建目录链接 mklink /j "C:\Users\Administrator\.m2" "D:\.m2"至此&#xff0c;maven默认的jar包会加载到D盘的.m2文件夹

Ubuntu环境安装MySQL数据库

1.安装过程 打开终端&#xff08;Terminal&#xff09;窗口&#xff0c;使用以下命令更新系统软件包&#xff1a; sudo apt update ubuntu环境安装mysql-server和mysql开发包&#xff0c;包括mysql头文件和动态库文件&#xff0c;命令如下&#xff1a; sudo apt-get instal…

vue复用组件出现data-v-xxx乱码无法通过css修改指定样式

vue复用组件出现data-v-xxx乱码无法通过css修改指定样式解决方案如下 选择需要修改的样式 给最高级父级元素定义新的classname 与原有样式保持相同级联 修改指定样式 .demo_parent .demo_son .demo_grandson[data-v-73a2ee76]{ padding: 0; border-radius: 3px; background: #…

分享数字孪生潭江流域建设与实践论文

数字孪生潭江流域建设 广东省水利厅 以支撑江门市沿线水工程精准联调联控&#xff0c;提升水旱灾害防御能力为首要任务&#xff0c;融合多信息源预报、GIS等技术&#xff0c;建立气象-水文-水动力集一体的复杂流域入库径流预报及其洪涝延伸预报模型平台&#xff0c;构建具有“…

HTMLElement.click()的回调触发踩坑

先看看以下代码 const el document.getElementById("btn") el.addEventListener("click", () > {Promise.resolve().then(() > console.log("microtask 1"));console.log("1"); }); el.addEventListener("click", (…

Spring Boot 手写starter!!!

原因&#xff1a;为什么要手写starter&#xff1f;&#xff1f;&#xff1f; 原因&#xff1a;简化功能。 实例&#xff1a;以分页为例&#xff1a;写一个starter。 1.首先定义一个PageX注解。 Target({ElementType.METHOD}) Retention(RetentionPolicy.RUNTIME) Documented p…

mac/windows git ssh 配置多平台账号(入门篇)

目录 引子多账号多平台配置git一、.ssh文件夹路径1.1 mac 系统1.2 windows 系统 二、生成new ssh2.1 mac系统2.2 windows 系统 三、配置 config四、验证五、用ssh方式拉取远程仓库代码 引子 push代码到github仓库时&#xff0c;提示报错。 Push failed Remote: Support for pa…

Redis部署方式(一)四种部署方式介绍

redis的四种部署方式&#xff1a; Redis单机模式部署、Redis主从模式部署、Redis哨兵模式部署、Cluster集群模式部署&#xff0c;后面三种&#xff08;主从模式&#xff0c;Sentinel哨兵模式&#xff0c;Cluster模式&#xff09;也可以统称为集群模式。 一、单机 1、缺点&…

XFF伪造 [MRCTF2020]PYWebsite1

打开题目 直接查看源码 看到一个./flag.php 访问一下 购买者的ip已经被记录&#xff0c;本地可以看到flag&#xff0c;那么使用xff或者client-ip伪造一下ip试试 bp抓包 加一个X-Forwarded-For头 得到flag

T-Dongle-S3开发笔记——分区表

参考&#xff1a; ESP32之 ESP-IDF 教学&#xff08;十三&#xff09;—— 分区表_esp32分区表-CSDN博客 分区表 - ESP32 - — ESP-IDF 编程指南 latest 文档 (espressif.com) 分区表是 ESP32 划分内部 flash 闪存的清单&#xff0c;它将 flash 划分为多个不同功能的区域用于…

QT问题 打开Qt Creator发现没有菜单栏

之前不知道按了什么快捷键,当我再次打开Qt Creator时发现菜单栏消失啦 找了许多原因发现:安装有道词典的快捷键Ctrl Alt m 与Qt Creator里的快捷键冲突导致菜单栏被莫名其妙的隐藏 解决方法: 1找到有道词典快捷键 2再次按快捷键 Ctrl Alt m就可以重新显示菜单栏

【Pytorch】从MoCo看无监督对比学习;从SupCon看有监督对比学习

目录 无监督对比学习&#xff1a;Moco文章内容理解代码解释 有监督对比学习&#xff1a;Supervised Contrastive Learning文章内容理解 无监督对比学习&#xff1a;Moco 文章内容理解 以下内容全部来自于&#xff1a;自监督学习-MoCo-论文笔记. 侵删 论文&#xff1a;Momentu…

超平面介绍

超平面公式 (1) 超平面是指n维线性空间中维度为n-1的子空间。它可以把线性空间分割成不相交的两部分。比如二维空间中&#xff0c;一条直线是一维的&#xff0c;它把平面分成了两部分&#xff1b;三维空间中&#xff0c;一个平面是二维的&#xff0c;它把空间分成了两部分。(2…

性能优化——canvas 加载海量图

背景 公司的在线设计稿平台的画板列表页开发时由于数据量不足&#xff0c;未能测出关于画板列表页性能问题&#xff0c;在经过用户一段时间的使用后出现了关于初始化卡顿、缩放卡顿等问题&#xff0c;画板列表页采用了vue-konva 原因 关于画板列表为何卡顿有如下几点原因 1、…

如何用jmeter请求application/octet-stream,image/jpeg

用postman调用时&#xff1a; 用jmeter&#xff1a; 注意上图不要勾选&#xff0c;不然会把所有的内容都以二进制传进去&#xff0c;我们不勾选只传二进制的图片内容&#xff0c;勾选了会把MIME类型、参数名称都转为二进制传进去。会报错。