Three.js
Three.js
碰碰qaq
前端GIS领域
展开
-
Three.js(7):局部纹理刷新
threejs局部纹理刷新原创 2022-07-21 11:36:03 · 1101 阅读 · 0 评论 -
Three.js(6):vue中基于worker-loader使用web worker设置动态模型的移动路线
1 版本vuecli:4.5.7three.js:0.131.02 使用worker-loader2.1 安装worker-loadernpm install worker-loader --save-dev2.2 vue.config.js中进行配置chainWebpack: config => { // 设置解析以worker.js 结尾的文件使用worker-loader 解析 config.module.rule('worker-loader').原创 2022-04-15 11:07:38 · 1771 阅读 · 0 评论 -
vue开发案例:基于Three.js搭建三维数字化场景
0、场景涉及的关键技术点GLTFLoader加载gltf模型,并解析模型动画; 基于worker-loader在vue中使用web worker; 基于web worker动态设置模型(鸟、牛)的移动路线; 基于geotiff.js与DEM生成三维地形场景; threejs中加载geojson生成ShapeGeometry; 使用BufferGeometryLoader加载风机模型,并设置风机动态转动; 基于DataTexture3D生成三维云; 基于Sprites实现树木、草地、向日葵等原创 2022-03-04 11:09:04 · 1872 阅读 · 1 评论 -
Three.js(5):基于geotiff.js与DEM生成三维地形场景
1、DEM数据准备2、引入geotiff库npm i geotiff3、使用geotiff库读取DEM数据import * as GeoTIFF from "geotiff";const tif = await GeoTIFF.fromUrl("hjq/feature/dem/dem1_108_100_84_clip2.tif");const tifImage = await tif.getImage();const image = { width: tifImage原创 2022-02-25 11:16:06 · 3853 阅读 · 8 评论 -
Three.js(4):基于Shadertoy在Three.js中实现雨、雪效果
0、原理移植Shadertoy中的天气效果编写成shader; 基于threejs后处理方式实现相应的效果。// 1、初始化const mComposer = new EffectComposer(this_.mRenderer);const renderPass = new RenderPass(this_.mScene, this_.mCamera);const effectCopy = new ShaderPass(CopyShader);effectCopy.renderToScr原创 2022-02-21 18:15:57 · 2315 阅读 · 3 评论 -
Three.js(3):移植Shadertoy中的着色器
0、说明请仔细阅读以下贴出的shadertoy与threejs的着色器代码之间的区别,一法通万法皆通。1、shadertoy中着色器代码// Found this on GLSL sandbox. I really liked it, changed a few things and made it tileable.// :)// by David Hoskins.// Original water turbulence effect by joltz0r// Redefine be原创 2022-02-11 17:36:36 · 1533 阅读 · 2 评论 -
Three.js(2):API结构图-2
7.1、基类Geometry原创 2021-09-03 11:00:51 · 399 阅读 · 0 评论 -
Three.js(1):API结构图-1
1.1、程序框架2.2、顶点概念2.7、BufferGeometry2.8、几何体旋转、缩放、平移3.1、材质Material4.1、点线面模型4.2、模型对象旋转平移变换4.3、复制和克隆5.1、光源6.1、层级模型...原创 2021-09-03 10:55:37 · 588 阅读 · 0 评论