学会threejs鼠标交互Raycaster拾取物体

对场景内的模型增加事件监听,实现鼠标交互,须要用到Raycaster(光线投射)类。拾取物体的原理webGL中获取鼠标交互物体的原理:通过三维空间中相机视点与鼠标在屏幕上的地位的连线,造成一条直线,捕捉与此直线相交的空间中的物体,即为交互对象物体。在three中,Raycaster为咱们封装了大量的逻辑代码,包含生成相机到鼠标的射线、射线与空间物体的碰撞检测、射线相交物体深度计算、相交物体列表等等

- 阅读全文 -

JavaScript脏检查

什么是脏检查?脏检查的全名是 脏数据检查。是AngularJS命名的。脏数据也就是产生了变化的数据。脏检查因一个原因而被称为脏。它定时检查而不是直接监听属性变化。我们把这个检查称为摘要周期(digest)。angularJS监测对象变化不是像vue.js那样通过Object.defineproperty这种接口,而是在某些情况下制定策略,通过复制保存一份数据,进行快照对比,来监测变化。脏检查这个东

- 阅读全文 -

js 位掩码

定义掩码const mask0 = parseInt("00000001", 2); const mask1 = parseInt("00000010", 2); const mask2 = parseInt("00000100", 2); const mask3 = parseInt("00001000", 2);

- 阅读全文 -

模型对象旋转平移缩放变换

点模型Points、线模型Line、网格网格模型Mesh等模型对象的基类都是Object3D,如果想对这些模型进行旋转、缩放、平移等操作,如何实现,可以查询Threejs文档Object3D对相关属性和方法的介绍。缩放网格模型Mesh的属性.scale表示模型对象的缩放比例,默认值是THREE.Vector3(1.0,1.0,1.0),.scale的属性值是一个三维向量对象Vector3,查看th

- 阅读全文 -

ThreeJs常用材质介绍

为了方便开发Threejs提供了一系列的材质,所有材质就是对WebGL着色器代码的封装,如果你不了解WebGL,会通过查阅Threejs文档使用相关材质类即可。点材质PointsMaterial点材质比较简单,只有PointsMaterial,通常使用点模型的时候会使用点材质PointsMaterial。点材质PointsMaterial的.size属性可以每个顶点渲染的方形区域尺寸像素大小。va

- 阅读全文 -