stonerao

编辑器可以让用户在3D场景中添加、编辑和删除点位，并且支持上传参考模型、多点位类型的添加、上传、编辑、下载和删除、场景视图中点位的拖拽、场景配置等功能

使用threejs展示车辆效果

导入模型到blender中给场景打光展uv给需要烘培的物体展uv创建烘培纹理选择物体烘培使用展开uv并且使用烘培纹理导入threejs场景中

效果预览DEMO地址GIT地址不定期的在shadertoy上抄一些特效到实现在threejs中觉得可以的话请给一个小星星或者一个赞QQ群:1082834010

回顾1.shader基本使用粒子

效果demo地址 带宽优先速度较慢模型地址：车辆模型QQ交流群：1082834010

简介shader是什么？shader是一个用GLSL编写的小程序，也就是着色器语言，我们可以通过shader来编写顶点着色器和片元着色器，在WEBGL编程一书中 25-26页有详细说明shader在Three.js中如何使用？threejs提供了关于shader的材质 RawShaderMaterial 和 ShaderMaterial 两种编写shader的材质。RawShaderMaterial：不内置uniforms和attributesShaderMaterial：内置一些需要的参数，

创建场景加载模型FBX到场景中效果目前效果： 物体渐变、包围线条、扩散波、流动效果持续会添加： 扫光、线条扫光、线条物体切换效果、飞线等。需要什么效果可以在下方留言，持续添加效果中github：代码地址喜欢的请点一个starQQ交流群:1082834010...

选择一个模型选择了一个模型，在three-editor中展示如下烘培选择一个建模软件来对模型进行烘培，这里我选择了3dmax来进行烘培，也可以使用blender，c4d等软件来进行烘培。模型一共有4个mesh，我使用了vray灯光来对场景进行打光，3dmax中场景渲染的结果我们开始对物体进行烘培选择渲染=》渲染到纹理1、选择需要烘培的mesh2、使用第二uv来存储烘培的uv信息3、进行展开uv选择需要进行的烘培纹理选项，一般选择照明贴图或者完成贴图点击渲染，然后就会得

目标从0到1开发开发编辑器， 快速的开发出2D、3D效果；编辑器DEMO技术栈Vue.js - 3.0Three.js - 126Echarts - 5.0Vue.js - 3.0为什么选择vue.js? vue为MVVM，在开发3D效果中，可把对象绑定到vue上，开发效率更快。Three.js生态较好，扩展性高，一直使用。Echarts - 5.0好看，配置项生成，方便快捷。代码结构srccomponents ui组件surface 拖拽的平面组件e

WEB-3D编辑器（持续开发中)目前支持：效果组件联动，物体设置，事件联动、导入导出、引入vuejs模板；待做：场景设置，特效组件，物体效果设置（烘培贴图， 特效，shader效果等），视角镜头动画，模型动画，事件与前端联动，前端组件及联动，work，websoket，接入后台；支持2D+3D可视化组件拖入，构建大数据可视化平台，与后台数据进行联动。支持讨论qq：674656681QQ群:1082834010DEMO编辑器加载模型材质修改定制组件拖入定制化组件添加，通过数据拉起城

效果demo菜鸡互啄QQ群：1082834010（群内有代码）

解析图片颜色生成柱状图获取图片每像素颜色读取图片生成一张只有图片的canvas，可以设置的缩放比例设置图片的精细度，然后通过canvas的getImageData(0,0, img.width, img.height)的方法来获取整个图片每个像素点的颜色值，获取的颜色为依次排列的数组(r,g,b,a) / 255；2048 * 1024 灰度图通过获取的颜色值来生成柱状图通过获取的数据来生成Box， 因为都是同样的box， 可以通过使用 多实例网格 InstancedMesh 来优化性能；缩

图片转为粒子场景解析图片获取图片每个像素，针对像素值建立对应粒子；可以通过内置图片缩放比例，来建立不同像素的粒子图

扩散波-demo下载demo边缘透明度渐变来处理锯齿问题。处理前：function diffusion() { const width = 20; const color = "#5588aa"; // 创建box const geometry = new THREE.PlaneBufferGeometry(width, width, 1, 1); const vertexShader = ` varying vec2 vUv; vo

正在开发中

在加载模型中增加波浪效果关键方法是材质中的onBeforeCompile方法。用此方法可以直接在threejs原有的材质效果中做出更改，在建模师给出的模型效果中更改样式// obj === 建筑obj.traverse(function(child) { if (child.material) { if (Array.isArray(child.material)) { child.material.forEach((elem) => {

使用shader开发多材质过渡效果在片元着色器中，使用插值计算，计算需要过渡的两张图的颜色插值。qq群：1082834010

获取插值float lerp (float x,float y,float t ) { return ( 1.0 - t ) * x + t * y;}

记录THREE.JS 加载 FBX 不出来问题在FBXLoader中，FBXTreeParser下buildSkeleton生成model， 如果传入的node.attrName 为空，生成失败，循环会阻塞不进行下一步，也不会范围当前Group；原因：在buildSkeleton方法中使用的 THREE.PropertyBinding.sanitizeNodeName 函数来生成的name，sanitizeNodeName 中是使用的正则，如果传入的是undefined，则会失败；...

Three.js 第三人称控制 操作控制 -demo下载地址demo查看

使用THREE.js开发下雨效果-demo创建雨滴数据，用数据驱动雨滴的位置下载连接

生成文字标签Sprite生成文字标签Sprite// 显示文字 贴图canvas配置 精灵图配置function addSprite(text, canvaOpts, sprtieOpts) { const { width, height, fontSize } = canvaOpts; // 生成map const canvas = document.create...

准备准备好区块的地图，每个国家类似于灰度值（边缘识别，添加线条）这样的区块可以使用图表库直接生成地图，也可以直接预先准备好这样的地图，可以根据当前点击区块高亮通过gpu拾取到当前的颜色r值，或者预先存储好的图片，生成canvas，通过点击地球的UV去识别当前点的颜色R值，然后在自定义着色器中改变R值的颜色值值域渲染 多国家同时渲染每次需要执行更新，就重新赋值fragmentShad...

准备检测色块之间的颜色差，识别边缘。素材原始图：能分辨出色块的图 =>检测添加边缘后开始检测色块边缘的shader// 顶const vertexShader = ` varying vec2 vUv; void main () { vUv = uv; vec4 mvPosition = mode...

通过three.js + shader 生成高度地图使用自定义着色器读取到当前位置信息的颜色值来生成当前高度。准备两张图，一张展示材质，一张生成高度的材质高度是黑白构成的一张图，通过图片的灰度来生成高度。开始生成地球生成地球模型// threejsconst options = { radius: 100, // 地球的半径 segments: 640, // 地...

问题在直接load加载字体后，THEEE中使用canvas中添加自定义字体首次无法生效原因load添加字体，为懒加载字体，只有使用时才会去添加到document中；解决加载完毕后document.font.add(font)；在使用生成canvas...

var skyConfig = { number: 1000,// 星星数量 height: [90, 1000], // 中心店区间 size: 5,// 大小 color: 'rgba(255,255,255,1)'// 颜色}let position = [];let index = [];for (let i = 0; i < skyConfig.number; i...

飞行姿态var _mat = new THREE.Matrix4();var _qtn = new THREE.Quaternion();_mat.identity().lookAt(new THREE.Vector3(0, 0, 0), /*下一步位置*/, /*当前位置*/)_qtn.setFromRotationMatrix(_mat);obj.quaternion.copy(_...

function Initialize(opt) { var camera, scene, renderer; var clock = new THREE.Clock(); var Config = { width: 400,// 长度 number: 5,// 条数 u_time: 0,// 时间 yga...

var texture_up; this.planeUp = [] var flyShader = { vertexshader: ` varying vec2 vUv; varying float u_opacity; uniform sampler2D texture; uniform float t...

![](https://img-blog.csdnimg.cn/20191031161557879.gif使用Obj 模型 + shader 实线 模型以及代码加载 obj 格式文件加载到 scene中；使用 ShaderMaterial 材质var Shader = { vertexShader: ` varying vec3 vp; void ...

THREE.JS 绘制飞线在THREE中如何绘制飞线；使用的是Points+Shader封装的一个飞线方法；可以用于攻击线路，指向效果等；显卡GT730 6000根飞线 帧数在30FPS，可以调节线条的长度 和 间隔 ，增加流畅度飞线Demo git托管比较卡代码地址使用飞线let _Fly = new initFly({ texture: "./xxx.png"//飞线贴图 ...

给地图加上点数据如何绘制地图

给地球添加一个天空盒样式如下var camera, scene, renderer; var clock = new THREE.Clock(); var earth; function init() { camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.inner...

使用THREE.js简单绘制一个地球生成样式如下var camera, scene, renderer;var clock = new THREE.Clock();var earth;function init() { camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight,...

例如：创建N个Plane 位置随机，通过创建之后的mesh 设置 lookat设置为(0,0,0)，然后merge为一个geometry；var arr = [];function addPlane() { var geometry = new THREE.PlaneGeometry(5, 5, 32); var plane = new THREE.Mesh(geometry); ret...

在outlinepass中使用时 渲染一根线条轮廓，其他线条均被渲染；bug原因，在changeVisibilityOfNonSelectedObjects方法法和changeVisibilityOfNonSelectedObjects方法等判断，只判断了是否是MESH类型，应加上THREE.Line；如果渲染Sprite等，也可以加上当前类型；不会更改的可在我的资源下载中查找...

THREE 大量模型加载优化测试10W以上盒子性能第一种方法加载完毕后FPS为60；第二种加载完毕后15//第一种const random = () => { let number = Math.random() * 5000; return Math.random() < 0.5 ? 0 - number : number}var material = ...