修改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

这次我们将学习如何用3D软件创建自己的模型选择软件有很多软件如Cinema 4D、Maya、3DS Max、Blender、ZBrush、Marmoset Toolbag、Substance Painter等都很不错。当然它们在用户体验、性能、功能、兼容性、价格等方面也有所不同。这次我们选择Blender，因为它是免费的，性能卓越同时适用于所有主要的操作系统，还有一个广泛的社区。下载Blender

初始场景只有一个测试白球和gui面板设置把球体材质改为标准网格材质MeshStandardMaterial，再添加平行光const directionalLight = new THREE.DirectionalLight('#ffffff',1)directionalLight.position.set(0.25,3,-2.25)scene.add(directionalLight)gui.ad