three.js学习
weixin_52047574
这个作者很懒,什么都没留下…
展开
-
两种动画实现
我需要在three.js中做两种动画,一种动画是知道起点在哪,终点在哪,也知道耗时多久;还有一种是知道起点在哪,知道要走多少路程到终点,也知道耗时多久。对于前一种动画,可以使用Tween.js很方便的完成;对于后一种动画,可以先把路程加到起点上,算出终点,再用Tween.js,或者是使用Animation动画,即依靠requestAnimationFrame()方法算出一帧与下一帧之间的时间差,然后求出速度,用速度乘上两帧之间的时间差来算出下一帧的模型的位置。原创 2024-04-18 16:14:48 · 122 阅读 · 0 评论 -
three.js坐标系问题
在做一个模型旋转的功能的时候,我需要指定一个旋转轴,才发现建模师使用的c4d软件是左手坐标系;而three.js坐标系是右手坐标系。所以他建出来的模型的轴和我用three.js编辑器打开看到的轴不一样。比如他在c4d里让模型绕y轴旋转了30度,但是我用three.js编辑器看到的rotation的信息是绕z轴转了30度。这样的话假如我作为开发人员需要模型绕世界坐标的z轴方向绕45度,那么建模师那里就要找一下three.js编辑器里的z轴对应到c4d是哪个方向。原创 2024-04-18 15:54:18 · 337 阅读 · 0 评论 -
[three.js]搭建场景
虽然一直在从事three.js方面的开发工作,但是都是在同事搭建好的场景下工作的。最近接手的任务让我可以从0到1搭建一个场景,顺便复习一下。原创 2024-03-08 16:18:07 · 331 阅读 · 0 评论 -
[three.js]UV动画
好久没接触UV动画这块内容,突然接手了一个涉及这块的开发任务,被打个措手不及。完成任务后,把涉及到的知识点记录下。其实做的就是一个光带。原创 2024-03-06 14:51:06 · 330 阅读 · 0 评论 -
报错:Failed to execute ‘shaderSource‘ on ‘WebGL2RenderingContext‘: parameter 1 is not of type ‘WebGLSh
查了一下,都是英文,没理解错的话大意是内存不够了,我当时电脑有几个星期没关了且开了一堆应用,chrome浏览器开了一堆标签页,换成edge之后,就正常打开三维页面了。原创 2023-11-14 18:56:51 · 1989 阅读 · 0 评论 -
three.js碰撞检测
在Raycaster的intersectObjects方法中,如果遇到复杂且没有后代、单一的物体,这个运算会非常慢,因为据查资料这个方法会遍历有可能相交的物体(主要是Mesh)的每一个面,所以将这个复杂且单一的物体拆分会好一点,不会卡了。我估计是因为拆分之后没可能相交的部分早早就不参与运算了,所以减少了运算量。具体是不是这样还有待查证。主要是利用Raycaster来进行光线检测,检测光线射中的物体的距离是否小于规定距离,小于的话就视为要碰撞。原创 2023-08-17 14:30:43 · 253 阅读 · 1 评论 -
three.js设置gltf模型透明时失效
three.js官方文档说alphaTest属性的含义如下:设置运行alphaTest时要使用的alpha值。如果不透明度低于此值,则不会渲染材质。但问题是在未加设置alpahTest时,默认值为0的话,不透明度显然是大于它的,应该正常渲染啊,结果却并未渲染。原创 2023-08-08 23:08:37 · 485 阅读 · 1 评论 -
three.js三维坐标映射成二维坐标
代表屏幕的canvas坐标系,二维的,其左上角为原点,类似屏幕;代表three.js里的空间坐标系,三维的,其中心为原点。原创 2023-07-29 14:13:39 · 296 阅读 · 0 评论 -
CSS3DObject、CSS3DSprite和CSS2DObject的区别
用途:目前接触到的有用作三维场景中的文字标签,如three.js里的examples/css2d_label.html;或者是用二维图片模拟一些结构简单的三维物体以减少空间占用,如three.js里的examples/css3d_sprite.html。原创 2023-07-17 16:23:37 · 539 阅读 · 1 评论