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就得到了一个场景

效果

调色

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

material.color.setStyle('#040912')

添加包围线条

// object 为要添加效果的object
// 添加包围的geometry
// 重点
const geometry = new THREE.EdgesGeometry(object.geometry);

// 获取物体的世界坐标 旋转等
const worldPosition = new THREE.Vector3();
object.getWorldPosition(worldPosition);

// this.effectGroup.add();
const material = new THREE.LineBasicMaterial( {
	color: 0x4C8BF5,
	linewidth: 1,
	linecap: 'round', //ignored by WebGLRenderer
	linejoin:  'round' //ignored by WebGLRenderer
} );

const line = new THREE.LineSegments(geometry, material);

line.name = 'surroundLine';

line.scale.copy(object.scale);
line.rotation.copy(object.rotation);
line.position.copy(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有，其他的均为假冒。 目前有一个叫 老陈打码的博主，直接剽窃工程开始卖课程（已有不少被剽窃）