![](https://i-blog.csdnimg.cn/direct/00b925bcb5c940e6a9cc042b55d9a4bb.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
three.js
从创建web3d到三维可视化展示再到数字孪生专题频道全方位知识讲解。
qq_35430208
喜欢研究技术
展开
-
图片作为Canvas贴图时要等图片加载完才可以读取canvas
图片作为Canvas贴图时要等图片加载完才可以读取canvas原创 2024-08-13 12:24:05 · 436 阅读 · 0 评论 -
Sprite标签(Canvas作为贴图)批量标注设备模型
在three.js中Sprite标签(Canvas作为贴图)批量标注设备模型原创 2024-08-13 12:08:40 · 435 阅读 · 0 评论 -
Sprite标签(Canvas作为贴图)标注设备模型
Sprite标签(Canvas作为贴图)来标注模型原创 2024-08-13 11:54:21 · 161 阅读 · 0 评论 -
封装一个精灵标签函数,批量标注多个设备状态
一、效果二、第一步三、第二步原创 2024-08-13 11:25:17 · 23 阅读 · 0 评论 -
模型批量标注多个标签
模型批量标注多个标签,案例应用原创 2024-08-13 09:49:52 · 243 阅读 · 0 评论 -
精灵模型标签标注设备
精灵模型标签标注设备原创 2024-08-13 09:48:58 · 79 阅读 · 0 评论 -
CSS3精灵模型
原创 2024-08-12 17:48:38 · 55 阅读 · 0 评论 -
单击关闭按钮关闭模型弹出来的详细信息窗口
three.js中点模型弹层的关闭原创 2024-08-12 16:46:35 · 223 阅读 · 0 评论 -
鼠标选中模型弹出详情标签
const obj = model.getObjectByName(intersects[0].object.ancestors.name + '标注');//递归遍历chooseObj,并给chooseObj的所有子孙后代设置一个ancestors属性指向自己。// 可以给待选对象的所有子孙后代Mesh,设置一个祖先属性ancestors,值指向祖先(待选对象)// const cunchu = model.getObjectByName('存储罐');// 射线拾取模型对象(包含多个Mesh)原创 2024-08-12 16:01:16 · 537 阅读 · 0 评论 -
给外部模型标注详细内容
工号</span><span。">异常</span>-- 名称、存储量、设备状态、等信息叠加到背景图上即可 -->-- 图片绝对定位100%填充父元素,作为标签的背景 --><span>设备A原创 2024-08-12 15:49:29 · 274 阅读 · 0 评论 -
给外部模型添加标注
div id="tag">存储设备</div>原创 2024-08-12 15:42:47 · 95 阅读 · 0 评论 -
加载外部模型glb/gltf文件(模型加载全流程)
loader.load("../models/鸭子.glb", function (gltf) { //gltf加载成功后返回一个对象。//创建一个GLTF加载器。//三维场景添加到model组对象中。// console.log('场景3D模型数据', gltf.scene);// console.log('控制台查看gltf对象结构', gltf);// 引入gltf模型加载库GLTFLoader.js。// 引入Three.js。原创 2024-08-12 15:30:12 · 108 阅读 · 0 评论 -
模型隐藏或显示
/ 如果多个模型引用了同一个材质,如果该材质`.visible`设置为false,意味着隐藏绑定该材质的所有模型。// 隐藏一个网格模型,visible的默认值是true。// 隐藏一个包含多个模型的组对象group。// material.visible可以控制是否隐藏该材质对应的模型对象。//把mesh1型插入到组group中,mesh1作为group的子对象。//把mesh2型插入到组group中,mesh2作为group的子对象。原创 2024-08-12 15:25:24 · 138 阅读 · 0 评论 -
递归遍历模型树结构、查询模型节点
if (obj.isMesh) {//判断条件也可以是obj.type === 'Mesh'//所有高层楼的父对象。// obj.isMesh:if判断模型对象obj是不是网格模型'Mesh'const mesh = model.getObjectByName('2号楼');console.log('所有模型节点的名称',obj.name);// .getObjectByName()根据名字选择模型节点。mesh.name = i + 1 + '号楼';mesh.name = i + 6 + '号楼';原创 2024-08-12 15:23:38 · 342 阅读 · 0 评论 -
canvas画布宽高度随鼠标拖动窗口变化而动态变化
/ 如果相机的一些属性发生了变化,需要执行updateProjectionMatrix ()方法更新相机的投影矩阵。// 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix。// 但是不会每渲染一帧,就通过相机的属性计算投影矩阵(节约计算资源)// 全屏情况下:设置观察范围长宽比aspect为窗口宽高比。// onresize 事件会在窗口被调整大小时发生。// 重置渲染器输出画布canvas尺寸。原创 2024-08-12 15:19:38 · 59 阅读 · 0 评论 -
Canvas画布全屏
/相机在Three.js三维坐标系中的位置。// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000:远裁截面。//窗口文档显示区的高度作为画布高度。//窗口文档显示区的宽度作为画布宽度。//相机观察目标指向Three.js坐标系原点。// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)原创 2024-08-12 15:17:27 · 60 阅读 · 0 评论 -
渲染循环实现旋转动画
/请求再次执行渲染函数render,渲染下一帧。//每次绕y轴旋转0.01弧度。原创 2024-08-12 15:06:10 · 194 阅读 · 0 评论 -
引入相机控件轨道控制器OrbitControls拖拽物体
/ 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景。// 浏览器控制台查看相机位置变化。//监听鼠标、键盘事件。原创 2024-08-12 15:03:07 · 51 阅读 · 0 评论 -
在三维场景中加入光照
/偏移光源位置,观察渲染效果变化。//点光源放在x轴上。// 设置光源的方向:通过光源position属性和目标指向对象的position属性计算。//光源光照强度不随距离改变衰减。// 方向光指向对象网格模型mesh,可以不设置,默认的位置是0,0,0。//点光源添加到场景中。//2.0环境光:没有特定方向,整体改变场景的光照明暗。原创 2024-08-12 14:53:41 · 69 阅读 · 0 评论 -
在场景中添加相机在html标签中渲染出3d图
/网格模型对象Mesh。color: 0x0000ff, //设置材质颜色。//网格模型添加到场景中。//设置网格模型在三维空间中的位置坐标,默认是坐标原点。//创建一个长方体几何对象Geometry。* 创建3D场景对象Scene。//材质对象Material。// 引入three.js。原创 2024-08-12 14:38:01 · 187 阅读 · 0 评论 -
第一个3D案例—创建3D场景
/网格模型对象Mesh。备注:此时还没有图像渲染出来,要加入相机和光照才能渲染出来3D图。//3.0设置网格模型在三维空间中的位置坐标,默认是坐标原点。//网格模型添加到场景中。color: 0x0000ff, //设置材质颜色。//1.0创建一个长方体几何对象Geometry。//2.0材质对象Material。* 创建3D场景对象Scene。// 引入three.js。原创 2024-08-12 14:28:17 · 99 阅读 · 0 评论