如何使用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不能仅通过材料就使材料具有“发光”效果。您需要的是一种称为“ bloom”的后处理效果，可以在第一次渲染通过后添加它。请参见以下示例：https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom

该示例实质上执行以下操作：

1. 设置效果作曲家。
2. 渲染正常场景
3. 获取第一次渲染的结果，并为其添加“ bloom”效果
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;