hongsir的博客

这次课将学习如何将HTML集成到场景中去——即一个交互式的HTML元素跟随场景中的3D位置而变化，看起来就像嵌在WebGL中一般。

添加一个简单的条状加载器，在加载资源时进行填充。

Three.js代码性能优化提示点

学习记录Three.js后期处理

修改three.js内置材质

我们一样可以对粒子使用着色器。在前面学习粒子的时候介绍过，出于性能原因，为几何体的每个顶点都设置动画不是一个有效解决方案。而这便是能让GPU直接通过顶点着色器为顶点设置动画而发挥作用之处。我们将从一个粒子星系开始，在顶点着色器中设置粒子的动画，使得星系旋转且根据距离中心距离的不同而速度不一样。跟之前学习“创建星系”的时候一样的设置，只不过没有设置动画，因为我们要在着色器中去设置动画效果。如果查看控制台，会看到两条警告，告诉我们着色器材质不支持尺寸大小和尺寸衰减，因此要我们自己去添加这些特性，所以现

介绍现在我们知道了如何使用着色器并绘制一些图案，那么这次就要用它来创建一个汹涌的海洋。我们将使用调试面板来设置波浪的动画并保持对各项参数的控制。初始场景现在，我们只有一个使用MeshBasicMaterial的平面，该几何体具有128x128的细分。我们将为顶点设置动画以获得波浪效果，为此我们需要非常多顶点。128x128可能不够多，但如果需要，我们将增加该值。基础现在将材质替换为着色器材质ShaderMaterialconst waterMaterial = new THREE.Shade

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

什么是着色器？实际上着色器是WebGL的主要组件之一。如果我们在没接触Three.js情况下开始学习WebGL，着色器将是我们首先且必须要学的知识，这也是为什么原生WebGL很难入门。着色器是一种使用GLSL(OpenGL Shading Language)编写并在GPU上运行的程序。它们被用于定位几何体的每个顶点，并为该几何体的每个可见像素着色。使用“像素Pixel”来描述其实并不准确，因为渲染的每个点不一定与屏幕上的每个像素相匹配，因此我们更倾向于使用术语“片元fragment”。之后我们会向着色

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

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

介绍Three.js允许我们创建许多基本几何图形，但是当涉及到更复杂的形状时，我们最好使用专业的3D软件。这次课将使用已经制作完成的模型，后面将会学习在3D软件中创建自己的模型。

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

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

本次我们将创建一个星系并且能够使用GUI面板来调整各项属性参数基本粒子创建generateGalaxy函数/** * Galaxy */const generateGalaxy = ()=>{}generateGalaxy()创建parameters对象对象里面将存放所有关于星系的参数，后面这些参数将被加到GUI面板中const parameters = {}// 粒子总数parameters.count = 1000// 粒子大小parameters.size =

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

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

阴影一直是实时三维渲染的挑战，开发人员必须在合理的情况下找到显示真实阴影的技巧。Three.js 有一个内置的解决方案，虽然其并不完美，但用起来很方便。阴影是怎么工作的？当你进行一次渲染时，Three.js将对每个支持阴影的光线进行渲染，那些渲染会像摄像机那样模拟光线所看到的内容，而在这些灯光渲染下，网格材质将被深度网格材质MeshDepthMaterial所替代。灯光渲染将像纹理一样被存储起来，称为阴影贴图，之后它们会被用于每个支持接收阴影的材质并投射到几何体上。...

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

什么是纹理Texture简单来说，纹理就是覆盖几何体表面的图像。不同的纹理类型具有不同的效果。纹理加载器TextureLoader// 初始化一个纹理加载器，然后用.load()加载纹理贴图const textureLoader = new THREE.TextureLoader()const colorTexture = textureLoader.load('/textures/door/color.jpg')// 之后使用纹理来创建材质const material = new THREE

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 }// gui.hide() //隐藏GUI面板，可通过按两次 H键开启显示.

效果首先引入必要组件import './build/three.js';import './libs/js/controls/OrbitControls.js'import { FontLoader } from './libs/jsm/loaders/FontLoader.js';import { TextGeometry } from './libs/jsm/geometries/TextGeometry.js';然后不可少的初始化场景、渲染器、相机、控制器 var renderer,

首先确认渲染器有无开启阴影贴图，默认是false// 创建渲染器var renderer = new THREE.WebGLRenderer()// 设置渲染物体阴影renderer.shadowMap.enabled = true然后确认物体材质是否可受光照影响// 创建地面几何体const planeGeometry = new THREE.PlaneGeometry(60,20) // 创建地面材质const planeMaterial = new THREE.MeshLam