我是程序猿

注册

 

发新话题 回复该主题

ThreeJs 认识核心类 [复制链接]

1#
银光图片
一、前言ThreeJs 中定义了一些核心类,在实际的项目开发过程中,除了要常握场景、相机以及灯光等相关类的用法,还要掌握核心类的用法。
二、认识核心类1.Object3D



图片描述



Object3D 是 ThreeJs 中对物体抽象的基类,包括相机和灯光都是 Object3D 的子类。一般情况下,我们不会直接使用这个类,对于构造物体,一般我们都是使用的 Mesh。
2.BufferGeometry



图片描述

  1. var geometry = new THREE.BufferGeometry();
  2. // 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
  3. // 因为在两个三角面片里,这两个顶点都需要被用到。
  4. var vertices = new Float32Array( [
  5.     -1.0, -1.0,  1.0,
  6.      1.0, -1.0,  1.0,
  7.      1.0,  1.0,  1.0,

  8.      1.0,  1.0,  1.0,
  9.     -1.0,  1.0,  1.0,
  10.     -1.0, -1.0,  1.0
  11. ] );

  12. // itemSize = 3 因为每个顶点都是一个三元组。
  13. geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
  14. var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
  15. var mesh = new THREE.Mesh( geometry, material );
复制代码
3.BufferAttribute



图片描述



BufferAttribute 简单来说就是给 BufferGeometry 设置属性的。
4.Geometry



图片描述



5.Layers



图片描述



6.Raycaster




图片描述

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

  3. function onMouseMove( event ) {

  4.     // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)

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

  7. }

  8. function render() {

  9.     // 通过摄像机和鼠标位置更新射线
  10.     raycaster.setFromCamera( mouse, camera );

  11.     // 计算物体和射线的焦点
  12.     var intersects = raycaster.intersectObjects( scene.children );

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

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

  15.     }

  16.     renderer.render( scene, camera );

  17. }

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

  19. window.requestAnimationFrame(render);
复制代码
三、总结上面只列出了项目中比较常用的类,还有一些没有列出来。掌握了上面的核心类,在一般的项目开发中已经能满足需求了。



作者:仰简
链接:https://www.jianshu.com/p/389a9d0651be
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
分享 转发
TOP
发新话题 回复该主题