
前端 three.js
柠檬绿dk
这个作者很懒,什么都没留下…
展开
-
Three.js 使用组合动态纹理
Three.js 使用组合动态纹理写这篇博客主要不是为了说明怎么使用组合动态纹理,而是我在过程中发现了一个问题,刚开始我在给不同的片元着色器传uniform值时(传的是一个时间),发现只有一个片元着色器在动态改变,起初我以为是有一个片元着色器写的有问题,于是我将两个片元着色器分别应用于材质,发现都没有问题。仔细思考了一下,定位到可能是使用了一个uniform里同一个时间参数造成的,于是我就在同一...原创 2020-03-31 14:13:07 · 1466 阅读 · 0 评论 -
three.js关于移除掉setFaceCulling属性,实现剔除渲染
three.js关于移除掉ssetFaceCulling属性,实现剔除渲染three.js默认剔除的是背面,如果我们想要直接看到box内部的东西,就需要修改默认的剔除方式,之前我们实现这种功能的方式是采用ssetFaceCulling属性来实现。首先来看看之前的实现方法。 let geometry = new THREE.BoxGeometry( 10, 10, 10); let mats=...原创 2020-03-30 13:54:49 · 1865 阅读 · 0 评论 -
Three.js实现动态天空盒
Three.js实现动态天空盒通常我们实现天空盒是通过创建一个box,给box每一个面贴一张纹理图,构成一个天空盒,但往往都是比较固定,不能非常好的显示动态的天空,通过一番艰辛的努力终于实现了一个还不错的效果。天气晴朗风轻云淡多云天气阴天...原创 2020-03-25 16:04:59 · 2685 阅读 · 15 评论 -
Three.js 的ParametricGeometry 版本比较
关于Three.js ParametricGeometry 的探究,写代码时好久没有用这个来构造几何体了,于是就将之前版本写的直接拿来用,结果一直报错,也很纳闷。说第一个参数的函数的第三个参数需要是一个Vector3,但我就记得只有两个参数,于是就查看源码发现确实需要三个参数,而且不需要返回值了。经过一番研究查看文档终于成功了下面将两个版本的代码列出来。//v69 之前版本var plan...原创 2020-01-17 11:24:24 · 394 阅读 · 0 评论 -
Three.js实现模糊效果
实现这种效果还是比较容易的,下面简单的说一下实现的思路。顶点着色器没有什么好说的,主要是片段着色器来进行计算。在片段着色器中首先计算出每一个像素在纹理坐标的比例,在当前纹理坐标设置一个采集颜色的区域,这个区域设置的越大越模糊,原因很简单,就是将设置采集区域内的颜色值rgb累加再取其平均值,就获得了当前片元的颜色值。采集区域越大,就越偏离原本的颜色值,就会越模糊。下面给出原理图就是将采集区域的颜...原创 2020-01-13 16:51:55 · 3134 阅读 · 4 评论 -
THREE.JS使用JSON文件加载外部模型改变材质的透明度
THREE.JS使用JSON文件加载外部模型改变材质的透明度**今天在做项目的时候,想要使用代码改变json外部的模型的透明度起初认为非常简单。后来发现怎么修改都没有用,就查看了json文件,通过修改materials数组里的transparency属性可以改变模型的透明度**...原创 2019-06-25 18:41:54 · 3606 阅读 · 0 评论 -
使用Three.js实现热力图(heatMap)的绘制
在项目开发过程中,需要将每一块区域的温度通过热力图的方式进行呈现,通过在网上查阅一部分资料和学习,想要实现这一技术需要在canvas上进行绘制。首先简单的说一下整体的思路:1、我们需要每一块区域的温度值和该温度所对应的坐标值,然后对每一个温度位置绘制出辐射圆椭圆,辐射圆的目的是为了获取每一个像素点的透明度的值(0-255),透明度的值越高则该区域的温度越高,对每一个像素点通过透明度的高低进行着色...原创 2019-09-25 20:48:25 · 10722 阅读 · 4 评论