![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
threejs
粉末的沉淀
无趣
展开
-
threejs:两点坐标绘制贝赛尔曲线遇到的坑
飞机从武汉飞往背景,根据起点和终点,需要绘制飞机航线,网上搜来的通用代码运行后一直找不到copy属性。坑1:ray的at方法参数变更:仔细排查发现,是ray的at方法修改了,现在必须要两个参数了,只需要增加一个临时变量来充当at方法的target 参数,只需要修改一点点就可以了。坑2:并非所有的起点和终点都可以绘制贝塞尔曲线:代码跑通后,我随便设置了如下图的一组起点和终点,结果绘制的是一条直线。v0和v3设置成下图,甚至还报NAN的错!直到我把v0和v3设置.原创 2022-05-27 09:57:18 · 1593 阅读 · 2 评论 -
threejs:流光效果封装
在网上看到的这种流光效果,在某宝买了源码后,决定把这个效果封装成js文件,以后用起来就很方便了。flyCurve.js文件代码如下:import * as THREE from 'three'var uniforms = { u_time: { value: 0.0 } };var clock = new THREE.Clock();export const timer = setInterval(()=>{ const elapsed = clock.getElaps原创 2022-05-26 09:23:45 · 4535 阅读 · 7 评论 -
threejs:如何获得几何体的boundingBox?
如果我们直接打印boundingBox(如下图),得到的结果将会是null,需要先计算,然后再打印。正确的做法:同理,Geometry的很多属性,也都是要先计算后取值。Three.js中文文档原创 2022-05-25 10:31:46 · 1340 阅读 · 0 评论 -
threejs:vue导入gltf模型报unexpected token < in json at position 0错误
1、在vue文件导入GLTFLoader.js2、初始化loader需要注意的点:文件必须放在public下面,否则会报unexpected token < in json at position 0错误。路径是'/static/gltf/Duck/glTF/Duck.gltf',前面不用再加public了。不要用function而要用=>,否则this指向会乱。用一个全局变量把导入的模型保存起来,以便其他地方调用。mounted里先导入模型,然.原创 2022-05-20 15:12:53 · 6184 阅读 · 14 评论 -
threejs:vue里dat GUI的简单用法
1、引入datGUIdatGUI并不是threejs自带的,需要自己另外下载。2、定义datGUI的控制器和添加到控制器里的对象3、对以上两个变量进行初始化CtrlObj是一个对象类型,那么要记得,对象类型的数据由key和value组成,如果key比较少,可以写成上图的形式,如果key比较多,建议用.keyname的形式,如下图,0.01就是key的默认值。4、添加控制器对象到控制器引号里的名字必须跟对象的key一致,后面的两个数据是设置最大值和最小值。...原创 2022-05-20 14:58:40 · 1665 阅读 · 0 评论 -
threejs:near和far设置错误导致阴影无法显示
关于阴影设置的文章:threeJS中,那些会让阴影失效的操作_weixin_34308389的博客-CSDN博客THREEJS阴影效果_溜得飞起的博客-CSDN博客_threejs 阴影明明自己的代码跟老师的一模一样,为什么阴影就是出不来?花了两小时一行一行代码查,最后发现竟然是near和far设置反了导致的,near一定要比far小才可以。一个完整的代码如下:<template> <div> <!-- 本案例演示添加阴影 --> &l原创 2022-05-19 13:45:41 · 1032 阅读 · 0 评论 -
threejs:相机位置太近导致几何体无法显示
今天是学习threejs的第一天,一切都进行得挺顺利的,唯一的问题是,设置物体尺寸的时候,必须是小于等于1的值,才能显示出来,大于1了,就看不到物体了,把代码截图给网友,网友指出,是相机的位置太近了,相机的位置是1,如果尺寸设置超过1,相当于相机放到物体里面去了,所以就看不到物体了,原来如此!想要尺寸设置为5,name相机的位置要超过5才好。...原创 2022-05-18 19:14:58 · 853 阅读 · 0 评论