Giả sử bạn muốn vẽ một đường thẳng hoặc một hình tròn, không phải là #mesh . Đầu tiên, chúng ta cần thiết lập trình Sence , render và Camera bạn có thể tham khảo thêm ở bài 3
Đây là mã mà chúng ta sẽ sử dụng:
Đầu tiên tạo Render, có size bằng size của window và tạo 1 camera PerspectiveCamera
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );
const scene = new THREE.Scene();
Điều tiếp theo chúng ta sẽ làm là xác định một vật liệu.
Đối với các đường, chúng ta phải sử dụng LineBasicMaterial hoặc LineDashedMaterial .
//tạo ra một LineBasicMaterial màu xanh lam
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
Sau vật liệu, chúng ta sẽ cần tạo hình với một số đỉnh:
const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
Lưu ý rằng các đường được vẽ giữa mỗi cặp đỉnh liên tiếp, nhưng không được vẽ giữa đỉnh đầu tiên và cuối cùng (đường thẳng không bị đóng.)
Bây giờ chúng ta đã có các điểm cho hai đường thẳng và một vật liệu, chúng ta có thể ghép chúng lại với nhau để tạo thành một đường thẳng.
const line = new THREE.Line( geometry, material );
Tất cả những gì còn lại là thêm nó vào sence và render
scene.add( line );
renderer.render( scene, camera );
Chạy thử