Three.js 火焰效果实现艾尔登法环动态logo 🔥
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 背景 《艾尔登法环》是最近比较火的一款游戏，观察可以发现它的 Logo 是由几个圆弧和线段构成。本文使用 React + Three.js 技术栈，实现具有火焰 ...
原文：three.js使用卷积法实现物体描边效果
法线延展法 网上使用法线延展法实现物体描边效果的文章比较多，这里不再描述。 但是这种方法有个缺点：当两个面的法线夹角差别较大时，两个面的描边无法完美连接。如下图所示： 卷积法 这里使用另一种方法卷积法实现物体描边效果，一般机器学习使用该方法比较多。先看效果图： 使用three.js具体的实现方法如下： 创建着色器材质，隐藏不需要描边的物体进行渲染，将需要描边的位置渲染成白色，其他位置渲染成黑色。 ...
2019-11-24 20:07 0 1274 推荐指数：
相关推荐
three.js使用gpu选取物体并计算交点位置
光线投射法 使用three.js自带的光线投射器(Raycaster)选取物体非常简单，代码如下所示： 它是采用包围盒过滤，计算投射光线与每个三角面元是否相交实现的。 但是，当模型非常大，比如说有40万个面，通过遍历的方法选取物体和计算碰撞点位置将非常慢，用户体验不好 ...
three.js 火焰效果
、renderer、camera分别是three.js的Scene、WebGLRenderer和Perspecti ...
three.js 给物体添加图片
var skyBoxGeometry = new THREE.BoxGeometry( 5000, 5000, 5000 ); var texture = new THREE.TextureLoader().load("images/sky.jpg ...
three.js 之 透明物体不能正常显示
这几天遇到一个需求，类似这个案例：http://www.hightopo.com/demo/FaultDetection/ 就是这个透明渐变呼吸光柱，看到之后就想着写个shader材质实现透明度渐变，并随着时间微弱变化就好了，但是写完之后，透明部分的渲染却出了问题。 请先无视顶部纹理 ...
使用three.js加载3dmax资源，以及实现场景中的阴影效果
使用three.js可以方便的让我们在网页中做出各种不同的3D效果。如果希望2D绘图内容，建议使用canvas来进行。但很多小伙伴不清楚到底如何为我们绘制和导入的图形添加阴影效果，更是不清楚到底如何导入我们已经制作好的3dmax资源。所以这篇教程将简要介绍如何将我们用3dmax制作 ...
three.js粒子效果（分别基于CPU&GPU实现）
前段时间做了一个基于CPU和GPU对比的粒子效果丢在学习WebGL的群里，技术上没有多作讲解，有同学反馈看不太懂GPU版本，干脆开一篇文章，重点讲解基于GPU开发的版本。 一、概况 废话不多说，先丢上demo，用移动设备更能明显感觉性能差异。 维护粒子位移、颜色、尺寸：GPU版本 ...
three.js利用shaderToy实现简单的雨雪效果
先上效果图 实现代码 注意：所有实现的着色器代码均来自于ShaderToy网站（代码中已标明出处，请尊重原作者版权）， 这里只是想展示一下如何利用该网站结合three.js 的后期处理来实现一些特效 代码 pass.html ...