- 博客(128)
- 收藏
- 关注
RSS订阅原创 2.一个标准html标签的含义
文章目录前言一、DOCTYPE二、lang三、charset总结前言本节要掌握的几个概念DOCTYPElangcharset一、DOCTYPE文档类型声明标签，告诉浏览器采用哪个html版本来展示网页<!DOCTYPE html>上述标签含义表示使用最新的html5版本来展示网页二、lang<html lang="en">表示网页的语言种类，这对浏览器和搜索引擎有用处。三、charset<meta charset="UTF-8">
2021-04-01 09:53:57
164
原创 1.web标准的构成
主要包括（结构structure）丶表现（presentation）和行为（behavior）。结构主要是由html构成表现主要由css来展现行为主要由JavaScript来定义网页元素的交互。web标准提出，组成网页的结构、样式和行为是互相分离的。...
2021-03-31 21:46:26
172
原创 客户端存储
文章目录前言一、什么是会话？二、cookie特点三、sessionStorage特点四、localstorage特点前言本节要掌握的几个核心概念会话cookiesessionstoragelocalstorage一、什么是会话？所谓的会话过程就是指从打开浏览器到关闭浏览器的过程二、cookieCookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂
2021-03-25 17:07:11
179
原创 Array.reduce()方法的使用
https://blog.csdn.net/q1325545052/article/details/78851786
2021-03-19 14:46:35
99
原创 call()和apply()方法
文章目录一、这两个方法的作用是什么？二、apply()三、call()四、call和apply的真正意图五、bind()一、这两个方法的作用是什么？这两个方法都会以指定的 this 值来调用函数，即会设置调用函数时函数体内 this 对象的值。二、apply()apply() 方法接收两个参数：函数内 this 的值和一个参数数组。第二个参数可以是 Array 的实例，但也可以是 arguments 对象。示例：传入arguments 对象( function testApplyArg
2021-03-19 09:45:13
106
原创 对element ui中的分页组件进行二次封装
文章目录一、子组件怎么向父组件传值二、封装分页组件总结本节要掌握的几个概念sync一、子组件怎么向父组件传值通过$emit向父组件派发一个事件并传递参数 handleSizeChange(val = this.limit) { this.$emit("update",val); },父组件中只需要接受这个事件并处理就行了v-on:update = "pagesize = $event"也可以写成这样
2021-03-15 17:18:32
318
1
转载 19.为什么不建议使用index作为key
react使用的diff算法每次都会拿新的虚拟dom去跟旧的虚拟dom对比，发现哪里有变化，就生成真实的dom，而不会渲染整个页面。详情请看下边这篇文章。https://blog.csdn.net/z591102/article/details/106682298
2021-03-12 15:11:47
128
原创 promise
文章目录一、同步操作二、异步操作三、处理异步操作的返回值四、处理异步操作的失败值五、嵌套异步回调五、promise总结本节要掌握的几个概念同步操作异步操作一、同步操作同步行为对应内存中顺序执行的处理器指令。每条指令都会严格按照它们出现的顺序来执行，而每条指令执行后也能立即获得存储在系统本地（如寄存器或系统内存）的信息。这样的执行流程容易分析程序在执行到代码任意位置时的状态（比如变量的值）。同步是阻塞的，就是你做了这件事情，没做完就做不了别的事情了。二、异步操作js中常见的异步操作有：
2021-03-10 16:04:09
108
原创 1.flex布局
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、两个核心概念flex container和flex item二、flex布局三、flex-container相关属性1.flex-direction2.justify-content3.align-items4.flex-wrap5.align-content用于设置多行flex items在交叉轴上的对齐方式总结前言本节要掌握的基本概念flex containerflex itemList itemList
2021-03-05 15:58:51
746
3
原创 28.使用法向贴图创建更精细的凹凸和皱纹
通过设置normalMap属性设置为一个法向纹理，还可以指定凹凸的程度，方法是设置normalScale属性。<!DOCTYPE html><html><head> <title>Example 10.03 - Normal maps</title> <script type="text/javascript" src="../libs/three.js"></script> <.
2021-01-15 14:03:28
185
原创 27.使用bumpMap创建凹凸效果
<!DOCTYPE html><html><head> <title>Example 10.02 - Bump maps</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js"><
2021-01-15 13:29:07
225
原创 26.轨道控件
<!DOCTYPE html><html><head> <title>Example 09.08 - Orbit controls</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js">
2021-01-14 15:18:28
85
原创 25.第一人称控件
<!DOCTYPE html><html><head> <title>Example 09.07 - first person camera </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/OBJLoad
2021-01-14 15:12:54
100
原创 24.翻滚控件
<!DOCTYPE html><html><head> <title>Example 09.06 - Roll controls </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/OBJLoader.js"
2021-01-14 15:01:37
101
原创 23.飞行控件
<!DOCTYPE html><html><head> <title>Example 09.05 - Fly controls </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/OBJLoader.js"&
2021-01-14 14:58:57
166
原创 22.轨迹球控件
<!DOCTYPE html><html><head> <title>Example 09.04 - Trackball controls </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/OBJLoade
2021-01-14 14:55:28
136
原创 21.使用Tween.js做动画
<!DOCTYPE html><html><head> <title>Example 09.03 - Animation tween </title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/PLYLoader.j
2021-01-14 13:53:10
219
原创 11.props的简写方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title> <style> .title { background-color: orange; width: 200px; } </style&g
2021-01-13 17:41:13
364
原创 20.选择对象
这节探讨的是如何使用鼠标在场景中选择一个对象。<!DOCTYPE html><html><head> <title>Example 09.02 - Selecting objects</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript
2021-01-13 17:30:38
116
原创 19.使用纹理格式化粒子
在前面的例子中，我们看了如何使用HTML5的画布来格式化一个粒子系统。因为你可以画任何你想画的，甚至是加载外部的图片。但是还有一种更加直接的、使用图片格式化粒子的方法。在three.js中可以使用THREE.ImageUtils.loadTexture（）方法加载外部的图片。 下例是模拟雨滴的案例：<!DOCTYPE html><html><head> <title>Example 07.06 - Particles - Rainy s.
2021-01-12 15:54:05
89
原创 18.使用h5画布格式化粒子
Three.js提供了两种使用html5画布格式化粒子的方法。下面将会分别介绍。在CanvasRenderer中使用HTML5画布通过THREE.SpriteCanvasMaterial（），该材质是专门为CanvasRenderer创建的，而且只能用于这种渲染器。该材质可以设置的属性如下：下面是一个示例<!DOCTYPE html><html><head> <title>Example 07.04 - Particles - Can
2021-01-12 15:12:15
93
原创 17.粒子实现雪花效果
使用粒子可以很容易地创建出很多细小的物体，可以用来模拟雨滴和雪花。下表是粒子对象中所有可设置属性的说明：使用Three.PointCloudMaterial来管理大量的粒子，产生雪花效果。示例如下<!DOCTYPE html><html><head> <title>Example 07.03 - Particle Basic Material</title> <script type="text/javascrip
2021-01-12 14:53:46
356
原创 16.基于深度着色的MeshDepthMaterial
使用这种材质的物体，其外观不是由光照或某个材质属性决定的，而是由物体到相机的距离决定的。可以将这种材质与其他材质相结合，从而很容易地创建出逐渐消失的效果。
2021-01-11 13:29:51
195
原创 15.MeshBasicMaterial
是一种非常简单的材质，这种材质不考虑光照的影响。使用这种材质的网格会被渲染成一些简单的平面多边形，而且你也有机会显示几何体的线框。除了之前提到的那些公有属性之外，还可以设置下面这些属性：下面是一个示例<!DOCTYPE html><html><head> <title>Example 04.01 - MeshBasicMaterial</title> <script type="text/javascript"
2021-01-11 11:15:33
690
原创 13.镜头眩光
当你直接朝着太阳拍照时就会出现镜头炫光。大多数情况下需要避免这种情形，但是对于游戏和三维图片来说，它提供了一种很好的效果，让场景看上去更加真实。下图是镜头眩光的一些参数：下例是一个示例<!DOCTYPE html><html><head> <title>Example 03.07 - Lensflarest</title> <script type="text/javascript" src="../libs/t
2021-01-11 10:35:39
315
原创 12.平面光光源
使用平面光光源，可以定义一个发光的矩形。下面是一个示例：<!DOCTYPE html><html><head> <title>Example 03.06 - Area Light</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript"
2021-01-11 10:29:21
623
原创 11.半球光光源
使用这种光源可以创建出更加贴近自然的光照效果。如果不使用这种光源，要模拟室外光照，可以添加一个方向光光源来模拟太阳，或者再添加一个环境光光源，为场景提供基础色。但是这样看上去不怎么自然。当你在室外的时候，并不是所有的光照都来自上方，很多是来自空气的散射、地面的反射，以及其他物体的反射。Three.js库中的HemisphereLight（半球光光源）就是为这种情形创建的。它提供了一种简单的方法，用以获取比较自然的光照效果。下面是一个示例：<!DOCTYPE html><html&g
2021-01-11 10:26:09
426
原创 10.DirectionalLight（方向光）—— 模拟远处类似太阳的光源
方向光光源和我们之前看过的聚光灯光源之间主要的差别是：方向光不像聚焦光那样离目标越远越暗淡。被方向光光源照亮的整个区域接收到的光强是一样的。
2021-01-11 10:06:24
1044
原创 9.SpotLight(聚光灯光源)-具有锥形效果的光源
SpotLight(聚光灯光源)大概会是你最常用到的光源。SpotLight光源有一种锥形效果。你可以对比一下手电筒或灯笼。以下是聚光灯光源的一些属性。以下是一个聚光灯光源的例子<!DOCTYPE html><html><head> <title>Example 03.03 - Spot Light</title> <script type="text/javascript" src="../libs/three
2021-01-11 09:39:18
1173
原创 8.PointLight（点光源）-照射所有方向的光源
Three.js库中的PointLight是一种单点发光，照射所有方向的光源。夜空中的照明弹就是一个很好地点光源例子。下例可以试验一下点光源。<!DOCTYPE html><html><head> <title>Example 03.02 - point Light</title> <script type="text/javascript" src="../libs/three.js"></script
2021-01-11 09:21:41
1135
原创 7.AmbientLight（环境光）-影响整个场景的光源
AmbientLight光源的颜色会影响整个场景。而且AmbientLight的光线没有特定的来源，而且这个光源也不会影响阴影的生成。不能将AmbientLight作为场景中的唯一光源。在使用其他光源（例如Spotlight和DirectionalLight）的同时使用AmbientLight，目的是弱化阴影或添加一些颜色。如下例所示，可以使用一个简单的用户界面来修改添加到场景中的环境光。<!DOCTYPE html><html><head> <t
2021-01-11 09:13:10
2391
原创 6.相机
透视相机距离相机越远的物体，会被渲染得越小正投影相机使用正投影相机的话，所有的物体渲染出来的尺寸都一样，对象和相机之间的距离不会影响渲染结果。THREE.PerspectiveCamera（）接收以下参数。fov视角：当视角越大时，中间的物体就会越小。aspect一般跟屏幕的长宽比是一致的，如果这个值过大，那么物体会被渲染得很宽，可以自己实验一下。near设置一个很小的值，如果很大，物体会看不全far设置一个较大的值，如果很小，那么物体会看不全，如果很大，那么又会影响渲染的效率，就
2021-01-10 11:42:23
133
原创 4.几何对象的属性和函数
什么是geometry变量：举例来说，一个方块：一个方块有八个角。每个角都可以定义为x,y,z坐标的一个组合。所以每个方块都是三维空间中的8个点。在three.js库中，这些点称为顶点。一个方块有6个侧面，每个角有一个顶点。在three.js库中，每个侧面称为面，当你使用three.js库提供的这些几何体时，你不必亲自定义这些顶点和面。对于一个方块来讲，你只要定义长宽高即可。three.js库会利用这些信息，在正确的位置创建一个拥有八个顶点的几何体，并用正确的面连接起来。尽管你可以使用thre
2021-01-09 15:28:39
124
1
原创 3.使用材质覆盖属性
当使用这个属性的时候，那么所有添加到场景中的物体都会使用同样的材质。scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
2021-01-09 14:26:19
191
原创 2.在场景中添加雾化效果
通过fog属性可以为整个场景添加一种雾化效果。一个物体离得越远，就越模糊。three.js库里打开雾化效果很简单。只需要在定义完场景后加上如下一行代码即可：scene.fog = new THREE.Fog(0xffffff, 0.015, 100);其中0xffffff表示了雾化的颜色，0.015表示的是near属性的值，100表示的远处属性的值，通过这两个属性可以决定雾从什么地方开始，以及浓度加深的程度。...
2021-01-09 14:21:06
289
原创 1.场景
跟场景相关的函数：Scene.add() : 在场景中添加物体。Scene.remove():从场景中移除物体。Scene.children():获取场景中所有子对象的列表。Scene.getChildByName():利用name属性，从场景中获取某个指定的物体。Scene.traverse()：我们可以将一个函数传递给traverse()函数，这个传递过来的函数将会在场景的每一个子对象上调用一次。<!DOCTYPE html><!-- 场景 --><html
2021-01-09 14:11:55
97
原创 8.绘制图元
我们建立了上下文，设置了视口，顶点数组、矩阵和着色器也已经设置并初始化完成。我们定义了一个函数draw(),在这个函数中将接管WebGL上下文和我们之前建立的矩阵形象。首先，函数会清理一下画布并用黑色作为背景颜色。然后将顶点数组绑定到上下文中，使用着色器，并把顶点数组和矩阵作为输入传递给着色器。最后我们调用了WebGL的drawArrays()方法来绘制正方形。我们简单地告诉它，图元的类型和图元中有多少顶点，webgl会自动根据我们在上下文中设置的其他值（顶点、矩阵、着色器）完成绘制。 fu
2021-01-08 10:12:54
205
1
原创 7.着色器
着色器定义了如何将3D物体的像素切实地绘制在屏幕上。WebGL要求开发者为每个需要绘制的物体提供着色器。一个着色器可以同时应用于多个物体。所以在实际情况下，我们经常只提供一个着色器来满足整个应用程序，然后每次用不同的参数多次复用这个着色器。 var vertexShaderSource = " attribute vec3 vertexPos;\n" + " uniform mat4 modelViewMatrix;\n" +
2021-01-08 09:57:48
78
原创 6.矩阵
在绘制正方形之前，我们需要两个矩阵。第一个矩阵用来定义正方形在3D坐标系中相对于相机的位置。这个矩阵称为模型视图矩阵，因为它综合了模型的变换和相机之间的关系。在示例中，我们对模型的变换就是将正方形沿着负z轴进行平移（即远离相机-3.333个单位）。我们需要的第二个矩阵就是投影矩阵，这个矩阵将被用于在着色器中将相机空间中模型的3D坐标转换为绘制的视口的2D坐标。 //设置模型视图矩阵和投影矩阵 var projectionMatrix, modelViewMatrix;
2021-01-08 09:21:54
100
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人