threejs-15:particles 1.创建粒子创建粒子就像创建一个 Mesh ,需要有 geometry(BufferGeometry)、material(PointsMaterial) 和 Points 实例(而不是一个 Mesh 实例) 我们先创建一个 sphereGeometry 和 PointsMaterial, geometry的每个坐标都会变成一个粒子 12345678const particlesGeometry = 2023-03-30 #three.js #web #javascript
three.js-14-Haunted-House 在本节中,我们要造一个鬼屋。用Three.js的基本几何体。并以米作为基本单位 我们先建造基本场景:一个地板、一个球体、一些灯光、不必有阴影、一个Dat.GUI面板。点击下载初始包 然后我们把球体移除 1.创建房子 建立房子我们先创建一个Group 12const house = new THREE.Group()scene.add(house) 2. 然后创建墙123456const 2023-03-04 #three.js #web #javascript
three.js-13:Shadow 在添加光源后我们就可以看到物体上的明暗变化了,这个阴影实际叫做 core shadows,但是我们还没有投射到其他物体上的 drop shadow,本章将讲解如何获得 drop shadows 光线追踪实际是个很耗费资源的计算,开发者需要用一些小技巧来增强视觉体验 Three.js 中实现阴影是在每一次渲染的时候会假设每一个光源上有个“相机”来计算哪个地方应该会有阴影,最后作为阴影texture贴 2023-03-02 #three.js #web #javascript
12threejs:light 增加与上个文章相同的场景 然后删除 AmbientLight 和 PointLight,当你移除灯光后会发现场景 **一片漆黑**,是因为 **MeshStandardMaterial** 需要灯光才能看见物体 1.AmbientLightAmbientLight 应用了 Omni-directional lighting 效果,照来的灯光,所有面光照效果相同。没有阴影明暗灰度灯光反射变化 2023-03-01 #three.js #web #javascript
使用decorator优雅管理electron-Ipc池 使用decorator优雅管理electron-Ipc池在这篇文章中,我们将系统地介绍 TypeScript 中装饰器的基础与实践,重点聚焦于类装饰器(Class Decorators)和方法装饰器(Method Decorators)的使用;然后深入剖析在 Electron 应用中开展 IPC(进程间通信)的两种典型模式——单向通信和双向通信;接着结合装饰器模式,展示如何用装饰器管理 IPC 回 2023-02-25 #typescript #electron #ipc通信 #decorator
three.js-11:3D-Text 在这本节中,我们将实现 ilithya的3D文本特效。如下图所示 1.字体加载我们首先使用 TextGeometry 在场景中创建一个3D文本。要设定字体需要使用typeface将字体转换为指定格式。或者使用 Three.js 提供的字体。 注:在较新版本的 Three.js 中,FontLoader 和 TextGeometry 已被移出核心库,需要从 addons 路径独立导入: 2023-02-24 #three.js #web #javascript
three.js_10-Materials 1.什么是 MaterialsMaterials用来给几何体上每个可见的像素染色。这种染色算法在程序里叫做 Shaders. 我们不需要自己手写 Shaders 可以使用内置的 materials 2.使用 Materials2.1 创建场景我们创建三种不同的几何体(spehre, plane, torus)来练习Materials的使用 12345678910111213141516171819 2023-02-20 #three.js #web #javascript
three.js_9-texture 1.什么是纹理?纹理(Texture)就是覆盖在几何体上的图片,用于给几何体表面增添色彩和细节,不仅仅是简单的贴图,它还包含很多控制渲染表现的参数。而材质(Material)则是用于决定如何将这些纹理与光照等进行计算并呈现在屏幕上的着色算法。 2.纹理贴图种类2.1 Alpha 贴图 Alpha 贴图是一个灰度图,白色的地方代表可见,黑色则代表不可见,如下图 2.2 高度贴图 (HEIG 2023-02-19 #three.js #web #javascript
CSS - Box Model CSS 显示的所有内容都是一个’盒子’,所以了解 CSS 盒模型工作原理是 学习CSS 的基本功 假如你写了这段 HTML 1<p> 这是一段简短的文字 </p> 然后添加了一段 CSS 样式 123456p { width: 100px; height: 50px; padding: 20px; border: 1px solid; 2021-11-03 #CSS
JavaScript函数传参时的值传递与引用传递 ECMAScript中的所有参数传递的都是值,不可能通过引用传递参数 一开始对这句话没有什么概念,只是简单的当成与其它语言差不多的“Feature”。但后来在实际开发中踩了个大坑才对这个问题深究。 先来看一段简单的代码 123456function changeColor(color){ color = "blue"}var Mycolor = & 2020-05-19 网站建设 #javascript