时间戳

首页 > 解决方案 > 如何用三个 JS 让直线或曲线发光？

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

问题描述

我正在寻找一种使线条发光的方法，从而产生如下效果：

在此处输入图像描述

这是我正在做的创建我的行：

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;
}

标签： three.js

解决方案

Three.js 不会仅仅通过材质来赋予材质“发光”效果。您需要的是一种称为“bloom”的后处理效果，可以在第一次渲染后添加。请参阅此示例：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;

推荐阅读