![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Three&webGL&laya&babylon&Unity
web3D webAR
废柴小z
这个作者很懒,什么都没留下…
展开
-
H5 3D寻路
炫耀一下我做的H5 3D寻路哈哈哈。原创 2023-05-19 16:51:49 · 114 阅读 · 0 评论 -
THREE.js模型效果优化必备代码
【代码】THREE.js模型效果优化必备代码。原创 2023-05-19 16:01:38 · 130 阅读 · 0 评论 -
THREE.js设置背景色
背景色透明(注释掉背景色设置的代码)原创 2023-05-19 10:50:23 · 2157 阅读 · 0 评论 -
给3D模型增加标签
图中小小的书签图标使用Sprite来做,文字标签使用CSS2DObject,划线使用THREE.Line。原创 2023-05-12 11:26:15 · 294 阅读 · 0 评论 -
使用CSS2DRenderer在3D项目中创建Label标签并添加点击事件(代替鼠标射线检测)
创建控制器的时候传入labelRenderer.domElement,这样在控制旋转移动3D模型的时候标签可以同步跟着动。创建lable,要把label放在3D场景中的什么位置就设置为什么位置(label本质是div标签)刷新渲染的时候记住同步刷新 labelRenderer。创建场景相机灯光加载模型等代码省略。引入CSS2DRenderer。原创 2023-05-12 11:00:35 · 1524 阅读 · 0 评论 -
cannon.js根据gltf的Mesh生成碰撞体
【代码】cannon.js根据gltf的Mesh生成碰撞体。原创 2022-11-16 09:51:30 · 932 阅读 · 11 评论 -
关于logarithmicDepthBuffer属性
logarithmicDepthBuffer, 官方解释: 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异,就有必要使用, 默认是false。使用了会带来额外的开销, 但是效果会变好.渲染器渲染时有个特点, 距离越远的物体精度越低, 因此, 在远处, 多个材质可能集中在一个像素点上, 产生各种不正常现象, 这也叫z-fight.需要注意,该问题在微信小程序里,微信开发者工具模型显示是正常的完整的,到手机上看是不完整的。容易误判为近裁剪面的问题。原创 2022-09-19 15:12:54 · 1236 阅读 · 0 评论 -
微信小程序中three.js的canvas非全屏情况下射线检测不准确问题解决方案
全屏情况下的射线检测函数一般是这样写的:当canvas非全屏时写法:原创 2022-06-22 16:10:54 · 492 阅读 · 0 评论 -
three.js判断两个向量(角度)夹角误差是否小于某个值
判断两个欧拉角的差值是否在规范范围内原创 2022-06-18 09:22:02 · 230 阅读 · 0 评论 -
Laya实现背景透明
Laya透明原创 2022-06-14 20:16:00 · 648 阅读 · 0 评论 -
Laya横屏方式设置
Laya设置Laya.stage.screenMode = Laya.Stage.SCREEN_HORIZTAL;后的横屏是竖屏状态逆时针转了90度。但是我希望是顺时针转90度。修改如下:修改文件laya.core.js if (rotation){ if (this._screenMode==="horizontal"){ mat.rotate(Math.PI / 2); mat.translate(screenHeight / pixelRatio,0); this.c原创 2022-05-16 09:57:02 · 747 阅读 · 0 评论 -
3D数学基础2:矩阵和3D线性变换
矩阵和3D线性变换线性变换包括旋转、缩放、投影、镜像、切变等,不包括平移。包含平移的变换称作仿射变换。3D中的仿射变换不能用 3×33×33×3 矩阵表达,只能用用 4×44×44×4 矩阵表达仿射变换。考虑2D 中将一物体顺时针旋转20°:旋转物体,意味着旋转物体上所有的点,这些点将被移动到一个新的位置,我们使用同一坐标系来描述变换前和变换后点的位置。如图:另一种方式:变换坐标系。旋转坐标系时,物体上的点实际没有移动,只是在另一个坐标系中描述它的位置而已。如图:这两种变换实际上是等价的,将物体原创 2022-05-10 15:09:55 · 646 阅读 · 0 评论 -
3D数学基础
坐标系传统的计算机图形学使用左手坐标系,线性代数倾向于使用右手坐标系摄像机坐标系摄像机坐标系是和观察者密切相关的坐标系。摄像机坐标系和屏幕坐标系相似,差别在于摄像机坐标系处于3D空间中而屏幕坐标系在2D平面里。摄像机坐标系能被看作是一一种特殊的 “物体”坐标系,该“物体”坐标系就定义在摄像机的屏幕可视区域。摄像机坐标系中,摄像机在原点,x轴向右,z轴向前(朝向屏幕内或摄像机方向),y轴向上(不是世界的上方而是摄像机本身的上方)。图3.1展示了一个摄像机坐标系。惯性坐标系为了简化世界坐标系到物体原创 2022-05-07 16:54:56 · 159 阅读 · 0 评论 -
Laya中Animator播放动画后无法修改transform的问题
在播放某个动画后, 如果该动画会对transform进行修改, 则对该对象的transform的控制权就移交给Animator了, 外部无法再进行修改比如:美术人员在相机上加入了动画,使相机飞入场景,开发人员加入了相机绕物体旋转或移动的脚本,则如果使用 let ani = this.camera.getComponent(Laya.Animator);ani.play('fly');播放相机飞入的动画,则开发人员的旋转移动脚本将会失效。解决办法:播放完动画后销毁该动画脚本就可以生效了let an原创 2022-05-05 19:21:30 · 589 阅读 · 0 评论 -
Three.js 与 Cannon.js 介绍与使用
Three.js 基础概念使用 Three.js 前,首先要理解以下几个核心概念:Sence 场景在 Three.js 中首先需要创建一个三维空间,我们称之为场景。场景可以想象成是一个容器,里面存放着所有渲染的物体和使用的光源。let scene = new THREE.Scene()Axes 坐标轴Three.js 采用的是右手坐标系,拇指、食指、中指分别表示 X、Y、Z 轴的方向。Camera 摄像机摄像机就相当于我们的双眼,决定了能够在场景中的所见所得。Three.js 中提供转载 2022-02-15 14:45:40 · 2460 阅读 · 1 评论 -
three.js背景图用视频纹理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>抢红包原创 2022-01-14 14:19:04 · 2292 阅读 · 0 评论 -
LayaBox 实现第三人称相机跟随
我们通常会遇到不同的场景需要不同的相机视角,例如:第一人称、第三人称。第一人称的话,可以将输入控制脚本挂载在Camera上,直接控制Camera的position和rotation来实现;对于第三人称,实际上我们控制脚本是用来控制场景中人物的动作的,所以此时我们需要根据人物的姿态的改变对相机姿态做适应性改变,达到相机跟随的效果。话不多说,直接上代码顶视图示例:因为相机要跟随主角色,所以我这里默认相机(长方块)位置是相对于角色位置后面距离为10,并且LookAt主角色位置;所以如何计算相机的位原创 2021-12-15 13:41:33 · 1421 阅读 · 0 评论 -
Laya脚本禁用enabled的坑
不论官方文档还是demo项目都写的很清楚,enabled 设置为true 调用 onEnable(),否则调用onDisable();但是当我们实际操作的的时候,却不是这样的,enabled 设置为 false后,后面再设置enable时,不管是false还是true,onEnable()和onDisable()函数都不会调用问题解决方案就是把两个函数都加个 _ 下划线前缀就可以了,如_onEnable(),_onDisable()但是这样做的话脚本里面的onUpdate()函数又失效了。万能解决.原创 2021-12-02 15:04:58 · 863 阅读 · 0 评论 -
THREE.js知识点整理
three.js必备元素创建thress.js要显示一个3D模型的必备元素:scene,camera.light,rendererH5写法: <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r127/three.min.js"></script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75,window.i原创 2021-11-29 15:07:02 · 1908 阅读 · 0 评论 -
Cannot enlarge memory arrays. Either (1) compile with -s TOTA修改
laya.physics3D.js:308 Uncaught abort("Cannot enlarge memory arrays. Either (1) compile with -s TOTA修改办法:修改如图红框中的数值。使之变大原创 2021-11-16 16:41:42 · 3275 阅读 · 0 评论 -
cannon.js物理引擎学习推荐优秀文章
Three.js 与 Cannon.js 介绍与使用three.js cannon.js物理引擎之约束原创 2021-10-20 19:41:45 · 246 阅读 · 0 评论 -
three.js多场景多元素
<!DOCTYPE html><html lang="en"> <head> <title>three.js webgl - multiple elements</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-s原创 2021-09-26 19:21:46 · 633 阅读 · 0 评论 -
使用vue学习three.js之创建、加载高级几何体-通过THREE.Geometry.merge()函数合并网格
1.demo效果如上图,该demo支持以下功能:可以通过objNum属性设置要创建的小立方体的个数。可以通过勾选combined属性来设置是否启用THREE.Geometry.merge()函数合并立方体2.涉及知识点2.1 为什么合并网格一般情况下可以使用组来操纵和管理大量网格。但是当对象的数量非常庞大时,性能就会成为一个瓶颈,因为在组里每个对象还是独立的,需要分别对它们进行渲染和处理,所以数量上来以后性能就会受到很大影响。这个时候three.js提供了一个方法可以将网格合并,来达到提升性能转载 2021-09-16 10:04:36 · 531 阅读 · 0 评论 -
使用gltf模型做一个VR地图
做一个类似于https://my.matterportvr.cn/show/?m=WsQvZoxSg5d这样的,可以进入某某房间查看和观看楼层平面图的网页:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie原创 2021-07-08 15:22:25 · 476 阅读 · 0 评论 -
我的第一个 Photo Sphere Viewer Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-07-07 11:05:55 · 381 阅读 · 0 评论 -
Krpano全景制作
一、前言在使用krpano之前,我已经做过两个全景项目了,用的是基于three.js的插件photo Sphere Viewer,这个全景插件用起来还是很方便的,虽然研究起来费了点时间,但是基本的全景功能都能实现:全景浏览、添加热点、自动旋转等…除了这个插件之外,还有其它两个和它类似的插件,虽然我没用过,但是功能看起来都差不多:Photo Sphere ViewerPanolensPannellum那什么现在又用krpano了呢?其实最开始我就是想要用krpano制作的,但是刚开始研究的时候,发转载 2021-07-02 17:50:48 · 6564 阅读 · 4 评论 -
Three.js三维模型几何体旋转、缩放和平移
Three.js三维模型几何体旋转、缩放和平移创建场景中的三维模型往往需要设置显示大小、位置、角度,three.js提供了一系列网格模型对象的几何变换方法,从WebGL的角度看,旋转、缩放、平移对应的都是模型变换矩阵,关于矩阵变换内容可以观看本人博客发布的原生WebGL课程。网格模型对象的旋转、缩放、平移等方法或属性可以查找three.js文档的Object3D对象,该对象是网格模型对象、点模型对象、线条模型对象的基类。缩放立方体网格模型x轴方向放大2倍,如果连续执行两次该语句,相等于比原来方法4倍转载 2021-06-17 13:27:42 · 6472 阅读 · 2 评论 -
three.js中的矩阵变换(模型视图投影变换)
https://blog.csdn.net/charlee44/article/details/105925497原创 2021-06-17 13:26:26 · 227 阅读 · 0 评论 -
Three.js WebGLRenderTarget(离屏渲染)
WebGLRenderTarget(离屏渲染)WebGL渲染目标对象WebGLRenderTarget实现了WebGL的离屏渲染功能,如果你有一定的WebGL或OpenGL基础,对帧缓冲区、离线渲染、后处理等概念应该是不陌生的。.render()方法WebGL渲染器WebGLRenderer渲染方法.render()的参数( Scene, Camera, WebGLRenderTarget, forceClear ).Scene:要渲染的场景对象Camera:场景对象对应的相机对象WebGLR转载 2021-06-17 13:22:30 · 2090 阅读 · 0 评论 -
微信小程序(以及THREE.js)场景导出成图片
微信小程序中type=webgl的canvas导出成图片<image src='{{photoUrl}}'></image>function createImg(){ photoUrl = renderer.domElement._ctx.canvas.toDataURL('image/jpeg'); self.setData({ photoUrl })}THREE.js场景导出成图片 function downloadImage(imgUrl原创 2021-05-24 21:29:25 · 2695 阅读 · 6 评论 -
THREE.js实现蝴蝶随机方向飞舞(飞行过程中可随机改变方向)
function animate(){ requestAnimationFrame(animate); renderer.render(scene, camera); for (let k = 0; k < hudieList.length; k++) {// hudieList中存储的是很多个蝴蝶模型Scene if (hudieList[k]) { hudieTrans(hudieList[k]);原创 2021-05-20 17:01:42 · 600 阅读 · 0 评论 -
three.js 骨骼动画的clone
const cloneGltf = (gltf) => { const clone = { animations: gltf.animations, scene: gltf.scene.clone(true) }; const skinnedMeshes = {}; gltf.scene.traverse(node => { if (node.isSkinnedMesh) { sk原创 2021-05-18 14:02:56 · 505 阅读 · 0 评论 -
Laya实现DeviceOrientationControls
var DeviceOrientationControls = function ( object ) {// 参数是camera var scope = this; var EPS = 0.000001; this.object = object; this.enabled = true; this.deviceOrientation = {}; this.screenOrientation = 0; this.alphaOffset = 0; // radians var on原创 2021-05-08 18:33:19 · 388 阅读 · 1 评论 -
浏览器获取设备方向
deviceorientationdeviceorientation 事件在方向传感器输出新数据的时候触发。其数据系传感器与地球坐标系相比较所得,也就是说在设备上可能会采用设备地磁计的数据。if (window.DeviceOrientationEvent) { window.addEventListener("deviceorientation", function(event) { // alpha: 在Z轴上的角度 var rotateDegrees = e原创 2021-04-29 10:21:04 · 608 阅读 · 2 评论 -
three.js中OrbitControls.js的属性与方法
构造函数参数数说明new THREE.OrbitControls(object: Camera,domElement: HTMLDOMElement)object: 控制的相机domElement: 可选的,指定在特定的元素(例如画布 renderer.domElement)上工作属性autoRotate: Boolean 默认false。设定为true时,相机自动围绕目标旋转但必须在animation中循环调用update();autoRotateSpeed: Float 当前者为true时转载 2021-04-26 11:27:55 · 2483 阅读 · 0 评论 -
Three.js和WebGL学习路径
http://www.webgl3d.cn/原创 2021-03-02 17:25:51 · 298 阅读 · 0 评论 -
krpano全景之vtour文件夹和tour.xml文件详解
<inelude>标签:载人其他的xml文件。 <preview>标签:在装载全景图片的过程中显示一个小的全景图。 <image>标签:载入图片。 <view>标签:存储当前视的信息。 <area>标签:定义全景图中被展示的区域 <display>标签:定义渲染的质量和性能。 <control>标签:鼠标键盘的控制设置。 <cursois>标签:自定义光标的样式。 &转载 2020-08-13 18:41:51 · 1392 阅读 · 0 评论 -
Laya鼠标点击移动旋转,滚轮缩放
function chromeInit(mod){ var rotate = new Laya.Vector3(0,0,0); var lastPosition = new Laya.Vector2(0,0); var mousedown = false; Laya.stage.on(Laya.Event.MOUSE_DOWN,this, mouseDown); Laya.stage.on(Laya.Event.MOUSE_MOVE,this, mouseMove)原创 2020-07-23 09:56:36 · 1219 阅读 · 0 评论 -
Laya播放和切换动画
摘一部分lh文件相关的json数据如下"type":"Sprite3D","props":{},"components":[ { "type":"Animator", "layers":[ { "name":"Base Layer", "weight":0, "blendingMode":0, "states":[ { "name":"4", "clipPath":"Assets/baitoujia/animator.原创 2020-07-23 09:49:54 · 1767 阅读 · 1 评论 -
Laya1.8模型缩放移动脚本
3D模型的两指缩放,写法可以有多种,版本1.8和版本2.1.1的实现也可能不大一样,但3D模型的缩放思路都是相同的:mousedown时记录两指距离distance1以及当前3D模型的缩放值scale1当mousemove时计算当下的两指距离distance2,然后根据distance2和distance1的差值在scale1的基础上计算新的缩放值scale2,然后将scale2赋值给3D模型的缩放mousemove的最后将最近的distance2的值赋给distance1mouseup时解绑mo原创 2020-06-12 13:24:08 · 380 阅读 · 0 评论