介绍通常在创建着色器时，我们需要绘制特定如星星、圆圈、光透镜、波等图案。初始设置像上篇笔记中的一样，场景中有个使用ShaderMaterial着色器材质的PlaneBufferGeometry平面缓冲几何体const geometry = new THREE.PlaneBufferGeometry(1, 1, 32, 32)// Materialconst material = new THREE

光线投射(RayCaster)可以向特定方向投射光线，并测试哪些对象与其相交。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。用法示例：测试相机前方是否有一堵墙（障碍）光线是否击中目标当鼠标移动时测试是否有物体位于光标下方，以此模拟鼠标事件当物体朝向特定某处时提示信息初始场景三个球体，然后我们要发射一条光线穿过这些球体看其是否与之相交const object1 = new THR

修改three.js内置材质

学习记录Three.js后期处理

我们可以利用数学函数和一些解决方案来实现自己的物理效果，但是如果需求更加真实的物理效果，像是物体张力、摩擦力、拉伸、反弹等真实物理效果，最好使用外部库原理我们会创建一个Three.js世界和一个Physics物理世界，虽然我们看不见后者但它是真实存在的，每当我们往Three.js世界添加对象时，相应的物理世界也会添加相同对象。物理世界在每一帧更新时都会相应更新到Three.js世界中。例如物理世界

初始场景一个平面，一个球体用来测试环境光和月光，测得光源正常后移除球体创建房屋组别因为我们房屋可能包含许多东西像是门、屋顶之类的，所以需要创建一个房屋组，将所有属于屋子的物体给添加到这个组里面，之后当我们需要移动整个屋子时，变可以把房屋组当作一个整体去进行位置移动，而不用单个单个的去移动物体位置。// 创建一个house组const house = new THREE.Group()scene.a

粒子可以被用来创建星星、烟雾、雨滴、灰尘、火焰等等。我们可以使用合理的帧速率来创建数千个粒子。每个粒子都是由始终面向摄影机的平面（俩个三角形）组成的。创建粒子创建粒子和创建网格很像，不同的是粒子使用的材质是点材质PointsMaterial和点实例Points。下面代码为例，当实例化球缓冲几何体时，该几何体的每个顶点都将成为粒子。/*** 粒子*/const particlesGeometry =

环境光AmbientLight 环境光会均匀的照亮场景中的所有物体。 const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) // 等价于下面 const ambientLight = new THREE.AmbientLight() ambientLight.color = new THREE.Color(0xffffff) // 光

什么是材质Material材质用于在几何体的每个可见像素上添加颜色创建材质初始化基础网格材质MeshBasicMaterialconst material = new THREE.MeshBasicMaterial()接下来我们往场景中添加三个网格物体//球形缓冲几何体const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(0.5,

Dat.gui 是一个 GUI 组件，他可以为你的 demo 提供参数的设置官方github安装与引入npm install --save dat.guiimport * as dat from 'dat.gui'实例化对象// 实例化可视化GUI工具可以通过按 H 键隐藏GUI面板const gui = new dat.GUI() //可传递参数{ closed:true ,width:400