Question

是否可以在three.js中用单个color属性绘制一条线，这类似于x3d的indexedLineSet而不是为每个顶点定义颜色？

let material = new THREE.LineBasicMaterial( {
    color: 0xff0000,
    vertexColors: THREE.VertexColors
} );

Answer 1

您可以使用LineSegments和相应的几何对象来实现。没有线条材料选项可以替代这种颜色定义。

var geometry = new THREE.BufferGeometry();

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

// geometry data for three line segments with different colors

vertices.push( 0, 0, 0 );
vertices.push( 1, 0, 0 );

vertices.push( 1, 0, 0 );
vertices.push( 1, 1, 0 );

vertices.push( 1, 1, 0 );
vertices.push( 0, 1, 0 );

colors.push( 1, 0, 0 );
colors.push( 1, 0, 0 );

colors.push( 0, 1, 0 );
colors.push( 0, 1, 0 );

colors.push( 0, 0, 1 );
colors.push( 0, 0, 1 );

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

var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );

var lines = new THREE.LineSegments( geometry, material );
scene.add( lines );

https://jsfiddle.net/fLgvcka7/

three.js R109

js。

1 个答案: