threejs

threejs

创建场景

加载模型FBX到场景中
使用FBXLoader加载FBX模型到场景之中
FBX 加载DEMO

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'const loader = new FBXLoader();loader.load('./model.fbx', function (object) {scene.add(object);});

通过加载BFX就得到了一个场景

效果

调色

先通过材质给地板之类的进行调色，使场景更加的好看协调

lor.setStyle('#040912')

添加包围线条

// object 为要添加效果的object
// 添加包围的geometry
// 重点
const geometry = new THREE.ry);// 获取物体的世界坐标 旋转等
const worldPosition = new THREE.Vector3();
WorldPosition(worldPosition);// this.effectGroup.add();
const material = new THREE.LineBasicMaterial( {color: 0x4C8BF5,linewidth: 1,linecap: 'round', //ignored by WebGLRendererlinejoin:  'round' //ignored by WebGLRenderer
} );const line = new THREE.LineSegments(geometry, material);line.name = 'surroundLine';py(object.scale);
ation);
py(worldPosition);scene.add(line);

效果：

建筑上下渐变

用当前的高度值来获取当前所处于整个mesh的高度插值
获得插值
用插值计算出混淆的颜色

float indexMix = vPosition.z / (uSize.z * 0.6);
outgoingLight= mix(outgoingLight, uTopColor, indexMix);

扩散波

使用中心点计算出当前一个扩散的一个范围，当前的范围值内通过sin计算出渐变的效果

    vec2 position2D = vec2(vPosition.x, vPosition.y);if (uDiffusion.x > 0.5) {// 扩散速度float dTime = mod(time * uDiffusion.z, uRadius * 2.0);// 当前的离中心点距离float uLen = distanceTo(position2D, vec2(uCenter.x, uCenter.z));// 扩散范围if (uLen < dTime && uLen > dTime - uDiffusion.y) {// 颜色渐变float dIndex = sin((dTime - uLen) / uDiffusion.y * PI);distColor = mix(uColor, distColor, 1.0 - dIndex);}}

扫描效果

代码文件 /effect/radar.js

最终效果

目前效果： 物体渐变、包围线条、扩散波、流动效果、飞线，扫光、线条扫光、光墙
持续会添加： 线条物体切换效果，道路跑光等。
需要什么效果可以在下方留言，持续添加效果中
github：代码地址
喜欢的请点一个star 或者给一个赞

此代码教程只有对应的github有，其他的均为假冒。 目前有一个叫 老陈打码的博主，直接剽窃工程开始卖课程（已有不少被剽窃）