Three.js
文章平均质量分 79
three.js
summer_du
这个作者很懒,什么都没留下…
展开
-
GLSL—— Shader内置变量与内置函数
文章目录1、shader内置变量:2、shader内置常量:3、shader内置函数:1、shader内置变量:名称说明gl_Position用于vertex shader, 写顶点位置;被图元收集、裁剪等固定操作功能所使用;其内部声明是:highp vec4 gl_Position;gl_PointSize用于vertex shader, 写光栅化后的点大小,像素个数; 其内部声明是:mediump floa原创 2022-02-14 14:23:25 · 987 阅读 · 0 评论 -
GLSL —— 三种变量类型(uniform,attribute和varying)
文章目录1、uniform变量2、attribute变量3、varying变量1、uniform变量uniform变量是外部程序传递给(vertex和fragment)shader的变量。因此它是application通过函数glUniform**()函数赋值的。在(vertex和fragment)shader程序内部,uniform变量就像是C语言里面的常量(const ),它不能被shader程序修改。(shader只能用,不能改)如果uniform变量在vertex和fragment两者之间声明原创 2022-02-14 10:48:37 · 1980 阅读 · 0 评论 -
Three.js(十五)—— WebGL渲染器
文章目录15、WebGL渲染器15.1 场景渲染结果网页局部显示全屏渲染局部渲染.domElement 属性.setSize() 方法相机控件 OrbitControls 作用范围15、WebGL渲染器15.1 场景渲染结果网页局部显示通过Three.js发开Web3D应用的时候,渲染窗口可能是全屏效果占满web页面整个body区域,也可能是web页面上一个特定位置特定区域,比如渲染区域是一个特定位置、特定宽高的div元素所在区域。全屏渲染直接通过Three.js的WebGL渲染器WebGLRen原创 2022-01-28 14:50:43 · 1148 阅读 · 0 评论 -
Three.js(十四)—— 模型文件加载
文章目录14、Three.js 加载外部模型文件14.1 Three.js 数据结构、导入导出Threejs导出模型信息自定义模型加载器文件加载Three.js导出的模型数据14.2 加载 stl 文件并解析stl文件数据结构通过STLLoader.js加载.stl文件使用点模型渲染STL文件14.3 加载obj文件(几何体、材质、贴图)只加载obj文件同时加载obj文件和mtl文件obj包含多个网格模型模型纹理贴图导出.obj和.mtl的名称、路径问题.obj文件不包含信息14.4 加载FBX并解析骨骼动原创 2022-01-28 14:46:50 · 8466 阅读 · 1 评论 -
Three.js(十三)—— 语音模块
文章目录13、语音模块13.1 音频与场景关联(音源、监听者)非位置音频THREE.Audio位置音频THREE.PositionalAudio13.2 音乐可视化查看平均频率频率数据可视化案例13、语音模块13.1 音频与场景关联(音源、监听者)Threejs提供了一系列音频相关的API:音频Audio、位置音频PositionalAudio、监听者AudioListener、音频分析器AudioAnalyser、音频加载器AudioLoader。音频Audio、位置音频PositionalAud原创 2022-01-28 14:26:06 · 908 阅读 · 0 评论 -
Three.js(十二)——骨骼动画、变形动画
文章目录12、骨骼动画、变形动画12.1 骨骼动画原理相关类Bone骨架SkeletonGeometry(.skinWeights 和 .skinIndices 属性)骨骼网格模型 SkinnedMesh程序创建一个骨骼动画程序实现骨骼动画解析外部骨骼动画模型皮肤顶点权重属性.skinWeights骨骼动画顶点数据12.2 加载外部模型骨骼动画查看骨骼动画数据解析渲染骨骼动画12.3 变形目标动画原理创建变形动画的顶点数据网格模型.morphTargetInfluences属性生成变形动画12.4 解析外部原创 2022-01-28 10:15:43 · 5920 阅读 · 6 评论 -
Three.js(十一)—— 帧动画模块
文章目录11、帧动画模块11.1 编辑关键帧并解析播放创建两个用于动画的网格模型编辑关键帧播放关键帧11.2 解析外部模型的帧动画关键帧数据播放模型帧动画播放设置11.3 播放设置(暂停、时间段、时间点)播放/暂停(.paused属性)播放clip特定时间段定位在某个时间点快进(按钮递增时间点)滚动条拖动播放帧动画11、帧动画模块11.1 编辑关键帧并解析播放创建两个用于动画的网格模型/** * 创建两个网格模型并设置一个父对象group */mesh1.name = "Box"; //网格原创 2022-01-28 09:28:58 · 2741 阅读 · 1 评论 -
Three.js(十)—— 精灵模型和粒子系统
文章目录10、精灵模型和粒子系统10.1 精灵模型SpriteSprite和SpriteMaterial.scale 和 .positionSprite用途10.2 中国城市PM2.5可视化案例精灵模型Sprite实现10.3 树林效果精灵源码10.4 下雨场景效果模拟在空间中随机生成静态分布的雨滴雨滴动态运动10、精灵模型和粒子系统10.1 精灵模型SpriteThree.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象,基类都是Object3D,关于精灵模型对象Sp原创 2022-01-28 09:13:07 · 2070 阅读 · 1 评论 -
Three.js(九)—— 相机对象
文章目录9、相机对象(投影方式)9.1 正投影和透视投影相机正投影和透视投影简单解释正投影相机对象 OrthographicCamera透视投影相机 PerspectiveCamera相机位置 .posiiotn 和 .lookAt (相机拍摄目标位置)相机位置放置9.2 窗口变化自适应渲染视图矩阵 .matrixWorldInverse 和投影矩阵 .projectionMatrix正投影相机 OrthographicCamera 自适应渲染透视投影相机 PerspectiveCamera 自适应渲染9原创 2022-01-28 08:57:52 · 508 阅读 · 0 评论 -
Three.js(八)—— 几何体对象、曲线、三维模型
文章目录8、几何体对象、曲线、三维模型8.1 常见几何体和曲线API介绍几何体曲线8.2 直线、椭圆、圆弧、基类Curve圆弧线ArcCurve曲线Curve方法.getPoints()几何体方法.setFromPoints()绘制圆弧线案例绘制直线效果8.3 样条曲线、贝塞尔曲线一条光滑样条曲线案例贝塞尔曲线8.4 多个线条组合曲线CurvePathU型案例8.5 曲线路径管道成型TubeGeometry样条曲面生成圆管案例CurvePath多段路径生成管道案例8.6 旋转造型LatheGeometry样原创 2022-01-28 08:41:35 · 2535 阅读 · 0 评论 -
Three.js(二)—— 快速上手
文章目录2、快速上手2.1 3D场景简单案例几何体Geometry材质Material光源Light相机Camera整个程序结构场景 - 相机 - 渲染器2.2 周期性渲染setInterval周期性渲染requestAnimationFrame函数渲染2.3鼠标操作三维场景2.4 3D场景插入新的几何体几何体网格模型同时绘制多个几何体辅助三维坐标系AxisHelper2.5 材质效果半透明效果材质常见属性添加高亮效果材质类型2.6 光照效果常见光源类型2、快速上手2.1 3D场景简单案例<!原创 2022-01-27 14:54:16 · 1493 阅读 · 0 评论 -
Three.js(三)—— 顶点概念,几何体结构
文章目录3、顶点概念,几何体结构3.1 顶点位置数据解析渲染自定义几何体点模型points线模型Line3.2 顶点颜色数据插值计算顶点颜色数据插值计算每个顶点设置一种颜色材质属性.vertexColors3.3 顶点法向量光照计算3.4 顶点索引复用3.5 设置Geometry顶点位置、顶点颜色Vector3定义顶点位置坐标数据Color定义顶点颜色数据材质属性.vertexColors2.6 Face3对象定义Geometry三角面Face3定义三角形面设置四个顶点构建三角形三角形法线设置颜色设置3.7原创 2022-01-27 14:52:11 · 1856 阅读 · 0 评论 -
Three.js(四)—— 材质对象
文章目录4、材质对象4.1 材质共有属性、私有属性.side 正面/背面/双面.opacity 透明度访问材质属性4、材质对象4.1 材质共有属性、私有属性点材质PointsMaterial、基础线材质LineBasicMaterial、基础网格材质MeshBasicMaterial、高光网格材质MeshPhongMaterial等材质都是父类Material的子类。私有属性例如:点材质特有的尺寸属性.size;高光网格材质特有的高光颜色属性.specular共有属性例如:.side;.opaci原创 2022-01-27 14:48:44 · 281 阅读 · 0 评论 -
Three.js(五)—— 点线面模型对象
文章目录5、点线面模型对象5.1 点线面模型介绍点模型 Points线模型 Line网格模型 Mesh5.2 模型对象旋转平移缩放变换缩放位置属性 .position平移旋转5.3 对象克隆clone复制copy复制 .copy克隆 .clone网格模型的复制和克隆5、点线面模型对象5.1 点线面模型介绍点模型 Pointsvar geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry// 点渲染模式var原创 2022-01-27 14:46:13 · 662 阅读 · 0 评论 -
Three.js(六)—— 光源对象
文章目录6、光源对象6.1 光照原理和常见光源类型环境光 AmbientLight点光源 PointLight平行光 DirectionalLight聚光源 SpotLight光源辅助对象光照计算方法颜色相乘测试6.2 阴影投影计算平行光投影计算代码聚光光源投影计算代码模型.castShadow属性.receiveShadow属性光源.castShadow属性.receiveShadow属性光源.castShadow属性光源.shadow属性阴影对象基类LightShadowLightShadow属性.ca原创 2022-01-27 14:44:57 · 757 阅读 · 0 评论 -
Three.js(七)—— 组对象Group、层级对象
文章目录7.1 组对象Group、层级对象Group案例查看子对象.children场景对象结构.add() 方法.remove()方法7.2 对象节点命名、查找、遍历模型命名(.name属性)树结构层级模型递归遍历方法.traverse()查找某个具体的模型7.3 本地位置坐标、世界位置坐标.getWorldPosition()方法建立世界坐标系概念本地缩放系数.scale本地矩阵.materix和世界矩阵.matrixWorld7.1 组对象Group、层级对象Group案例//创建两个网格模型m原创 2022-01-27 14:41:55 · 5092 阅读 · 2 评论 -
Three.js(一)—— 资源链接
three.js使用原创 2022-01-27 09:37:36 · 1233 阅读 · 0 评论