学会threejs鼠标交互Raycaster拾取物体
对场景内的模型增加事件监听，实现鼠标交互，须要用到Raycaster（光线投射）类。拾取物体的原理webGL中获取鼠标交互物体的原理：通过三维空间中相机视点与鼠标在屏幕上的地位的连线，造成一条直线，捕捉与此直线相交的空间中的物体，即为交互对象物体。在three中，Raycaster为咱们封装了大量的逻辑代码，包含生成相机到鼠标的射线、射线与空间物体的碰撞检测、射线相交物体深度计算、相交物体列表等等
模型对象旋转平移缩放变换
点模型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
双击鼠标左键选中模型并显示信息
双击鼠标左键选中模型并显示信息。坐标系的概念首先，解释一下三种坐标系的概念：场景坐标系（世界坐标系）、屏幕坐标系、视点坐标系。场景坐标通过three.js构建出来的场景，都具有一个固定不变的坐标系（无论相机的位置在哪），并且放置的任何物体都要以这个坐标系来确定自己的位置，也就是（0,0,0）坐标。例如我们创建一个场景并添加箭头辅助。屏幕坐标在显示屏上的坐标就是屏幕坐标系。如下图所示，其中的clie
Vue/React页面引入three.js实现3d动画场景
页面引入three.js实现3d动画场景研究一些关于3D图形化库。three.js是JavaScript编写的WebGL第三方库。Three.js是一款运行在浏览器中的 3D 引擎，你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。所需依赖我们开始引入three.js相关插件。npm install three2.接下来利用npm安装轨道控件插件：npm install thre