- 博客(13)
- 收藏
- 关注
RSS订阅原创 THREEJS物体反射效果
但是设置为false时，另外可能有些精度的场景会出现叠加图层闪烁z-buffer这种问题，处理办法是，创建相机【PerspectiveCamera】尽量缩小场景可见范围，根据自己场景的调整相机的【near/far】，我这个0.1/10是模型本来就长度不到3，这个根据自己条件调整。object是一个数组，可以先声明一个数组，把要做反射的物体添加到数组里，然后在SSRPass的selects里添加。处理方式和上一个问题雷同，把camera的near【近切面】设置大一点即可，根据自身场景调整，不多赘述。
2023-04-04 14:56:54
1610
6
原创 threejs指南针【控制中心计算角度】
提示：明确指南针的公式效果：实现思路：传统的计算相机到控制中心的夹角来控制2D的图片进行旋转，达到指南针的效果。场景中添加指南针，一般在场景中添加指南针，并不是一直以场景中心（0，0，0）为中心点。用户很大程度上会拖动场景，或场景中添加的有相机漫游之类的操作，不可能一直依靠相机坐标去计算角度。根据 反正切三角函数 atan2(x,y),结合三维场景y轴向上，忽略y轴。所以 atan2(x,z) 只需要x的坐标和z的坐标。求得相机相对于控制中心的相对坐标。只需要将（相机坐标 - 控制中心坐标）套
2022-06-02 17:15:54
1833
原创 threejs物体上下浮动
文章目录效果图添加物体渲染应用效果图添加物体以精灵材质为例如果场景中的物体较多不好管理，可添加分组（Group），然后将物体添加进分组中// 地铁口浮标var subent8s = [ { "img":"./static/models/img/k.png", "name":"1s", "x":0, "y":10, "z":10 }, { "img":"./static/models/img/k.png", "name":"2s", "x":10,
2022-01-24 12:35:33
1615
5
原创 threejs选中效果
文章目录效果图引入库添加效果合成器渲染应用效果图如图所示，选中的黄色线框效果引入库import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'import { ShaderPass } from 'three/examples/jsm/pos
2022-01-23 17:29:35
4233
原创 threejs边缘暗角shader
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档边缘暗角以及锯齿处理效果引入库shader窗口监测里添加添加效果合成器处理模型边缘锯齿渲染后续效果引入库import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'import
2022-01-23 16:40:27
1238
4
原创 threejs扫光shader
特效：扫光shader效果shader材质添加把材质给到需要添加的模型render渲染添加后续效果shadervar Shader = { uniform: { u_color: { value: new THREE.Color("#5588aa") }, u_tcolor: { value: new THREE.Color("#ff9800") }, u_r: { value: 0.25 }, u_length: { value: 20
2022-01-23 16:10:50
2603
1
原创 WEB端三维可视化（threejs）03
前言上一篇主要写了如何创建一个场景，本篇写一下模型加载方面的细节。目前threejs支持的模型格式有很多，gltf/glb、obj+mtl、fbx、dea等等…主要推荐的模型格式：obj+mtl 或者 gltf/glb。原因：obj+mtl这种格式将模型信息、材质信息、贴图拆分开，相比较于其他来说，文件分散，分散后文件体积小，唯一的缺点是，文件套多了，注意命名，小心弄乱。gltf呢，被称为模型界的JPEG，它可以在原有的基础上有损压缩（这部分放在后边），压缩后体积更小。个人做了一下比较：同一个
2021-12-28 17:58:50
4051
1
原创 WEB端三维可视化（threejs）01
WEB端三维可视化（初识）threejs01前言一、初识二、nodejs三、引入threejs库前言记录一下学习笔记一、初识一年前从网上爬了个web端的三维demo，从此接触到了一个新的方向——webgl。第一次尝试自己写三维用的webgl，各种顶点信息、坐标定位，烦不胜烦。后续又各种搜索引擎，cesiumjs、 babylonjs、unity、threejs等等，比较下来就选择了three。说一下原因：cesiumjs：注重地形，支持模型文件格式只有gltf。babylonjs：比较针对游
2021-12-17 14:43:34
5727
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人