ThreeJs 認識核心類

1、前言

ThreeJs 中定義了一些核心類，在實際的項目開發過程當中，除了要常握場景、相機以及燈光等相關類的用法，還要掌握核心類的用法。

2、認識核心類

1.Object3D

Object3D 是 ThreeJs 中對物體抽象的基類，包括相機和燈光都是 Object3D 的子類。通常狀況下，咱們不會直接使用這個類，對於構造物體，通常咱們都是使用的 Mesh。

2.BufferGeometry

var geometry = new THREE.BufferGeometry();
// 建立一個簡單的矩形. 在這裏咱們左上和右下頂點被複制了兩次。
// 由於在兩個三角面片裏，這兩個頂點都須要被用到。
var vertices = new Float32Array( [
	-1.0, -1.0,  1.0,
	 1.0, -1.0,  1.0,
	 1.0,  1.0,  1.0,

	 1.0,  1.0,  1.0,
	-1.0,  1.0,  1.0,
	-1.0, -1.0,  1.0
] );

// itemSize = 3 由於每一個頂點都是一個三元組。
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh( geometry, material );
複製代碼

3.BufferAttribute

BufferAttribute 簡單來講就是給 BufferGeometry 設置屬性的。

4.Geometry

5.Layers

6.Raycaster

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove( event ) {

	// 將鼠標位置歸一化爲設備座標。x 和 y 方向的取值範圍是 (-1 to +1)

	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

function render() {

	// 經過攝像機和鼠標位置更新射線
	raycaster.setFromCamera( mouse, camera );

	// 計算物體和射線的焦點
	var intersects = raycaster.intersectObjects( scene.children );

	for ( var i = 0; i < intersects.length; i++ ) {

		intersects[ i ].object.material.color.set( 0xff0000 );

	}

	renderer.render( scene, camera );

}

window.addEventListener( 'mousemove', onMouseMove, false );

window.requestAnimationFrame(render);
複製代碼

3、總結

上面只列出了項目中比較經常使用的類，還有一些沒有列出來。掌握了上面的核心類，在通常的項目開發中已經能知足需求了。