1.问题引入考虑一个兼容浏览器事件添加的代码段 123456789function addEvent(ele, eventName, handler){ if(ele.addEventListener){ ele.addEventListener(eventName, handler) }else if(ele.attachEvent)

1.准备工作创建一个星系工厂函数 1234567/*Galaxy generate */const generateGalxy = () => { console.log("generate the galaxy")} 创建一个 parameter 对象，将会包含星系所有的参数 123const parameter = {}

1.创建粒子创建粒子就像创建一个 Mesh ，需要有 geometry(BufferGeometry)、material(PointsMaterial) 和 Points 实例(而不是一个 Mesh 实例) 我们先创建一个 sphereBufferGeometry 和 PointsMaterial， geometry的每个坐标都会变成一个粒子 12345678const particlesGeom

在本节中，我们要造一个鬼屋。用Three.js的基本几何体。并以米作为基本单位 我们先建造基本场景：一个地板、一个球体、一些灯光、不必有阴影、一个Dat.GUI面板。点击下载初始包 然后我们把球体移除 1.创建房子 建立房子我们先创建一个Group12const house = new THREE.Group()scene.add(house) 2. 然后创建墙123456const w

在添加光源后我们就可以看到物体上的明暗变化了，这个阴影实际叫做 core shadows，但是我们还没有投射到其他物体上的 drop shadow，本章将讲解如何获得 drop shadows 光线追踪实际是个很耗费资源的计算，开发者需要用一些小技巧来增强视觉体验 Three.js 中实现阴影是在每一次渲染的时候会假设每一个光源上有个“相机”来计算哪个地方应该会有阴影，最后作为阴影texture贴

增加与上个文章相同的场景 然后删除 AmbientLight 和 PointLight，当你移除灯光后会发现场景 **一片漆黑**，是因为 **MeshStandarMaterial** 需要灯光才能看见物体 1.AmbientLightAmbientLight 应用了 Omni-directional lighting 效果，照来的灯光，所有面光照效果相同。没有阴影明暗灰度灯光反射变化

1.decorator简介 要启用对装饰器的实验性支持，您必须在命令行或 tsconfig.json 中启用 experimentalDecorators 编译器选项 typescript的decorator一共有五种可被我们使用: Class Decorators Method Decorators Accessor Decorators(访问器装饰器) Property Decorator

在这本节中，我们将实现 ilithya的3D文本特效。如下图所示 1.字体加载我们首先使用 TextBufferGeometry 在场景中创建一个3D文本。要设定字体需要使用typeface将字体转换为指定格式。或者使用 Three.js 提供的字体。 1import typefaceFont from 'three/example/fonts/helvetiker_regula

1.什么是 MaterialsMaterials用来给几何体上每个可见的像素染色。这种染色算法在程序里叫做 Shaders. 我们不需要自己手写 Shaders 可以使用内置的 materials 2.使用 Materials2.1 创建场景我们创建三种不同的几何体(spehre, plane, torus)来练习Materials的使用 12345678910111213141516171819

1.什么是材质?材质就是覆盖在几何体上的图片，并且也能有不同的视觉效果（例如反射），不仅仅是贴图 2.材质种类2.1 alpha alpha 材质是一个灰度图，白色的地方代表可见，黑色则代表不可见，如下图 2.2 HEIGHT HEIGHT 材质也是一个灰度图，代表高度。 一个像素点的灰度会提高或降低平面的高度。 需要提供细分信息（subdivision）如下图 2.3 NORMAL