可视化
文章平均质量分 75
viceen
这个作者很懒,什么都没留下…
展开
-
图形化开发(九)02-Three.js之案例——王者荣耀demo-index代码
图形化开发(九)02-Three.js之案例——王者荣耀demo-index代码效果index.html-用live server打开<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initia原创 2021-09-20 12:01:29 · 330 阅读 · 2 评论 -
图形化开发(九)01-Three.js之案例——王者荣耀demo制作
图形化开发(九)01-Three.js之案例——王者荣耀demo制作效果1. 场景搭建scene = new THREE.Scene();scene.background = new THREE.Color(0xa0a0a0);scene.fog = new THREE.Fog(0xa0a0a0, 1000, 11000);我们创建了场景,并设置了场景一个灰色的背景色。还设置了场景的雾化效果,这个雾的效果主要是针对于场景的相机的距离实现的,三个值分别是雾的颜色、雾的开始距离、完全雾化距离相机原创 2021-09-20 11:54:37 · 936 阅读 · 0 评论 -
图形化开发(八)-Three.js之总结——技术要点总结 & 性能优化建议
图形化开发(八)-Three.js之总结——技术要点总结 & 性能优化建议为什么?webgl不好用threejs非常简单,好学这个库很强大基本介绍特点功能丰富api简单速度快性能好扩展性好缺点文档不健全,学习资料少缺乏游戏相关支持bbabylon可以弥补兼容性除了IE , 都很好在线编辑器基本元素三要素: 场景, 相机,渲染器场景scene继承于THREE.Object3D注意: 网格 和 材质 不是继承于Obje原创 2021-09-20 11:03:45 · 709 阅读 · 0 评论 -
图形化开发(七)04-Three.js之动画——补间动画-以平滑的方式更改对象的位置
图形化开发(七)04-Three.js之动画——补间动画-以平滑的方式更改对象的位置补间动画补间(动画)(来自 in-between)是一个概念,允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改,当补间结束运行时它们应该具有哪些最终值,以及这需要多长时间,补间引擎将负责计算从起始点到结束点的值。在Three.js中,我们也有一些修改模型的位置,旋转和缩放的需求,我们无法直接在webgl中使用css3动画,所以,Tween给我们提供了一个很好的解决方案。我们先实现一个Three.js应用T原创 2021-09-20 10:47:22 · 1128 阅读 · 0 评论 -
图形化开发(七)03-Three.js之动画——区别-变形动画(精度要求高-人物表情) & 骨骼动画(精度要求低-人物走动)
图形化开发(七)03-Three.js之动画——区别-变形动画(精度要求高-人物表情) & 骨骼动画(精度要求低-人物走动)两种动画的区别变形动画主要用于精度要求高的动画,比如人物的面部表情。优点是动画表达会很到位,缺点就是扩展性不强,只能执行设置好的相关动画。骨骼动画主要用于那种精度要求低,而且需要丰富多样的动画,就比如人物的走动,攻击防御等动画,我们可以通过一套骨骼,修改相应骨骼的位置的信息直接实现相应的效果。确定是没有变形动画的精度高,但是可以实现多种多样的效果。总结:我们可以根据项目原创 2021-09-12 21:51:18 · 990 阅读 · 0 评论 -
图形化开发(七)02-Three.js之动画——骨骼动画
图形化开发(七)02-Three.js之动画——骨骼动画动画动画一般可以定义两种:一种是变形动画,另一种是骨骼动画。骨骼动画骨骼动画是需要生成一个与模型相关的骨架,骨架中的骨骼也会存在对应关系,模型的每一个需要动画的顶点需要设置影响它的骨骼以及骨骼影响顶点的程度。骨骼动画和变形动画相比会比较复杂一些,但是它又有更多的灵活性。我们可以想象一下人体的骨骼,如果使用变形动画,需要把所有的每一次的变动都存一个顶点数组,而骨骼动画,只需要设置骨骼的相关信息,就可以实现更多的动画。首先, 我们创建了一个圆原创 2021-09-12 21:29:36 · 2115 阅读 · 0 评论 -
图形化开发(七)01-Three.js之动画——变形动画
图形化开发(七)01-Three.js之动画——变形动画动画动画一般可以定义两种:一种是变形动画,另一种是骨骼动画。变形动画变形动画的实现就是通过修改当前模型的顶点位置来实现动画。就比如,一个动画需要变动十次才可以实现,那么我们就需要为当前模型的每一个顶点定义每一次所在的位置,Three.js通过每一次修改实现最后的一个动画的整个流程。定义模型var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); // 正方体var cubeMaterial原创 2021-09-12 21:07:46 · 1474 阅读 · 1 评论 -
图形化开发(六)03-Three.js之导入模型——glTF格式文件导入,3D模型的使用 & vs code之glTF Tools插件的使用方法
图形化开发(六)03-Three.js之导入模型——glTF格式文件导入,3D模型的使用 & vs code之glTF Tools插件的使用方法glTF格式文件导入glTF格式的3D格式文件是官方推荐的使用的格式,这种格式的文件我们可以在sketchfab官网下载,这是一个国外比较知名的模型网站。loader地址:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js下载地址:h原创 2021-09-12 17:59:57 · 7392 阅读 · 1 评论 -
图形化开发(六)02-Three.js之导入模型——3dmax-使用ObjectLoader加载JSON模型 & vs code之Live Server插件的使用方法
图形化开发(六)02-Three.js之导入模型——3dmax-使用ObjectLoader加载JSON模型 & vs code之Live Server插件的使用方法效果1-存在跨域问题效果2代码1、页面文件hello-world.html<!DOCTYPE html><html><head> <meta charset=utf-8> <title>我的第一个Three.js案例</title&原创 2021-09-12 17:04:59 · 1905 阅读 · 0 评论 -
图形化开发(六)01-Three.js之导入模型——3dmax和SketchUp-editor编辑器导出json文件,在创建模型initMesh中外部的JSON文件
图形化开发(六)01-Three.js之导入模型——3dmax和SketchUp-editor编辑器导出json文件,在创建模型initMesh中外部的JSON文件导入模型官方推荐我们使用的3D模型的格式为glTF,由于glTF专注于传输,因此它的传输和解析的速度都很快。glTF模型功能包括:网格,材质,纹理,蒙皮,骨骼,变形动画,骨骼动画,灯光以及相机。模型制作工具:3dmax网址——https://www.autodesk.com.cn/products/3ds-max/overview原创 2021-09-12 16:32:59 · 4525 阅读 · 1 评论 -
图形化开发(五)057-Three.js之Points 粒子——points 粒子-实例3-两种粒子效果对比-球体、星空
图形化开发(五)057-Three.js之Points 粒子——points 粒子-实例3-两种粒子效果对比-球体、星空效果代码point.html<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>粒子案例</title> <style type="text/css"> html, bo原创 2021-09-12 11:10:04 · 271 阅读 · 0 评论 -
图形化开发(五)056-Three.js之Points 粒子——points 粒子-实例2-星空
图形化开发(五)056-Three.js之Points 粒子——points 粒子-实例2-星空效果代码1、hello-world.html<!DOCTYPE html><html><head> <meta charset=utf-8> <title>我的第一个Three.js案例</title> <style> body { margin: 0原创 2021-09-12 11:03:37 · 213 阅读 · 0 评论 -
图形化开发(五)055-Three.js之Points 粒子——points 粒子-实例1-球体
图形化开发(五)055-Three.js之Points 粒子——points 粒子-实例1-球体效果代码1、hello-world.html<!DOCTYPE html><html><head> <meta charset=utf-8> <title>我的第一个Three.js案例</title> <style> body { margin: 0原创 2021-09-12 11:00:10 · 288 阅读 · 0 评论 -
图形化开发(五)054-Three.js之Points 粒子——points 粒子-球体、星空
图形化开发(五)054-Three.js之Points 粒子——points 粒子-球体、星空points 粒子粒子和精灵的效果是一样的,它们之间的区别就是如果当前场景内的精灵过多的话,就会出现性能问题。粒子的作用就是为解决很多精灵而出现的,我们可以使用粒子去模型数量很多的效果,比如下雨,下雪等,数量很多的时候就适合使用粒子来创建,相应的,提高性能的损失就是失去了对单个精灵的操作,所有的粒子的效果都是一样。总的来说,粒子就是提高性能减少的一些自由度,而精灵就是为了自由度而损失了一些性能。粒子THREE原创 2021-09-12 10:55:28 · 1663 阅读 · 0 评论 -
图形化开发(五)053-Three.js之Points 粒子——Sprite 精灵-实例2-三种精灵效果对比-普通精灵、图片导入的方式、canvas导入的方式
图形化开发(五)053-Three.js之Points 粒子——Sprite 精灵-实例2-三种精灵效果对比-普通精灵、图片导入的方式、canvas导入的方式效果代码sprint.html<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>精灵案例</title> <style type="text/css"&原创 2021-09-11 10:58:21 · 279 阅读 · 0 评论 -
图形化开发(五)052-Three.js之Points 粒子——Sprite 精灵-实例1-普通精灵
图形化开发(五)052-Three.js之Points 粒子——Sprite 精灵-实例1-普通精灵效果代码1、hello-world.html<!DOCTYPE html><html><head> <meta charset=utf-8> <title>我的第一个Three.js案例</title> <style> body { margin:原创 2021-09-11 10:46:57 · 387 阅读 · 0 评论 -
图形化开发(五)051-Three.js之Points 粒子——Sprite 精灵-一直正对着相机的特性
图形化开发(五)051-Three.js之Points 粒子——Sprite 精灵-一直正对着相机的特性Points 粒子这一节,我们将学习到Sprite精灵和Points粒子两项东西,这两种对象共同点就是我们通过相机查看它们时,始终看到的是它们的正面,它们总朝向相机。通过它们的这种特性,我们可以实现广告牌的效果,或实现更多的比如雨雪、烟雾等更加绚丽的特效。Sprite 精灵精灵由于一直正对着相机的特性,一般使用在模型的提示信息当中。通过THREE.Sprite创建生成,由于THREE.Sprite原创 2021-09-11 10:41:00 · 765 阅读 · 0 评论 -
图形化开发(五)043-Three.js之Camera相机——实例
图形化开发(五)043-Three.js之Camera相机——实例效果图目录init_control.js引入文件地址https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js1、index.html<!DOCTYPE html><html><head> <meta charset=utf-8> <title&原创 2021-09-11 01:19:07 · 195 阅读 · 0 评论 -
图形化开发(五)042-Three.js之Camera相机——正交相机和透视相机的对比
图形化开发(五)042-Three.js之Camera相机——正交相机和透视相机的对比效果图-正交相机和透视相机的对比camera.html<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>正交相机和透视相机的对比</title> <style type="text/css"> html,原创 2021-09-11 01:08:34 · 568 阅读 · 0 评论 -
图形化开发(五)041-Three.js之Camera相机——target焦点和lookAt()方法、OrthographicCamera正交相机、PerspectiveCamera透视相机、相机插件
图形化开发(五)041-Three.js之Camera相机——target 焦点属性和lookAt()方法、OrthographicCamera 正交相机、PerspectiveCamera 透视相机、相机插件-OrbitControlsCamera相机相机是Three.js抽象出来的一个对象,使用此对象,我们可以定义显示的内容,并且可以通过移动相机位置来显示不同的内容。 下面讲解一下Three.js中的相机的通用属性和常用的相机对象。我们常用的相机正交相机(OrthographicCamera)和透原创 2021-09-11 01:04:16 · 3434 阅读 · 1 评论 -
图形化开发(五)036-Three.js之光照——实例4-户外光
图形化开发(五)036-Three.js之光照——实例4-户外光实例4-户外光案例效果图hemisphereLight.html<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>户外光案例</title> <style type="text/css"> html, body {原创 2021-09-11 00:15:39 · 170 阅读 · 0 评论 -
图形化开发(五)035-Three.js之光照——实例3-聚光灯光源
图形化开发(五)035-Three.js之光照——实例3-聚光灯光源实例3-聚光灯光源案例效果图spotLight.html<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>聚光灯光源案例</title> <style type="text/css"> html, body {原创 2021-09-11 00:06:00 · 254 阅读 · 0 评论 -
图形化开发(五)034-Three.js之光照——实例2-点光源
图形化开发(五)034-Three.js之光照——实例2-点光源实例2-点光源案例效果图pointLight.html<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>点光源案例</title> <style type="text/css"> html, body {原创 2021-09-11 00:00:52 · 227 阅读 · 0 评论 -
图形化开发(五)033-Three.js之光照——实例1-平行光
图形化开发(五)033-Three.js之光照——实例1-平行光实例1-平行光案例效果图light.html<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>平行光案例</title> <style type="text/css"> html, body { ma原创 2021-09-10 23:56:34 · 388 阅读 · 0 评论 -
图形化开发(五)032-Three.js之光照——PointLight 点光源、SpotLight 聚光灯光源、实现聚光灯阴影、HemisphereLight室外光源
图形化开发(五)032-Three.js之光照——PointLight 点光源、SpotLight 聚光灯光源、实现聚光灯阴影、HemisphereLight室外光源PointLight 点光源点光源就是从一个点的位置向四面八方发射出去光,一个简单的例子就是一个裸露的灯泡。实现一个最普通的点光源很简单:var pointLight = new THREE.PointLight(0xff0000); //创建一个白色的点光源pointLight.position.set( 50, 50, 50 );原创 2021-09-10 23:44:04 · 1458 阅读 · 0 评论 -
图形化开发(五)031-Three.js之光照——创建光照、AmbientLight 环境全局光、DirectionalLight平行光-太阳光、添加阴影效果
图形化开发(五)031-Three.js之光照——创建光照、AmbientLight 环境全局光、DirectionalLight平行光-太阳光、添加阴影效果通过之前的内容,我们已经了解一个模型的创建整个过程。接下来,我们将学习如果实现在场景中添加光效和阴影效果。首先我们先介绍一下光照的创建:创建光照在上一节,因为案例需求,我们创建过一次光照效果,所有的光照效果也都是通过这种方式创建出来。var light = new THREE.DirectionalLight(0xffffff); //添加了一原创 2021-09-10 23:21:28 · 2319 阅读 · 0 评论 -
图形化开发(五)022-Three.js之材质——受光影响-MeshLambertMaterial 兰伯特材质 & MeshPhongMaterial 高光材质
图形化开发(五)032-Three.js之材质——受光影响-MeshLambertMaterial 兰伯特材质 & MeshPhongMaterial 高光材质添加光由于MeshBasicMaterial不会受光的影响,即使有光也不会影响它的效果,前面我们也没有添加光。但是后面介绍的材质会受到光源的影响,在介绍之前,我们需要添加一个光源,来影响材质的显示效果。//创建灯光function initLight() { var light = new THREE.Directiona原创 2021-09-10 00:26:23 · 1148 阅读 · 0 评论 -
图形化开发(五)021-Three.js之材质——不受光影响-MeshBasicMaterial-同颜色&MeshNormalMaterial-方向不同颜色&LineBasicMaterial线条材质
图形化开发(五)03-Three.js之材质——不受光影响-MeshBasicMaterial-整个物体颜色一样&MeshNormalMaterial-方向不同自动改变颜色 & LineBasicMaterial线条材质材质这一节我们讲解一下模型的表现,也就是我们看到的模型的外观——材质。简单的说就是物体看起来是什么质地。材质可以看成是材料和质感的结合。在渲染程式中,它是表面各可视属性的结合,这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。Three.j原创 2021-09-10 00:13:16 · 2200 阅读 · 0 评论 -
图形化开发(五)012-Three.js之Geometry几何体——圆柱、球、平面、圆环
图形化开发(五)02-Three.js之Geometry几何体——圆柱、球、平面、圆环圆柱创建var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );构造函数原创 2021-09-09 23:53:47 · 2390 阅读 · 0 评论 -
图形化开发(五)011-Three.js之Geometry几何体——立方体、圆形、圆锥
图形化开发(五)01-Three.js之Geometry几何体——立方体、圆形、圆锥Geometry几何体一个模型是由几何体Geometry和材质material组成。Three.js内置了很多的几何体种类,如:立方体、三棱锥、球、八面体、十二面体、二十面体等等,这一节我们将介绍一下这些类型几何体的模型创建和几何体的通用方法。Geometry和BufferGeometry当前Three.js内置了这两种几何体类型Geometry和BufferGeometry,这两个几何体类型都是用于存储模型的顶点位原创 2021-09-09 23:50:58 · 2194 阅读 · 0 评论 -
图形化开发(四)-Three.js之调式工具-dat.GUI
图形化开发(四)-Three.js之调式工具-dat.GUI调式方法有些时候,我们需要调整模型的位置或者大小什么的需要每次都去场景内进行调试,现在我推荐一种常用的插件dat.GUI,接下来,我们将一起看看如何使用这一款插件:https://github.com/dataarts/dat.gui功能参数调整自动匹配参数类型 (滑块, checkbox, 编辑 等)可以自定义函数使用1.引入<script src="https://cdn.bootcss.com/dat-gui/0原创 2021-09-09 23:36:43 · 698 阅读 · 0 评论 -
图形化开发(三)-Three.js之基本元素-scene场景 ——操作3d对象-添加、获取、删除、修改位置、修改大小、修改模型的转向
图形化开发(三)-Three.js之基本元素-scene场景 ——操作3d对象-添加、获取、删除、修改位置、修改大小、修改模型的转向基本元素scene场景介绍场景是我们每个Three.js项目里面放置内容的容器,我们也可以拥有多个场景进行切换展示,你可以在场景内放置你的模型,灯光和照相机。还可以通过调整场景的位置,让场景内的所有内容都一起跟着调整位置。THREE.Object3D为了方便操作,Three.js将每个能够直接添加到场景内的对象都继承至一个基类-THREE.Object3D,以后我们原创 2021-09-09 23:27:13 · 2163 阅读 · 0 评论 -
图形化开发(二)03-Three.js之性能监测插件stats —— 监听fps-画面每秒传输帧数
图形化开发(二)03-Three.js之性能监测插件stats —— 监听fps-画面每秒传输帧数在Three.js里面,遇到的最多的问题就是性能问题,所以我们需要时刻检测当前的Three.js的性能。现在Three.js常使用的一款插件叫stats。接下来我们看看如何将stats插件在Three.js的项目中使用:核心指标:FPS: 画面每秒传输帧数。引入//1.0、引入<script src="http://www.wjceo.com/lib/js/libs/stats.min.j原创 2021-09-07 00:09:55 · 1699 阅读 · 0 评论 -
图形化开发(二)02——Three.js之分析-创建渲染器、相机、场景 & 创建生成一个模型 & 实现动画效果
图形化开发(二)02——Three.js之分析-创建渲染器、相机、场景 & 创建生成一个模型 & 实现动画效果分析<body onload="init()">ready和onload的区别: ready加载完js和css就执行,onload必须加载完图片之后。//初始化函数,页面加载完成是调用function init() { initRenderer(); initScene(); initCamera(); initMesh(); anim原创 2021-09-07 00:09:06 · 315 阅读 · 0 评论 -
图形化开发(二)01——Three.js之Hello World
图形化开发(二)01——Three.js之Hello World前面说了这么多,准备了这么多,最后,放上我们的第一个案例吧。由此来打开学习Three.js 的大门:<!DOCTYPE html><html><head> <meta charset=utf-8> <title>我的第一个Three.js案例</title> <style> body { m原创 2021-09-06 23:57:48 · 228 阅读 · 0 评论 -
图形化开发(一)——Three.js基本介绍-优缺点-在线编辑器 & Babylon.JS是最好的JavaScript3D游戏引擎
图形化开发(一)——Three.js基本介绍-优缺点-在线编辑器 & Babylon.JS是最好的JavaScript3D游戏引擎课程主要学习目标Threejs ( 3d )D3 (做数据可视化,echarts)未来前端发展的三个方向主流前端工程师,PC ,桌面,移动端岗位多,竞争激烈nodejs服务端工程师岗位适中, 竞争中等图形化,游戏等岗位比较少,竞争少, 数学难度高Threejs为什么?webGL太难用,太复杂!但是现代浏原创 2021-09-06 23:39:46 · 12129 阅读 · 0 评论 -
网页高性能图形编程(五)-WebGL总结——WebGL介绍 & 使用着色器绘制图形 & WebGL绘制动画 & WebGL绘制各个顶点的颜色
第6章-回顾总结即:WebGL介绍-使用着色器绘制图形-WebGL绘制动画-WebGL绘制各个顶点的颜色回顾1.如何使用画布绘制一个应webgl技术的图形colorColor2.有坐标点的图形 一个坐标点着色器(顶点、片段)坐标体系3.绘制多个顶点的三角形4.平移,uniform 旋转,数学函数计算角度获取坐标值 缩放5.各个顶点的绘制颜色步骤varying理解和掌握WebGL工作原理的重要基础总结:可绘制简单webgl图形,动画、三维透视方法原创 2021-08-01 09:00:01 · 335 阅读 · 0 评论 -
网页高性能图形编程(四)-WebGL颜色-使用着色器绘制多顶点颜色的三角图形 & 操作部骤-顶点着色器和片段着色器 & 着色器编译羽图像绘制-vertexAttribPointer 方法
第5章-WebGL颜色01-操作步骤介绍颜色添加步骤在顶点着色器中定义一个接收外部传入颜色值的属性变量a_Color和用于传输获取到的颜色值变量v_Color在片段着色器中定义一个同一类型和名称的v_Color变量接收传顶点传入的值。重新传入到顶点坐标和颜色值的类型化数组将数组值传入缓存中并取出,赋值给顶点的两个变量接收缓存值并绘制图形和颜色vertexAttribPointer 方法参数说明第1个参数指定待分配attribute变量的存储位置原创 2021-08-01 08:54:33 · 1330 阅读 · 0 评论 -
网页高性能图形编程(三)04-WebGL动画-绘制旋转的动画三角形 & 动画-以连贯的、平滑的方式进行过渡变化 & 屏幕刷新频率-(大于)60Hz的屏幕每16.7ms刷新一次
第4章-WebGL动画03-图形的缩放动画实现需求:制作一个按旋转三角形的动画效果:屏幕刷新频率 图像在屏幕上更新的速度,也即屏幕上的图像每秒钟出现的次数,一般是60Hz的屏幕每16.7ms刷新一次。动画原理图像被刷新时,引起以连贯的、平滑的方式进行过渡变化。核心方法requestAnimationFrame(callback)//执行一个动画,并在下次绘制前调用callback回调函数更新该动画实例-绘制旋转的动画三角形<!DOCTYPE html>原创 2021-08-01 00:51:22 · 415 阅读 · 0 评论 -
网页高性能图形编程(三)03-WebGL动画-使用着色器绘制缩放的三角图形 & 改变原有图形中的矩阵值,实现图形的拉大和缩小效果
第4章-WebGL动画03-图形的缩放缩放的原理 通过改变原有图形中的矩阵值,实现图形的拉大和缩小效果,因此,只需要修改原有图形的矩阵值即可。实例-使用着色器绘制缩放的三角图形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in原创 2021-08-01 00:42:33 · 162 阅读 · 0 评论