three.js - 如何用Three JS让直线或者曲线发光？

Question

我正在寻找一种使线条发光的方法，创建如下效果:

这是我创建线路的方法:

createLine() {
    // Create a curve with the points
    var curve = new THREE.CatmullRomCurve3(this.points);

    // Get the points
    var curvePoints = curve.getPoints(this.pointCount);

    // Create the geometry
    var curveGeometry = new THREE.BufferGeometry().setFromPoints(curvePoints);

    // Create the material
    var curveMaterial = new THREE.LineBasicMaterial({
        color : 0x00AAFF,
    });

    // Create the line
    var line = new THREE.Line(curveGeometry, curveMaterial);

    return line;
}

Answer 1

Three.js 不会仅通过 Material 赋予 Material “发光”效果。您需要的是一个名为“bloom”的后处理效果，它可以在第一个渲染 channel 之后添加。请参阅此示例:https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom

该示例基本上执行以下操作:

1. 设置效果编辑器。
2. 渲染正常场景
3. 获取第一次渲染的结果，并为其添加“绽放”效果
4. 将结果渲染到屏幕

在该示例的源代码中，神奇之处发生在第 104 - 115 行，为了清楚起见，在这里对其进行了注释:

// Set up an effect composer
composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );

// Tell composer that first pass is rendering scene to buffer
var renderScene = new THREE.RenderPass( scene, camera );
composer.addPass( renderScene );

// Tell composer that second pass is adding bloom effect
var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
composer.addPass( bloomPass );

// Tells composer that second pass gets rendered to screen
bloomPass.renderToScreen = true;