ThreeJs 认识核心类

一、前言

ThreeJs 中定义了一些核心类，在实际的项目开发过程中，除了要常握场景、相机以及灯光等相关类的用法，还要掌握核心类的用法。

二、认识核心类

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);

三、总结

上面只列出了项目中比较常用的类，还有一些没有列出来。掌握了上面的核心类，在一般的项目开发中已经能满足需求了。