threejs Lineのグラデーション

Question

material = new THREE.LineBasicMaterial({
  color: 0xdddddd
  linewidth: 1 
});
var line = new THREE.Line( geometry,material );
scene.add( line );

上記だと単色のLineが生成されますが、
グラデーションを行いたい場合どのように書けばよいでしょうか？

Answer 1

SkeletonHelper でやっていますね。

https://github.com/mrdoob/three.js/blob/master/src/helpers/SkeletonHelper.js

            var geometry = new THREE.BufferGeometry();

            var vertices = [];
            var colors = [];

            var color1 = new THREE.Color( 0, 1, 0 );
            var color2 = new THREE.Color( 1, 0, 0 );

            vertices.push( 10, 0, 0 );  //線の始点の頂点
            vertices.push( -10, 0, 0 );  //線の終点の頂点
            colors.push( color1.r, color1.g, color1.b );
            colors.push( color2.r, color2.g, color2.b );

            geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
            geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

            var material = new THREE.LineBasicMaterial( { linewidth: 1 , vertexColors: THREE.VertexColors, depthTest: false, depthWrite: false, transparent: true } );

            var line = new THREE.Line( geometry,material );
            scene.add( line );

上記未検証ですが、こんな感じかと。

Comments

[cheche0830]

ありがとうございました！！！