three.js
关注
分享
扫一扫
BUG小熊手
代码都是从各个大佬中借鉴过来的，刚开始学习、、、
展开
-
threejs更新BufferGeometry的uv点位
在使用shape生成面，或者再拉升时，如果使用贴图就会不正常显示；经过查找了解到大多数解决方案都是针对Geometry的uv更新，所以在论坛查找方法自己处理了一个方法意外解决了这个问题，但拉升成体时Z轴的更新出现了问题。。。还需要继续研究reMapUv(obj) { // geometry.computeBoundingBox(); // console.log(geometry); let temp=new THREE.Group() te原创 2022-03-01 15:15:23 · 1329 阅读 · 6 评论 -
threejs开启对数深度缓存区时、着色器深度混乱
原因：当开启对数深度缓存区、使深度的计算精确度提升，可以解决z-fight产生的深度冲突，但着色器的深度并没有更新，因此也会干扰着色器的正常深度展示，解决：在着色器的顶点着色器与片元着色器中里进行深度更新...原创 2022-02-23 16:40:00 · 1040 阅读 · 1 评论 -
threejs 关于z-fighting问题解决方案（面重叠导致的渲染闪烁）
https://zhuanlan.zhihu.com/p/151649142转载 2022-01-07 09:57:36 · 1243 阅读 · 0 评论 -
threejs包围盒的应用
1、可以当作场景边界的判定值2、用于相机飞行的参考值3、物体碰撞的载体4、不规则物体的体积判断5、不规则物体的中心点计算（group更好用）原创 2022-01-05 10:31:07 · 4670 阅读 · 0 评论 -
threejs 网格基础了解
threejs的网格gridHelper是由线绘制而成，该对象只有继承基础类的transform还有一个颜色值可以控制（目前发现的）、如果要自定义强的网格可以直接创建线编辑，如果要动态变化网格的话、目前的想法是实时创建、删除这个方法...原创 2022-01-05 10:22:14 · 499 阅读 · 0 评论 -
threejs 射线检测出现的问题记录---多个canvas在同一图层
在多个canvas在同一图层时，发现射线检测绑定到了其他图层了（内部库包问题，不一定是普适问题），当分开图层时，无异常产生；分析：改问题最可能出现在多三维场景同时展现，并且多场景间相互关联。也可能是内部开发人员处理不当编辑射线检测功能时没有考虑到该情况。...原创 2021-12-08 16:57:15 · 361 阅读 · 0 评论 -
threejs在使用css3DRender时产生的bug
一旦使用三维div嵌入；就会遇到二维和三维的冲突：1、双击时嵌入的div时，再次点击无法触发三维拖拽视角的事件原因:双击时触发浏览器默认文字多选事件；此时拖拽将和浏览器默认事件冲突解决方法：a、关闭浏览器默认事件b、产生额外聚焦至三维场景当中c、触发双击时鼠标不在嵌入的div的目标上...原创 2021-10-26 16:16:53 · 873 阅读 · 0 评论 -
利用BufferGeometry生成三角面
利用BufferGeometry生成三角面 this._geometry = new THREE.BufferGeometry(); var vertices = new Float32Array([ 10, 10, 10, //顶点1位置 90, 10, 10, //顶点2位置 90, 90, 10, //顶点3位置 // 10, 10, 10, //原创 2021-09-27 14:47:39 · 455 阅读 · 0 评论 -
点击利用shape绘制面
//点击利用shape绘制面遇到问题：shape生成二维面，所以至少一维需要进行操作；造成后果：位置、角度偏移；解决：需要二次操作其中未编辑的一维；并旋转相匹配的let points = options.points// console.log(points)let shape = new THREE.Shape();shape.moveTo(points[0][0], points[0][2]);//将初始点移动到第一个点位置shape.position=[points[0][0], po原创 2021-09-27 14:43:40 · 212 阅读 · 0 评论 -
这是一份针对各类材质；灯光与多场景的测试代码
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>基础测试</title> <script type="text/javascript" src="./node_modules/three/build/three.js"></script> <script type="text/javascript" sr原创 2021-07-16 17:46:01 · 108 阅读 · 0 评论 -
threejs制作高亮物体
首先，我们使用高亮材质时，灯光会作用于整个场景；这样产生的亮度会被场景中和；（当然大佬们可以通过自己对材质的高度灵活运用直接达到某种效果）；这边提供一个思路：创建两个场景和摄像机；把高亮灯光的场景独立开；通过一个renderer渲染；达到明显的区分（满麻烦的。。。）注意：记得在renderer渲染前加上：renderer.autoClear = false;renderer.clear();...原创 2021-07-16 17:41:29 · 1055 阅读 · 0 评论 -
threejs模型加载进度监控
模型加载进度： const manager = new THREE.LoadingManager(); manager.onProgress = function ( item, loaded, total ) { console.log( item, loaded, total ); }; const loader = new OBJLoader( manager ); loader.load( 'models/obj/tree.obj', function原创 2021-07-13 14:49:23 · 2589 阅读 · 0 评论 -
threejs标准材质的使用
标准材质：//可以制作金属或者玻璃的效果（效果比其他材质更好）new THREE.MeshStandardMaterial({color:’#ffffff’,//reflectivity:0, //反射率 默认1 不适用该材质refractionRatio:0,//环境贴图折射率 默认0.98roughness: 0, //粗糙程度 0镜面 1完全扩散 默认0.5//roughnessMap:texture2,//与 粗糙程度相乘metalness: 0.5, //金属1 塑料0 默认0.翻译 2021-07-09 12:00:01 · 887 阅读 · 0 评论 -
随机动态画线条
https://www.jianshu.com/p/a6a437d75f46转载 2021-03-05 11:19:11 · 264 阅读 · 0 评论 -
threejs基础动态效果制作方法
一：常见平移，缩放，旋转：利用小量变化累加，形成连贯动态效果常见属性—object.position || object.scale || object.rotation… let value //位移差量 let option.opacity //透明度差量..... let b=setInterval(function(){ //每次平移量（固定时间） line.position.y+=value/20 //每次透明度减小量（固定时间）原创 2021-03-04 11:53:54 · 871 阅读 · 1 评论 -
threejs获取已创建scene的子对象
方法一：遍历for（let data in scene.children){if(scene.children.name==“cube”,scene.children.uuid==“cube”){console.log(scene.children)}}方法二：内置方法console.log(scene.getObjectByName(‘cube’),scene.getObjectByProperty(‘uuid’,“123”),scene.getObjectByProperty(‘name’转载 2021-03-04 11:24:35 · 2121 阅读 · 1 评论 -
threejs，模型的背部和内侧会不可见。
将材质设置成THREE.DoubleSide原创 2021-03-03 11:29:22 · 982 阅读 · 0 评论 -
threejs自定义引入模型进行点击获取
最近编辑点击事件时发现：threejs的 raycaster只对mesh有感应，而引入模型类型是group，那么要对引入模型进行获取就要把raycaster.intersectObjects（children）里children对象设置为group的children这样就可以编辑对引入模型的点击事件。如果目标模型的同级模型干扰严重，可以直接外部建立一个透明mesh进行点击绑定// 获取与射线相交的对象数组function getIntersects(event) { event.preven原创 2021-01-29 11:08:53 · 3758 阅读 · 0 评论 -
threejs文字问题
threejs模型文字居中：利用内置属性—包围盒，确定其长度，进行计算；threejs精灵文字居中：我采用的是画布生成文字添加到精灵对象；画布形成字体时的字体大小与其开始位置进行计算原创 2021-01-27 19:46:47 · 661 阅读 · 0 评论 -
three.js的单张全景图展示的vscode依赖相关
使用vscode依赖添加：node.jsthree.jsphoto-sphere-viewer本地服务器：（端口操作）npm install http-server -ghttp-server . -p 8000如果本地服务器建立失败-尝试：get-ExecutionPolicy //返回如为RemoteSign，继续，不是则其他方案。set-ExecutionPolicy RemoteSignedget-ExecutionPolicyhttp-server原创 2020-10-21 11:02:57 · 168 阅读 · 0 评论