如何創(chuàng)建線條
var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));
var line = new THREE.Line(geometry, material);
scene.add(line);
同一根線會包含多個點的連接, 同樣創(chuàng)建線條也需要紋理和結(jié)構(gòu)的配置
如何創(chuàng)建動態(tài)變化的線呢?
什么是動態(tài)變化的線: 線的長短, 線的點位置, 線的顏色
- 如何改變點的位置
- 如何改變線的長短(定點數(shù))
- 如何改變線的顏色
做到這一點, 需要用到BufferGeometry, 用于緩存3d數(shù)據(jù)
- 創(chuàng)建線條
//設(shè)置線條最長緩存大小, 也就是線包括200個空間的點
var MAX_POINTS = 200;
//緩存線的結(jié)構(gòu)
var geometry = new THREE.BufferGeometry();
//創(chuàng)建線的點數(shù)
var positions = new Float32Array( MAX_POINTS * 3 );
//加載數(shù)組到結(jié)構(gòu)中 (因為一個3d空間的點由三個浮點數(shù)構(gòu)成, 所以需要對數(shù)組進行標(biāo)明
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
//設(shè)置渲染大小, 因為最基本的線需要兩個空間的點來描述, 所以少于兩個點情況下無法描述這個線條, 注意不能超過
geometry.setDrawRange( 0, 2 );
//設(shè)置材質(zhì)
var material = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 2 } );
//創(chuàng)建線條
line = new THREE.Line( geometry, material );
scene.add( line );
updatePositions();
- 修改線條點屬性
function updatePositions() {
//獲取點數(shù)組
var positions = line.geometry.attributes.position.array;
//設(shè)置臨變量
var x = y = z = index = 0;
for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {
//改變
positions[ index ++ ] = x;
positions[ index ++ ] = y;
positions[ index ++ ] = z;
//貌似是js的功能, 讓變量能跟隨變化
x += ( Math.random() - 0.5 ) * 30;
y += ( Math.random() - 0.5 ) * 30;
z += ( Math.random() - 0.5 ) * 30;
}
}
讓線條漸漸顯示出來
- 更新動畫
function animate() {
//持續(xù)更新動畫
requestAnimationFrame( animate );
//設(shè)置顯示的線段長度變化
drawCount = ( drawCount + 1 ) % MAX_POINTS;
line.geometry.setDrawRange( 0, drawCount );
if ( drawCount === 0 ) {
//更新位置點
updatePositions();
line.geometry.attributes.position.needsUpdate = true;
//更新線條顏色
line.material.color.setHSL( Math.random(), 1, 0.5 );
}
//別忘了進行渲染 renderer.render( scene, camera );
render();
}
