位置: IT常识 - 正文

使用Three.js实现web端显示点云(three.js入门指南)

编辑:rootadmin
使用Three.js实现web端显示点云

推荐整理分享使用Three.js实现web端显示点云(three.js入门指南),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:three. js,three.js typescript,three.js入门指南,three.js typescript,three.js入门指南,three.js webgl,three.js bim,three.js bim,内容如对您有帮助,希望把文章链接给更多的朋友!

需要了解html、js、websocket的基本使用,建议浏览three.js文档中场景、渲染器、光源、相机以点模型、Buffergeometry的相关知识

第一步,创建html文件

<!DOCTYPE html><html><head><meta charset="utf-8"><title>My first three.js app</title><style>body { margin: 0; } /* 隐藏body窗口区域滚动条 */</style></head><body> <script src="./static/three.js"></script>//引入three及相关插件 <script src="./static/OrbitControls.js"></script>//轨道控制器,用于调整视角<script>// Our Javascript will go here.</script></body></html>

第二步,从npm安装three

npm install three

导入整个 three.js核心库

import * as THREE from 'three';

 或是使用cdn或者在官网下载three.js文件用标签引入

第三步,配置websocket连接

ws = new WebSocket('ws://192.168.3.12:9900/api/ws/')//这里换成自己的数据发送地址 ws.onopen = () => {//连接成功的回调 console.log('连接服务器成功了...') ws.send( 'Hello backend' ) } ws.onclose = () => {//连接失败的回调 console.log('连接服务器失败') } ws.onmessage = (msg) => {//收到消息的回调,在这里处理数据 pointcloud = JSON.parse(msg.data) }使用Three.js实现web端显示点云(three.js入门指南)

 第四步,配置场景、相机、渲染器、光源

var scene = new THREE.Scene();//创建场景 //环境光 var ambient = new THREE.AmbientLight(0x444444); scene.add(ambient);//向场景中添加环境光 /** * 相机设置 */ var width = window.innerWidth; //窗口宽度 var height = window.innerHeight; //窗口高度 var k = width / height; //窗口宽高比 var s = 80; //三维场景显示范围控制系数,系数越大,显示的范围越大 //创建相机对象 var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 100); camera.position.set(0, -15, 7); //设置相机位置 // var position1 = new THREE.Vector3(0, 25, 0) camera.lookAt(lookatbox.position); //设置相机方向(指向的场景对象) /** * 创建渲染器对象 */ var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height);//设置渲染区域尺寸 renderer.setClearColor(0x000000, 1); //设置背景颜色 document.body.appendChild(renderer.domElement); //body元素中插入canvas对象 //执行渲染操作 指定场景、相机作为参数 function render() { renderer.render(scene, camera);//执行渲染操作 } render();

向场景中添加模型,需要调用scene.add()

以上相关设置根据自己的需要进行调试

第五步,初始化点云

var material = new THREE.PointsMaterial({ color: 0xffffff,//模型颜色 size: 0.05//模型大小 });//配置模型的材质对象 function initpoint() { geometry = new THREE.BufferGeometry();//创建图形对象 var vertices = new Float32Array();//创建图形的顶点对象 attribue = new THREE.BufferAttribute(vertices, 3);//创建属性对象 var points = new THREE.Points(geometry, material);//将上述对象配置到点模型对象上 scene.add(points); }; initpoint();

第六步,点云的更新

var DrawPoint = function (arr1) { attribue = new THREE.BufferAttribute(new Float32Array(arr1), 3); geometry.attributes.position = attribue; }; setInterval(() = > { DrawPoint(pointcloud);//这里的pointcloud是onmessage接口处传出来的数据 render(); },30)

Float32Array()接收值为一维数组,传入的点云数据应处理成以[x1,y1,z1,x2,y2,z2……]顺序的数组

如有需要,可以添加坐标和网格辅助

var axisHelper = new THREE.AxisHelper(10); scene.add(axisHelper);//添加坐标指示器 var controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象 controls.addEventListener('change', render);//监听鼠标、键盘事件

这样就初步实现了点云数据的实时显示

这里还根据点的强度显示了不同的颜色

如有疑问,欢迎交流

本文链接地址:https://www.jiuchutong.com/zhishi/288002.html 转载请保留说明!

上一篇:碧峰峡熊猫基地的大熊猫宝宝,中国四川 (© Suzi Eszterhas/Minden Pictures)(碧峰峡熊猫基地门票)

下一篇:圆顶礁国家公园的大教堂谷,犹他州 (© Tim Fitzharris/Minden Pictures)(圆顶亭效果图)

  • 全民营销时代下,你的营销为什么效果没有预期好?(全民营销策略)

    全民营销时代下,你的营销为什么效果没有预期好?(全民营销策略)

  • word怎么添加导航目录(word怎么添加导航链接)

    word怎么添加导航目录(word怎么添加导航链接)

  • iphone12开发者选项设置在哪里(iphone开发者选项设置有什么用)

    iphone12开发者选项设置在哪里(iphone开发者选项设置有什么用)

  • 华为p40pro和p40有什么不同(华为p40pro跟p40)

    华为p40pro和p40有什么不同(华为p40pro跟p40)

  • 手机空白处按不出来小窗口(手机空白处长按不动是什么原因)

    手机空白处按不出来小窗口(手机空白处长按不动是什么原因)

  • 宽带连接629被远程计算机终止(宽带连接629被远程计算机终止怎么办)

    宽带连接629被远程计算机终止(宽带连接629被远程计算机终止怎么办)

  • 屏蔽和删除有什么区别(屏蔽跟删除的区别)

    屏蔽和删除有什么区别(屏蔽跟删除的区别)

  • 手机号有12位数的吗(手机号码有12位的嘛)

    手机号有12位数的吗(手机号码有12位的嘛)

  • linein是什么接口(line in是什么接口)

    linein是什么接口(line in是什么接口)

  • 微信有必要绑定qq吗(微信有必要绑定银行卡吗)

    微信有必要绑定qq吗(微信有必要绑定银行卡吗)

  • 苹果11跟xr屏幕一样吗(苹果11pro 屏幕多少寸)

    苹果11跟xr屏幕一样吗(苹果11pro 屏幕多少寸)

  • 华为matepadpro全网通和wifi有什么区别(华为matepadpro全网通)

    华为matepadpro全网通和wifi有什么区别(华为matepadpro全网通)

  • qq安全等级过低无法充值Q币怎么办(qq安全等级过低无法充值q币怎么办)

    qq安全等级过低无法充值Q币怎么办(qq安全等级过低无法充值q币怎么办)

  • 手机怎么后台锁定软件

    手机怎么后台锁定软件

  • vivo动态壁纸在哪(vivo手机动态壁纸是什么格式)

    vivo动态壁纸在哪(vivo手机动态壁纸是什么格式)

  • vogal00是什么型号(vog—al00是什么型号)

    vogal00是什么型号(vog—al00是什么型号)

  • 红米k20有呼吸灯吗(红米k20pro呼吸灯)

    红米k20有呼吸灯吗(红米k20pro呼吸灯)

  • oppo17如何设置锁屏密码(oppor17手机密码怎么设置)

    oppo17如何设置锁屏密码(oppor17手机密码怎么设置)

  • ai智能机器人怎么连网(ai智能机器人怎么联网)

    ai智能机器人怎么连网(ai智能机器人怎么联网)

  • 天猫精灵怎么远程控制(天猫精灵怎么远程打开摄像头)

    天猫精灵怎么远程控制(天猫精灵怎么远程打开摄像头)

  • 苹果手机为什么没有订阅选项(苹果手机为什么连不上wifi)

    苹果手机为什么没有订阅选项(苹果手机为什么连不上wifi)

  • 红魔手机是哪个公司(红魔手机在哪里买)

    红魔手机是哪个公司(红魔手机在哪里买)

  • 哔哩哔哩如何上传视频(哔哩哔哩是什么网站)

    哔哩哔哩如何上传视频(哔哩哔哩是什么网站)

  • 联想win10自动修复无法开机完美解决方法(联想win10自动修复失败还能保存文件吗)

    联想win10自动修复无法开机完美解决方法(联想win10自动修复失败还能保存文件吗)

  • 万字详解JVM,让你一文吃透(jvm jmm)

    万字详解JVM,让你一文吃透(jvm jmm)

  • 坏账损失核算的两种方法
  • 转账支票一定要收款人去取吗
  • etc预付发票可以抵税吗
  • 小企业会计制度及核算办法
  • 季度申报残保金怎么填写
  • 会计和税法折旧年限不同如何计算终结期现金净流量
  • 投资性房地产的初始计量
  • 赠送车子需要过户吗
  • 城镇土地使用税暂行条例
  • 进项税转出企业所得税账务怎么处理
  • 增值税专用发票几个点
  • 小规模820如何填写申报表?
  • 税前扣除有标准的项目及标准有哪些?
  • 专票和国税额差很多
  • 企业所得税免征和不征
  • 应交增值税会计科目
  • 进项税和销项税借贷方向
  • 税务部门实名认证
  • 苹果电脑记笔记
  • 简单介绍下商务洽谈的五个步骤
  • 进项发票失控怎么办
  • vue路由点击没反应
  • vue3中使用require
  • 短期借款转长期借款利息
  • 在海洋里游泳
  • php获取客户端唯一标识
  • 增值税一般纳税人登记管理办法
  • css5个定位
  • javascript获取字符串长度
  • 量子退火算法入门6
  • php网页聊天室
  • 小规模纳税人免增值税的账务处理
  • 研发支出是资产类会计科目吗
  • 通过点击一个按键的游戏
  • 金税盘离线开票时间超限怎么办
  • 税务系统重置密码
  • sql server数据库连接端口1434
  • 通信服务费账务处理流程
  • 员工福利开的专票怎么做分录
  • 预付账款用途
  • 管理费用暂估入账分录次月冲
  • 一般纳税人简易计税方法适用范围
  • 个人代人开普票个税怎么算
  • 进口设备 退税
  • 购买商标权需要缴税吗
  • 航天信息税票
  • 公司聚餐做什么科目
  • 没有收入还需要纳税吗
  • 租用写字楼水电怎么收费
  • 临时人员是什么
  • 跨行收报属于什么科目
  • 税控盘全额抵扣怎么做分录
  • 滴滴出行怎么开纸质发票
  • sql修改表增加列
  • SQL Server"错误 21002: [SQL-DMO]用户 * 已经存在问题解决
  • ubuntu系统如何安装
  • 如何使用mac book
  • tcpip. sys
  • solaris 11.4
  • windows7光盘安装
  • 系统恢复会怎么样
  • 关闭迅雷安卓版自动更新
  • Cocos2d-x c++和java相互调用
  • opengl坐标系原点
  • prototype用法
  • jQuery实现的AJAX简单弹出层效果代码
  • node.js 作用
  • 教女朋友学英语
  • unity 2Dtoolkit 插件创建中文字体
  • 基于jquery的框架有哪些
  • 批处理文件中echo什么意思
  • div与script
  • android.view.window.addflags
  • javascript初级教程
  • django的url
  • 吉林省国家税务局官网
  • 江苏税务社保缴纳查询缴费记录
  • 消费税征税环节
  • 南京税务举报
  • 开原航天医院官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设