关注
分享
towrabbit
hi大家好，我叫角角，是兽圈的一员，种族是兔子，普通的前端工程师，知道一点点WebGL，喜欢和平，但是如果有人扰乱了我平静的生活的话，我也会奉陪到底
展开
-
three.js 设置渲染帧数 FPS
本片文章用于限制渲染的帧数不超过某个速率不单单是three.js 任意的使用js渲染的帧率控制都通用主要思路在渲染动画的函数外放置一个定时器在开始渲染的时候计时器开始计时在渲染一帧之前判断当前渲染的这帧距离 上一帧所经过的时间如果时间小于（1/FPS） 单帧渲染时间 （例如60帧就是 1/60s）则跳过不进行渲染如果时间大于(1/FPS) 单帧渲染时间 则将判定的时间设置为(当前帧距离上一帧的时间 - 1/FPS) 用于下一帧的计算const clock = THREE.Clock原创 2021-01-10 13:44:54 · 4125 阅读 · 1 评论 -
three.js 设置背景透明 让渲染的内容在其他div上方
有时候需要让three.js渲染的内容放置在其他div所显示的内容的上方，这个时候就需要设置渲染器透明：结果是这样的：其实只要设置渲染器开启alpha通道就行了var renderer = new THREE.WebGLRenderer( { alpha: true } );但是要记得让清除的颜色的alpha为0renderer.setClearColor( 0x000000, 0)...原创 2019-11-22 11:50:42 · 1313 阅读 · 0 评论 -
web端的shader Threejs飞线
目标之前想用粒子来实现一下飞线的效果，看到很多大佬的代码发现使用粒子会是一个不错的选择，因为粒子的渲染比较省性能，之前看到有人使用圆形的粒子 后来发现其实普通的正方形的粒子就可以...原创 2019-11-19 12:03:08 · 4288 阅读 · 17 评论 -
【three.js】使用three做一个自己的彩红猫
一直彩红猫中毒，在学了一些three.js之后，更想做一个属于自己的彩虹猫了。最后的完成效果：彩红猫手机显示效果也还可以。目标在做一件事情之前 最为重要的就是列出要做到的事情目标，同时目标要记得是可测量的（得知道怎么样算是完成）彩红可调整猫使用帧动画进行动画效果彩红猫的速度是可以动态调整的（即帧动画速度可调整）彩红猫的贴图可以切换 切换不同风格的彩红猫循环向左的彩色背景，速...原创 2018-11-30 21:09:10 · 1250 阅读 · 0 评论 -
使用Web Audio与three.js实现音乐可视化
简介HTML5可以不借助其他的插件仅仅通过浏览器实现非常酷炫的事情，而这篇文章就是关于借助three.js以及Web Audio接口来实现声音可视化的。Web Audio允许你在浏览器端操作音频，需要了解更多关于Web Audio的相关信息请移步至这 MDN Web Audio API。而关于THREE.JS，官网上说是一个让创建WebGL应用变得简单的javascript 3D库。这篇文章的...翻译 2018-10-10 12:01:15 · 6253 阅读 · 0 评论 -
three.js 屏幕截取变成图片 截图
截取three.js 渲染的图，如果直接将输出的canvas变成图片是无法获取的，因为在获取之前渲染界面是清空的状态，所以需要在渲染之后清空之前将渲染的内容转换为图片...原创 2018-09-19 12:37:39 · 5546 阅读 · 4 评论 -
【three.js学习笔记】06 自定义几何体的创建 对象克隆
three.js可以生成几种已经设定好的几何体，比如锥体，球体，圆柱体等，three.js也提供了工具可以自己通过顶点来创建自定义的几何体创建自定义顶点var vertices = [ new THREE.Vector3(0,2,0), new THREE.Vector3(-1,0,0), new THREE.Vector3(0,0,1), new THRE...原创 2018-08-08 22:49:06 · 2689 阅读 · 2 评论 -
【three.js学习笔记】05 场景中的对象 添加对象/移除对象
This player dreamed of sunlight and trees. Of fire and water. It dreamed it created. And it dreamed it destroyed. –End Poem《minecraft》这是游戏《我的世界》终末之诗里的一句话，其实差不多可以表达了对于这个世界的认识，如果放在一个three.js创建的...原创 2018-05-12 21:38:36 · 5817 阅读 · 2 评论 -
【three.js学习笔记】04 dat.gui 组件使用
dat.gui组件使用dat gui组件可以方便地改变某些值，并快速预览这些值的改变所产生的变化 远程调用： https://threejs.org/examples/js/libs/dat.gui.min.js在加入这个script之后 对这个进行初始化，这样我们才能知道需要更改哪些变量://创建一个需要进行改变的控制变量对象var guiControl = new fun...原创 2018-05-05 22:33:27 · 2368 阅读 · 1 评论 -
【three.js学习笔记】03 物体的运动
在上一章中，我们已经完成场景，物体的创建并且添加光影，在这一章中我们尝试让物体运动起来 众所周知动画是一帧帧的静态图像构成的，因此在浏览器中的3d绘制也是类似的，每一帧中物体位置、大小等情况发生变化，并且串联在一起就变成了动画。 现代浏览器中提供了高效的重新渲染场景的解决方案，就是requestAnimationFrame()这个方法，用这个方法可以定义所有的绘制操作，浏览器会进行高效平滑地绘...原创 2018-05-04 22:25:02 · 3114 阅读 · 0 评论 -
【three.js学习笔记】02 物体材质 光 与 影
神说要有光，便有了光 神说光是好的，于是把光与暗分开了在所有的3d游戏或者动画中，光与阴影都是非常重要的一部分，阴影可以影响到很多东西，一个游戏，阴影可以说是分辨一个游戏画面的好坏。 这一章中涉及到：物体材质添加光源添加阴影添加阴影的受体在前面已经介绍过怎么样创建场景添加相机与物体，那么就直接贴创建场景的代码了<!doctype html>...原创 2018-05-03 22:13:12 · 624 阅读 · 0 评论 -
【three.js学习笔记】01 场景 相机 和 几何体框架
three.js有助于方便地利用webgl创建三维场景与动画，这是本人学习笔记的第一章，引入three.js远程简化版？：https://threejs.org/build/three.js three.min.js接近500k其实还是很大的 不知道这个为啥这么小 首先要引入three.js 创建一个作为显示窗口的canvas html:<!doctype html>...原创 2018-05-02 21:05:45 · 481 阅读 · 0 评论