- 博客(91)
- 收藏
- 关注
RSS订阅原创 学习SVG（十）滤镜
在SVG中除了绘图外，还可以添加文本。需要使用 元素在画布中创建文本，使用元素进行多行文本创建，使用 让文本在指定的路径上排列。
2022-07-21 20:38:42
1671
1
原创 学习SVG（九）裁剪和蒙版
在SVG中除了绘图外，还可以添加文本。需要使用 元素在画布中创建文本，使用元素进行多行文本创建，使用 让文本在指定的路径上排列。
2022-07-21 20:38:10
2676
原创 学习SVG（八）文本
在SVG中除了绘图外，还可以添加文本。需要使用 元素在画布中创建文本，使用元素进行多行文本创建，使用 让文本在指定的路径上排列。
2022-07-21 20:37:32
4696
原创 学习SVG（五）坐标系统变换
SVG中自带transform属性，控制图形的坐标变换。它与css3中的transform是有区别的，css3中变换是以元素的中心点变换，SVG中中的transform是相对于画布的左上角计算的。本节简单的介绍SVG中的坐标系统变换。实际SVG应用中，可能是多个变换参杂在一起，所以我们需要先明白简单的变换，才能去做好复杂变换的开发。......
2022-07-21 20:35:08
857
原创 学习SVG（三）基本形状
linestroke[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-en40GY9q-1658406780173)(https)]
2022-07-21 20:33:19
264
原创 学习SVG（二）坐标系统
SVG是用于绘图的，那么它和其他绘图技术一样都是有网格坐标系统。以左上角为坐标系的原点(0,0)。X轴的正方向向右，Y轴的正方向向下。坐标轴以像数为单位。
2022-07-21 20:32:43
1201
原创 学习SVG（一）入门指南
这里只是简单的介绍了一下什么是SVG，通过本节能知道SVG和画布一样都是用来绘制图形的。SVG的优势在与我们能直接获取每一个节点元素，然后使用JS和CSS操作。在实现动画效果时也更加的轻松。...
2022-07-21 20:32:00
706
原创 Three.js - 使用着色器材质绘制立方体（三十）
简介着色器材质可以自定义几何体面的颜色。进一步学习后就会知道，three.js就是对GLSL语言进行了多方面的封装，下面我们就使用着色器语言来绘制一个正方体。开始绘制绘制一个有着色器材质的几何体<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>学习</title> </head> <body
2022-04-28 15:26:39
1090
原创 Three.js - 实现地图边界炫光路径效果（二十九）
简介本节主要使用多个粒子在地图边界，根据时间在不同的位置发光，实现一条发光的线在边界上移动。实现思路获取地图边界GeoJSON数据。根据数据创建地图线框，在每个数据点上创建全透明粒子。通过requestAnimationFrame()函数，修改不同位置粒子的透明度。实现基础模版<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <titl
2022-04-28 15:25:51
2776
原创 Three.js - 着色器材质使用变量（二十八）
简介上一节我们了解了着色器材质，这节我们了解如何使用着色器。着色器变量着色器中有三种变量：Uniforms 全局变量。可以传入顶点着色器，也可以传入片元着色器，在整个渲染过程中保持不变的变量。Varyings 是从顶点着色器传递到片元着色器的变量。我们需要确保在两个着色器中变量的类型和命名完全一致。Attributes 与每个顶点关联的变量。例如，顶点位置，法线和顶点颜色都是存储在attributes中的数据。它只能在顶点着色器获取。绘制一个只有4/1变色的圆基础模板<!
2022-04-27 14:06:39
671
原创 Three.js - 着色器材质（二十七）
简介我们知道three.js是对webGL的封装，不需要我们操作复杂的着色器。有时候需求要我们实现一些十分丰富的图像，比如线条的流光动效等。这时候只使用three.js会很麻烦，就出现了着色器材质来自定义着色器。ShaderMaterial 着色器材质使用自定义着色器渲染的材质。着色器材质是一个用GLSL编写的小程序 ，在GPU上运行。需要知道GLSL是着色器使用的语言，它和JavaScript使用方式完全不同，主要目的是为栅格化图形提供常用的计算功能。常用属性和方法：.uniforms
2022-04-27 14:06:05
716
原创 Three.js - 物体碰撞检测（二十六）
简介碰撞检测在three.js开发中是很常见的。最常见的两种方式实现：使用.Raycaste()在物体的各个顶点发出射线，计算是否和其他物体相交。使用.Box3在物体上创建包围盒，计算两个物体包围盒是否相交。本节介绍第一种碰撞检测法。Raycasterorigin — 光线投射的原点向量。direction — 射线的方向向量，应该归一化。near — 所有返回的结果应该比 near 远。near不能为负，默认值为0。far — 所有返回的结果应该比 far 近。far 不能小
2022-04-27 14:05:27
7692
3
原创 Three.js - 通过键盘控制模型移动和攻击（二十五）
简介上节加载了模型和模型动画，本节使用键盘控制模型移动和连贯动画实现攻击动作。实现基础模板上节讲述加载了模型，并实现了动画。本节在上节的基础上进行修改。修改灯光并添加阴影开启阴影渲染。 // 开启阴影 renderer.shadowMap.enabled = true添加方向光，开启阴影投射。 let dLight = null { const light = new THREE.DirectionalLight(0xaaaaaa) light.p
2022-04-27 14:04:52
3570
3
原创 Three.js - AnimationMixer 动画混合器（二十四）
简介在three.js中动画也是很重要的一环。在使用软件创建模型时，一般都会创建模型的骨骼动画用于在开发中使用。下面我们加载.fbx格式的文件模型（它除了包含几何、材质信息，可以存储骨骼动画等数据）来实现动画。AnimationMixer动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。参数：rootObject 混合器播放的动画所属的对象。就是包含动画模型的场景对象。常用参数和属性：.time 全局的混合器时间。.clipA
2022-04-27 14:03:12
3035
原创 Three.js - 绘制一个有房子的场景（二十三）
简介本节主要使用几何体和贴图来绘制一个房子，通过模型导入来加载一个冰墩墩在门口。开始绘制基础代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>学习</title> </head> <body> <canvas id="c2d" class="c2d" width="1
2022-04-27 14:02:37
1585
1
原创 Three.js - 可视化地图下钻功能（二十二）
简介地图下钻听起来是很厉害的技术，当你明白后会发现，实现它非常的简单。实现思路获取GeoJSON格式的全国数据，绘制中国地图场景。监听点击事件，判断下钻的省市。获取所点击省份GeoJSON格式的数据，绘制省份地图场景。切换场景展示省份地图。绘制中国地图前面的章节已经绘制过了，这里只需要进行一些小改动。之前的公用方法中projection()函数是全局方法，当地图下钻后中心点是要修改的，所以使用参数的方式传入。给drawExtrudeMesh()方法生成的立体几何添加，唯一标识.pr
2022-04-27 14:01:59
2765
2
原创 Three.js - 在地图上绘制飞线（二十一）
简介在可视化开发中飞线图应该是很常见的一种。为了灵活的使用three.js，本节我们在3D地图上绘制一个简单的飞线图。绘制在上一节已经绘制好了一个中国地图，我们直接在此基础上开发。起始点添加动画在飞线图的起始点都会有醒目的标识。这里实现一个扩散光圈效果。起始点会有很多，我们要创建一个公用方法。先在起始点坐标，绘制一个平面圆和一个平面圆环。在渲染函数中对平面圆环放大和透明。 // 圆环网格对象组 const circleYs = [] /** * 目标位置 * *
2022-04-27 14:01:14
4990
2
原创 Three.js - 绘制中国地图
获取GeoJSON数据GeoJSON是一种对各种地理数据结构进行编码的格式。本质就是一个JSON对象。{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [125.6, 10.1] }, "properties": { "name": "Dinagat Islands" }}主要关心geometry对象的值，geometry.type几何数据类型(一共有7种)，geo
2022-04-27 14:00:37
5732
原创 Three.js - 绘制不规则图形（二十）
Shape 形状通过路径来绘制二维形状平面。简单理解就是在一个平面上用不规则的线连接成一个图形。想在three.js中展示需要使用ExtrudeGeometry，ShapeGeometry来生成几何体。它有一个.holes属性，用于在形状平面中挖洞。.holes值是一个THREE.Path()数组，定义了二维路径。常用绘图函数moveTo(x, y) 将绘图点移动到指定的 x、y 坐标处。lineTo(x, y) 从当前位置创建一条到 x、y 坐标的线。quadricCurveTo(cp
2022-04-27 13:59:52
3800
原创 Three.js - 鼠标拾取（射线追踪法）（十九）
射线追踪法射线追踪法是最常见的方法，因为three.js提供了Raycaster对象来实现它。原理：从鼠标处发射一条射线，穿透场景的视椎体，通过计算，找出与射线相交的对象。Raycaster属性：origin 光线投射的原点。direction 射线的方向。near 投射近点，不能大于far，不能为负值，其默认值为0。far 投射远点，不能小于near，其默认值为无穷大。常用方法：.setFromCamera(coords,camera) 更新原点坐标和相机视椎。co
2022-04-26 10:23:37
2278
原创 Three.js - 添加天空盒（十八）
天空盒在3D场景中，为了增强场景表现力，我们通常会为场景添加天空盒。就是在整个场景的上方绘制天空这一类图片。最简单的做法是，制作一个很大的立方体为6个面添加纹理，这里要注意我们渲染的是内部。纹理是特殊处理了的能组合成一个整体。当然还有其他的方式比如创建球体或半圆的穹顶等。创建基础代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <ti
2022-04-26 10:22:44
1732
1
原创 Three.js - 加载 .GLTF 格式模型（十七）
简介在上一课中我们了解了.OBJ文件，.OBJ文件格式是很久以前使用的。它只有几何体顶点相关数据，所以它加载的内容都是在一个网格里面的。这样使得我们操作模型比较困难，为了方便就出现很多其它格式的3D模型文件。本节我们主要了解.GLTF 格式。.gltf用于显示图形的格式。也是各种3D编辑器之间的传输格式。.gltf格式本质上是一个JSON文件。它能描述一整个3D场景，比如一个模型使用多少个网格，网格的旋转、位移等信息。使用与加载.OBJ文件一样都需要先创建，基础代码。<!DOCT
2022-04-26 10:20:35
1784
原创 Three.js - 加载 .OBJ 格式模型（十六）
.objobj文件是3D模型文件格式。它包含的信息都是几何体顶点相关数据，不包含动画、材质特性、粒子等信息。使用第一步当然是找UI设计要文件了，这里没有UI就自己到网上下载了一个文件。创建基础代码，这里使用方向光和半球光让模型更立体。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>学习</title>
2022-04-26 10:20:02
7140
原创 Three.js - WebGLRenderTarget 把场景当做纹理渲染（十五）
WebGLRenderTargetWebGLRenderTarget 是一个渲染器。用于在缓存中为场景绘制像素。简单理解就是在缓存创建一张图片，我们可以把这张图片当成纹理在几何体上使用。使用基础代码环境，展示一个几何体。 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>学习</title> <
2022-04-26 10:19:16
1415
原创 Three.js - 雾（十四）
雾雾通常是基于离摄像机的距离褪色至某种特定颜色的方式。在three.js中有两种设置雾的对象：.Fog() 定义了线性雾。简单来说就是雾的密度是随着距离线性增大的。.FogExp2() 定义了指数雾。在相机附近提供清晰的视野，且距离相机越远，雾的浓度随着指数增长越快。基础模版<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title
2022-04-26 10:18:33
968
原创 Three.js - 阴影（十三）
阴影three.js中使用的是阴影贴图，阴影贴图的工作方式就是具有投射阴影的光能对所有能被投射阴影的物体从光源渲染阴影。注意事项：每多一个能投射阴影光源，就会重复绘制一次场景。阴影的计算是一个光源一个光源的依次计算的。要展示阴影需要，渲染器开启阴影渲染、灯光投开启投射阴影、物体开启接收阴影只有DirectionalLight、PointLight、RectAreaLight、SpotLight这4种光源才能投谁阴影。MeshLambertMaterial材质是不能接受投射阴影的。展示阴
2022-04-26 10:16:44
2310
原创 Three.js - 实现一辆坦克沿路径行驶（十二）
简介本节主要讲解，通过几何体组合成一个坦克形状的物体。让这个物体按照我们规定的线路移动，并且保持头部向前。添加多个相机，根据相机切换展示不同场景。搭建基础引入组件，实例化渲染器。 // 官网地址 import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js' import { OrbitControls }
2022-04-26 10:16:10
2169
原创 Three.js - 模拟太阳、地球、月亮的运动（十一）
简介本节我们简单的模拟地球绕着太阳转，月球绕着地球转。从月球的角度看，它是在地球的 "局部空间 "中绕着地球转，地球和月球合成一组是在全局空间绕着太阳转。基础场景<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>学习</title> </head> <body> <canv
2022-04-26 10:14:58
2565
原创 OpenLayers - 加载静态图片（十二）
简介本文讲解，如何使用OpenLayers在载静态图片上添加标记，预览图片。主要使用ol.source.ImageStatic用于显示单个静态图像的图层源。使用OpenLayers的好处有，地图的放大、缩小等view视图功能都可以使用，根据地理坐标绘制标注也能很好的使用，对于演示而言，无疑加快了开发效率。开始使用初始化地图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /
2022-04-26 10:14:38
3903
3
原创 Three.js - 场景(Scene)（十）
右手坐标系在three.js中使用的是右手坐标系，原因是webGL默认的就是这种坐标系。简单理解就是，x轴正方向向右，y轴正方向向上，z轴正方向由屏幕从里向外。在场景中所有的物体在容器的位置都是依靠这个坐标系设置的。场景正如之前说的，它就相当于一个大容器，我们需要展示的所有物体都要放入场景。它又被称为场景图，因为它是一个树形结构数据。能放入场景中的对象都继承了Object3D对象，所以每一个子节点都有自己的局部空间。简单理解就是场景中有一个空间可以添加组、Object3D、网格等物体
2022-04-25 10:44:11
2277
原创 Three.js - 光源（九）
光源为了模拟物体在不同情况下的样式，three.js中提供了多种光源。需要注意光源和材质是相互的，简单来说物体表面的颜色是光源和材质的乘积。在材质中的基础材质是不受灯光影响的。创建基本场景 import * as THREE from 'https://threejs.org/build/three.module.js' import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources
2022-04-25 10:42:53
1896
原创 Three.js - 网格（八）
网格表示基于以三角形组合成的几何体的类。three.js中几何体是不能直接渲染的。在three.js有一种类型物体，这种类型放入场景中才能直接渲染图形。网格（Mesh）是这种类型中的一种。创建使用构造参数new THREE.Mesh( geometry, material )geometry 几何体实例。material 一个材质(material)或多个材质(material)，多个材质对应几何体的各个面。 // 立体几何 const boxWidth =
2022-04-25 10:42:06
1337
原创 Three.js - 纹理(Texture)（七）
纹理简单理解纹理就是一张图片，它是由像素点组成。在three.js一般都是使用在材质上，和配置颜色一样。颜色是材质表面所有的像素都是同一个颜色，纹理是根据配置信息在材质表面显示纹理（贴图）不同位置的像素点。创建纹理 // 立体几何 const boxWidth = 4 const boxHeight = 4 const boxDepth = 4 const geometry = new THREE.BoxGeometry(boxWidth
2022-04-25 10:41:15
2181
原创 Three.js - 材质（六）
材质（Material）材质简单理解就是设置几何体各个面的颜色。但它不是单纯的颜色，它能模拟在不同光照下颜色的表现。比如太阳光照射光滑的物体，表面会出现白色的反光，都能模拟。材质和渲染器无关，在开发中定义一份材质就可以重复使用。定义材质的常用的方式有两种:在实例化时传入要配置的参数。 const material = new THREE.MeshPhongMaterial({ color: 0xFF0000, // 也可以使用CSS的颜色字符串 });通
2022-04-25 10:40:38
889
原创 Three.js - 几何体（五）
几何体在three.js中如球体、立方体、平面、狗、猫、人、树、建筑等物体，都是几何体。它们都是根据大量顶点参数生成。在three.js中内置了许多基本几何体，也提供了自定义几何体的方法。在开发中常见的做法是让美术在 3D 建模软件中创建 3D 模型，在由开发人员进行交互开发。常见几何体BoxGeometry 盒子分段数简单理解，就是每多一个分段，在对应面的轴上添加两个顶点，增加组成这个面三角形的数量。分段数越多面就越精细，性能消耗也会变大。 const width = 8 /
2022-04-25 10:39:29
1648
原创 Three.js - 图形界面工具（lil-gui）（四）
lil-gui为了能够快速地搭建three.js的交互UI，社区就出现了各种UI 库，其中lil-gui 是 three.js社区中非常流行的 UI 库。选择它是因为语法简单，上手快。主要作用，获取一个对象和该对象上的属性名，并根据属性的类型自动生成一个界面组件来操作该属性。使用它后，我们可以通过界面组件来控制场景中的物体，提高调试效率。开始使用本节使用的代码是在上一节的基础上修改。lil-gui常用的方法：.add() 将控制器添加到GUI，使用typeof运算符推断控制器类型。
2022-04-25 10:38:49
5264
1
原创 Three.js - 透视相机（PerspectiveCamera）（三）
简介在three.js中，摄像机的作用就是不断的拍摄我们创建好的场景，然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景，就需要修改摄像机的位置来拍摄场景。本文详细介绍的是透视相机（PerspectiveCamera） 它是用来模拟人眼所看到的景象，它也是3D场景的渲染中使用得最普遍的投影模式。透视相机(PerspectiveCamera)根据视锥的范围给渲染器提供需要渲染的场景范围。实例化new THREE.PerspectiveCamera() 接受4个参数来确认视锥的范围。只要在视锥范围内
2022-04-25 10:38:02
12687
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人