Three.js
文章平均质量分 65
Threejs可视化
这个作者很懒,什么都没留下…
展开
-
Three.js官网
three.js视频教程:https://www.bilibili.com/video/BV14r4y1G7h4/?Three.js基础教程:http://www.webgl3d.cn/pages/aac9ab/Three.js中文网:http://www.webgl3d.cn/Threejs官网:https://threejs.org/原创 2023-12-01 11:46:21 · 5904 阅读 · 0 评论 -
Three.js零基础入门教程(2023版本)
在正式学习Three.js之前,先做一些必要的准备工作,具体说就是下载threejs官方文件包,threejs官方文件包提供了很多有用的学习资源。下载three.js文件包解压后,你可以看到如下目录(不同版本会略有差异)。对于开发者而言,大家经常接触的是文档docs和案例examples两个文件夹,平时查看文档,可以打开文档docs里面html文件,案例examples里面提供了海量threejs功能案例。three.js-文件包。转载 2023-02-07 17:31:05 · 17559 阅读 · 1 评论 -
three.js视频教程2022最新
1.three.js下载特定版本资源包,并启动文档。6.相机控件轨道控制器OrbitControls。2.html文件中引入three。3.第一个3D案例—创建3D场景。4.第一个3D案例—相机和渲染器。9.threejs画布尺寸和布局。10.阵列立方体和相机适配体验。7.threejs三维坐标系。原创 2022-09-19 16:13:37 · 1405 阅读 · 0 评论 -
Threejs纹理对象Texture阵列、偏移、旋转(纹理动画)
纹理对象Texture阵列、偏移、旋转本文是Three.js电子书的8.4节8.1节给大家提到过纹理对象Texture,简单的说纹理对象Texture就是包含一张图片的对象,纹理对象Texture搜包含的图片就是.image属性,除此外,纹理对象Texture还提供了一些实际开发中经常会用到的属性和方法。阵列纹理贴图阵列映射。var texture = textureLoader.loa...原创 2019-12-04 08:43:39 · 8601 阅读 · 3 评论 -
Three.js数组材质、材质索引materialIndex
数组材质、材质索引.materialIndex本文是Three.js电子书的8.3节这节课为大家讲解数组材质和三角形面Face3的材质索引属性.materialIndex。数组材质你可以测试把数组材质作为几何体的纹理贴图,所谓数组材质就是多个材质对象构成一个数组作为模型对象的材质。var geometry = new THREE.BoxGeometry(100, 100, 100); /...原创 2019-12-04 08:43:48 · 1899 阅读 · 1 评论 -
Three.js几何体顶点纹理坐标UV
Three.js几何体顶点纹理坐标UV在课程的第二章对Threejs几何体Geometry和BufferGeometry的顶点概念做过比较多的介绍,讲解过顶点位置坐标数据、顶点颜色数据、顶点法线方向向量数据,不过顶点的UV数据没有去讲解,主要是几何体顶点的纹理坐标数据和纹理贴图的映射有关系,所以放在了本章节去讲解。顶点数据positioncolor顶点法线方向向量数据顶点纹理坐标数据UV和顶点...原创 2019-12-04 08:43:59 · 5023 阅读 · 3 评论 -
Three.js创建纹理贴图(TextureLoader、.map)
创建纹理贴图本文是Three.js电子书的8.1节通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture,纹理对象Texture可以作为模型材质颜色贴图.map属性的值。材质的颜色贴图属性.map设置后,模型会从纹理贴图上采集像素值,这时候一般来说不需要在设置材质颜色.color。.map贴图之所以称之为颜色贴图就是因为网格模型会获得颜色...原创 2019-12-04 08:44:07 · 10507 阅读 · 0 评论 -
Three.js视频、canvas画布作为纹理贴图(CanvasTexture和VideoTexture)
canvas画布、视频作为纹理贴图通过Three.js两个类CanvasTexture和VideoTexture可以分别实现把Canvas画布、视频作为纹理贴图使用。Canvas画布作为Three.js纹理贴图(CanvasTexture)Canvas画布可以通过2D API绘制各种各样的几何形状,可以通过Canvas绘制一个轮廓后然后作为Three.js网格模型、精灵模型等模型对象的纹理贴...原创 2019-12-04 08:44:19 · 3491 阅读 · 2 评论 -
Three.js凹凸贴图bumpMap和法线贴图.normalMap
凹凸贴图bumpMap和法线贴图.normalMap本文是Three.js电子书的8.6节一个复杂的曲面模型,往往模型顶点数量比较多,模型文件比较大,为了降低模型文件大小,法线贴图.normalMap算法自然就产生了,复杂的三维模型3D美术可以通过减面操作把精模简化为简模,然后把精模表面的复杂几何信息映射到法线贴图.normalMap上。凹凸贴图、法线贴图法线贴图凹凸贴图材质对象法线贴图通过...原创 2019-12-04 08:44:31 · 4035 阅读 · 2 评论 -
Three.js光照贴图添加阴影(·lightMap)
Three.js光照贴图添加阴影(·lightMap)本文是Three.js电子书的8.7节在三维场景中有时候需要设置模型的阴影,也就是阴影贴图或者说光照贴图·lightMap,一般Threejs加载外部模型的光照贴图·lightMap,三维模型加载器可以自动设置,不需要程序员通过代码去设置,不过为了让大家更好理解光照贴图·lightMap,这里就通过Three.js代码设置场景模型的阴影贴...原创 2019-12-04 08:44:39 · 2809 阅读 · 2 评论 -
Three.js高光贴图(.specularMap)
Three.js高光贴图(.specularMap)本文是Three.js电子书的8.8节高光网格材质MeshPhongMaterial具有高光属性.specular,如果一个网格模型Mesh都是相同的材质并且表面粗糙度相同,或者说网格模型外表面所有不同区域的镜面反射能力相同,可以直接设置材质的高光属性.specular。如果一个网格模型表示一个人,那么人的不同部位高光程度是不同的,不可能直接...原创 2019-12-04 08:44:53 · 1547 阅读 · 1 评论 -
Three.js环境贴图(.envMap)
Three.js环境贴图(.envMap)本文是Three.js电子书的8.9节Three.js环境贴图.envMap字面意思就是三维模型周边环境,比如你渲染一个立方体,立方体放在一个屋子里面,屋子里面的周边环境肯定影响立方体的渲染效果,目的是为了渲染该立方体而不是立方体周围环境,为了更方便所以没必要创建立方体周边环境所有物体的网格模型,可以通过图片来表达立方体周边的环境。创建一个立方体盒子...原创 2019-12-03 15:57:33 · 5982 阅读 · 1 评论 -
Three.js数据纹理对象DataTexture
Three.js数据纹理对象DataTexture本文是Three.js电子书的8.10节Three.js数据纹理对象DataTexture简单地说就是通过程序创建纹理贴图的每一个像素值。程序生成一张图片的RGB值var geometry = new THREE.PlaneGeometry(128, 128); //矩形平面/** * 创建纹理对象的像素数据 */var widt...原创 2019-12-03 15:49:34 · 2847 阅读 · 1 评论 -
Three.js数据结构、导入导出(.toJSON())
Three.js数据结构、导入导出本文是Three.js电子书的14.1节通过Three.js模型数据导入导出过程的学习,可以让你对Threejs解析加载外部模型的过程更为了解。Threejs导出模型信息你可以通过下面代码导出模型的各类信息,然后在浏览器控制台打印出来模型数据,然后复制浏览器控制台模型数据粘贴到json文件中,最后可以尝试加载解析这些Threejs导出的json文件。之所以...原创 2019-12-03 15:42:46 · 4557 阅读 · 1 评论 -
Three.js心脏在线预览(次时代模型)
心脏在线预览(次时代模型)本文是Three.js电子书的14.6节本节课加载一个心脏的次时代模型,模型包含颜色贴图.map、法线贴图.normalMap、高光贴图.specularMap、环境贴图.envMap,关于这些贴图的相关属性可以查看高光网格模型材质的文档MeshPhongMaterial。贴图普通颜色纹理贴图map法线贴图normalMap高光贴图specularMap环境贴图en...原创 2019-12-03 15:09:19 · 1242 阅读 · 0 评论 -
Three.js玉镯在线预览案例
手镯在线预览案例本文是Three.js电子书的14.5节在线预览产品的时候,一个产品可能会提供不同的系列,比如颜色不同、造型款式不同。本节课的玉镯案例模型提供了三种颜色款式,不同的颜色款式本质上就是网格模型的颜色贴图.map不同。设置纹理贴图model.obj文件中已经包含纹理映射的UV坐标数据,只要给模型颜色贴图属性.map直接赋值即可。/** * OBJ文件加载 只加载obj...原创 2019-12-03 14:50:14 · 1192 阅读 · 3 评论 -
Three.js加载FBX并解析骨骼动画
加载FBX并解析骨骼动画本文是Three.js电子书的14.4节通过Threejs先加载一个.FBX格式的三维模型文件,然后解析该文件中的骨骼动画信息。加载器FBXLoader.js引入FBX加载器相关文件<!-- 引入fbx模型加载库FBXLoader --><script src="http://www.yanhuangxueyuan.com/versions/...原创 2019-12-03 12:42:36 · 10457 阅读 · 1 评论 -
Three.js加载.obj和.mtl文件(无法加载材质、路径错误问题)
加载.obj模型文件本文是Three.js电子书的14.3节使用三维软件导出.obj模型文件的时候,会同时导出一个材质文件.mtl, .obj和.stl文件包含的信息一样都是几何体顶点相关数据,材质文件.mtl包含的是模型的材质信息,比如颜色、贴图路径等。加载.obj三维模型的时候,可以只加载.obj文件,然后借助three.js引擎自定义材质Material,也可以同时加载.obj和.mt...原创 2019-12-03 12:13:34 · 11825 阅读 · 5 评论 -
Three.js加载.stl格式模型
.stl格式模型加载本文是Three.js电子书的14.2节基本所有的三维软件都支持导出.stl格式的三维模型文件,.stl格式的三维模型不包含材质Material信息,只包含几何体顶点数据的信息,你可以简单地把stl文件理解为几何体对象Geometry,本节课素材box.STL是一个立方体, 你可以用记事本或代码编辑器打开文件box.STL查看stl的数据结构。stl文件数据结构.stl...原创 2019-12-03 11:57:29 · 4642 阅读 · 1 评论 -
Three.js加载解析外部模型变形动画
解析外部模型变形动画目标数据本文是Three.js电子书的12.4节本节课给大家展示两个变形动画的案例,一个是鸟的飞行变形动画,一个是通过滚动条控制人体的变形案例。加载查看模型变形动画数据加载完三维模型后,通过console.log(geometry.morphTargets)可以在浏览器控制台查看模型的变形数据。// 通过加载器JSONLoader加载变形动画模型文件./人/umich...原创 2019-12-03 09:22:36 · 1889 阅读 · 0 评论 -
Three.js加载外部模型骨骼动画
加载外部模型骨骼动画上节课是通过Threejs程序创建一个骨骼动画然后解析播放,本节课是加载解析一个外部的骨骼动画模型文件。查看骨骼动画数据在解析模型骨骼动画之前,先加载外部的三维模型,查看骨骼动画相关的数据,这样便于大家理解,关于加载外部模型文件的更多知识可以查看第14章。// 通过加载器ObjectLoader加载./marine_anims_core.json模型文件var lo...原创 2019-12-03 09:22:21 · 2296 阅读 · 2 评论 -
Three.js变形动画geometry.morphTargets
Three.js变形动画geometry.morphTargets本文是Three.js电子书的12.3节关于变形动画,你可以理解为多组顶点数据,从一个状态变化到另一个状态,比如人的面部表情,哭的表情用一系列的顶点表示,笑的表情用一系列的顶点表示,从哭的表情过渡到笑的表情,就是表情对应的两组顶点之间的过渡,几何体的顶点的位置坐标发生变化,从一个状态过渡到另一个状态自然就产生了变形动画。一般项...原创 2019-12-03 09:22:04 · 1386 阅读 · 0 评论 -
Three.js骨骼动画(SkinnedMesh)
Three.js骨骼动画(SkinnedMesh)本文是Three.js电子书的12.1节所谓骨骼动画,以人体为例简单地说,人体的骨骼运动,骨骼运动会带动肌肉和人体皮肤的空间移动和表面变化,下面将会提到的蒙皮概念你可以类比人体的皮肤。Threejs骨骼动画需要通过骨骼网格模型类SkinnedMesh来实现,一般来说骨骼动画模型都是3D美术创建,然后程序员通过threejs引擎加载解析,为了...原创 2019-12-02 17:39:33 · 3605 阅读 · 4 评论 -
Three.js帧动画播放设置(暂停、快进、滚动条)
播放设置(暂停、时间段、时间点)本文是Three.js电子书的11.3节你可以通过剪辑AnimationClip、操作AnimationAction、混合器AnimationMixer的属性或方法完成一些播放效果。播放/暂停(.paused属性)<button onclick="pause()" type="button" style="position: absolute;padd...原创 2019-12-02 16:07:39 · 9174 阅读 · 2 评论 -
Three.js解析外部模型的帧动画
解析外部模型的帧动画本文是Three.js电子书的11.2节本节课通过一个案例来展示Threejs如何加载并播放外部模型中的帧动画数据。关键帧数据如果有兴趣,你可以打开模型文件model.json查看里面与帧动画有关的关键帧数据。"object": { // 绑定动画的模型名称Box "name": "Box",...},// 动画数据"animations": [{ ...原创 2019-12-02 15:45:29 · 1338 阅读 · 3 评论 -
Three.js关键帧动画
编辑关键帧并解析播放本文是Three.js电子书的11.1节Threejs提供了一系列用户编辑和播放关键帧动画的API,例如关键帧KeyframeTrack、剪辑AnimationClip、操作AnimationAction、混合器AnimationMixer。帧动画帧动画应用编辑播放骨骼动画、变形目标动画、淡入淡出等位置、颜色等属性随着时间变化离散时间点对应离散属性值关键帧Keyframe...原创 2019-12-02 15:32:14 · 2986 阅读 · 1 评论 -
Three.js精灵模型Sprite模拟下雨效果
精灵模型Sprite模拟下雨效果本文是Three.js电子书的10.4节本节课通过一个精灵模拟模拟下雨的场景进一步建立精灵模型和粒子系统的概念。基本思路就是通过足够多的精灵模型构成一个粒子系统,然后每一个雨滴按照在一定空间内随机分布,每个精灵模型都使用一个背景透明的雨滴rain.png作为纹理贴图。在空间中随机生成静态分布的雨滴/** * 精灵创建下雨效果 */// 加载雨滴...原创 2019-12-02 14:55:38 · 2723 阅读 · 0 评论 -
Three.js精灵模型Sprite模拟树林效果
精灵模型Sprite模拟树林效果本文是Three.js电子书的10.3节下面通过通过一张背景透明的树纹理贴图tree.png作为精灵模型的纹理贴图.map模拟一个树林效果。精灵源码通过循环程序创建足够多的精灵模型,然后通过javascript随机函数Math.random()使精灵模型的位置随机分布。如果你想实现更好的树林效果,也可以使用矩形网格模型Mesh代替精灵模型,主要是场景旋...原创 2019-12-02 14:17:22 · 2700 阅读 · 0 评论 -
Three.js精灵模型Sprite小案例(中国城市PM2.5可视化)
中国城市PM2.5可视化案例本文是Three.js电子书的10.2节本节课通过精灵模型等不同方式解析下面各个城市的PM2.5数据,实现一个非常简单的各个城市PM2.5可视化案例。数据文件数据.json给出了各个城市的PM2.5值和城市坐标。解析的时候把城市的PM2.5大小用圆圈大小表示,城市坐标直接通过模型位置属性设置。[{ "name": "海门", "value": 9, ...原创 2019-12-02 13:50:47 · 1584 阅读 · 2 评论 -
Three.js精灵模型Sprite
Three.js精灵模型Sprite本文是Three.js电子书的10.1节Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象,基类都是Object3D,关于精灵模型对象Sprite的方法和属性除了可以查看文档Sprite,也可以查看基类Object3D。创建精灵模型对象Sprite和创建网格模型对象一样需要创建一个材质对象,不同的地方在于创建精灵模...原创 2019-12-02 13:36:26 · 1329 阅读 · 1 评论 -
Three.js音频Audio
Three.js音频本文是Three.js电子书的13.1节Threejs提供了一系列音频相关的API:音频Audio、位置音频PositionalAudio、监听者AudioListener、音频分析器AudioAnalyser、音频加载器AudioLoader。音频Audio、位置音频PositionalAudio等Threejs类本质上是对原生Web Audio API的封装。非位置...原创 2019-12-02 10:28:33 · 1277 阅读 · 2 评论 -
Three.js音乐可视化
Three.js音乐可视化本文是Three.js电子书的13.2节通过Threejs音频相关的APi可以获得音乐音频的频率数据然后可视化。查看平均频率var analyser = null; // 声明一个分析器变量// 渲染函数function render() { renderer.render(scene, camera); //执行渲染操作 requestAnimat...原创 2019-12-02 10:28:18 · 1420 阅读 · 1 评论 -
Three.js全屏/局部渲染
Three.js全屏/局部渲染本文是Three.js电子书的15.1节通过Three.js发开Web3D应用的时候,渲染窗口可能是全屏效果占满web页面整个body区域,也可能是web页面上一个特定位置特定区域,比如渲染区域是一个特定位置、特定宽高的div元素所在区域。全屏渲染直接通过Three.js的WebGL渲染器.setSize()方法设置渲染尺寸为浏览器body区域宽高度。var...原创 2019-12-02 10:27:34 · 1721 阅读 · 0 评论 -
Three.js正投影相机OrthographicCamera和透视投影相机PerspectiveCamera
正投影相机OrthographicCamera和透视投影相机PerspectiveCamera本文是Three.js电子书的9.1节相机基类Camera正投影相机 透视投影相机立方相机OrthographicCamera PerspectiveCamera CubeCamera视图矩阵.matrixWorldInverse投影矩阵.projectionMatrix属性针对不同应用的...原创 2019-12-02 10:27:17 · 3973 阅读 · 0 评论 -
Three.js浏览器窗口尺寸变化(自适应渲染)
Three.js浏览器窗口尺寸变化(自适应渲染)本文是Three.js电子书的9.2节开发的过程中你可能会遇到这样一个问题,通过鼠标拖动使浏览器的窗口变大,因为Threejs渲染器的渲染尺寸范围没有跟着变化,出现局部空白区域。对于这种情况要做的就是重新获取浏览器窗口新的宽高尺寸,然后通过新的宽高尺寸更新相机Camera和渲染器WebGLRenderer的参数即可。视图矩阵.matrixWor...原创 2019-12-01 21:19:45 · 2272 阅读 · 1 评论 -
Three.js层级模型节点命名、查找、遍历
层级模型节点命名、查找、遍历本文是Three.js电子书的6.2节上节课说过Threejs场景对象Scene和各种子对象构成的层级模型就是一个树结构。如果你有一定的算法基础对树结构肯定会非常了解,如果你了解前端的DOM树结构也非常有助于本节课的学习,如果这些都不了解也没有关系,直接体验本节课的案例源码。本文通过Three.js的一个类Group来介绍Threejs层级模型的概念,如果你对We...原创 2019-12-01 19:12:39 · 6907 阅读 · 0 评论 -
Three.js组对象Group、层级模型
组对象Group、层级模型本文是Three.js电子书的6.1节本节课的目的是为了大家建立层级模型的概念,所谓层级模型,比如一个机器人,人头、胳膊都是人的一部分,眼睛是头的一部分,手是个胳膊的一部分,手指是手的一部分…这样的话就构成一个一个层级结构或者说树结构。Group案例在详细讲解层级模型之前先通过Threejs的类Group实现一个网格模型简单的案例。下面代码代码创建了两个网格模型...原创 2019-12-01 19:10:33 · 4404 阅读 · 0 评论 -
Three.js获得世界坐标.getWorldPosition()
Three.js获得世界坐标.getWorldPosition()本文是Three.js电子书的6.3节通过前两节课的学习相比你对Threejs的层级模型有了一定认识,那么本节课就在层级模型概念的基础给家建立本地坐标系和世界坐标系的概念。如果你对本地坐标系和世界坐标系已经有了一定概念,那么可以直接访问模型的位置属性.position获得模型在本地坐标系或者说模型坐标系下的三维坐标,通过模型的...原创 2019-12-01 19:07:40 · 6184 阅读 · 2 评论 -
Three.js基类Light和Object3D
基类Light和Object3D本文是Three.js电子书的5.3节前面课程对光源的介绍主要是从认识光源的角度介绍的,本节课主要从编写代码角度介绍,根据类的继承关系设置光源对象的相关属性。你查看文档SpotLight、DirectionalLight、环境光AmbientLight等光源对象都有一个共同的基类Light,光源Light也有一个基类Object3D。也就是说Threejs环境...原创 2019-12-01 14:21:29 · 603 阅读 · 1 评论 -
Three.js光照阴影实时计算
Three.js光照阴影实时计算本文是Three.js电子书的5.2节在具有方向光源的作用下,物体会形成阴影投影效果。平行光投影计算代码Three.js物体投影模拟计算主要设置三部分,一个是设置产生投影的模型对象,一个是设置接收投影效果的模型,最后一个是光源对象本身的设置,光源如何产生投影。var geometry = new THREE.BoxGeometry(40, 100, 40)...原创 2019-12-01 14:18:37 · 650 阅读 · 0 评论