摘要: 在使用Three.js中 使用for循环加载 出现的 BUG 直接上代码: js var objArray = ["1","2","3","4"]; for(var i = 0; i 阅读全文
posted @ 2018-09-13 15:09 可爱的黑精灵 阅读(2479) 评论(0) 推荐(0)
摘要: 本篇简单介绍 中矩阵变换及两种旋转表达方式。 矩阵变换 使用矩阵来保存 的变换信息。 矩阵变换的基础 平移变换 比例变换 旋转变换 绕 轴旋转 绕 轴旋转 绕 轴旋转 中的矩阵 我们可以看到正如上面的公式 的平移 所以elements[12]、elements[13]、elements[14]依次为 阅读全文
posted @ 2018-09-13 15:04 可爱的黑精灵 阅读(6151) 评论(0) 推荐(0)
摘要: 本篇介绍 类中的 方法。 中类似的 方法可以类推。 问题提出 我想实时的更新材质(material)的贴图(map),所以我在 中为 赋值并将 设为 。 后来跑着跑着页面挂了,我发现这个赋值操作很占 ,我在找解决方案的时候发现这玩意不需要赋值操作!!! 设为 它会实时的检测贴图是否更新,并更新贴图。 阅读全文
posted @ 2018-09-13 15:03 可爱的黑精灵 阅读(3305) 评论(2) 推荐(1)
摘要: 本篇介绍 性能优化的若干方法。(个人拙见) three.js性能优化 尽量重用Material和Geometry 这里以Material和Geometry为例(使用比较频繁) js for (var i = 0; i 0 && (+new Date() start 0){ setTimeout(ar 阅读全文
posted @ 2018-09-13 15:01 可爱的黑精灵 阅读(14851) 评论(0) 推荐(2)
摘要: Three.js学习笔记 本篇介绍物理引擎库Physijs,通过物理引擎我们可以向场景添加重力、摩擦、约束条件或是碰撞检测等令人激动的效果。 Physijs是基于著名的物理引擎ammo.js。 learn more from physijs step1 导入库文件 step2 创建带有物理效果的场景 阅读全文
posted @ 2018-09-13 14:59 可爱的黑精灵 阅读(1653) 评论(0) 推荐(0)
摘要: Three.js学习笔记 本篇介绍粒子、粒子系统和精灵。 粒子 (粒子)和大多数的 对象一样都属于 对象的扩展。 创建一个粒子只需要传入一个材质参数。材质可为 或是 但是这是相对于 渲染器,使用 创建粒子并没有效果。 粒子系统 如果使用 则需要 。 创建一个粒子系统需要传入几何体和材质两个参数。 精 阅读全文
posted @ 2018-09-13 14:58 可爱的黑精灵 阅读(1167) 评论(0) 推荐(2)
摘要: Three.js学习笔记 本篇介绍纹理的使用。 纹理 我们可以在材质中加载纹理,在 的`map`属性中。 前面用到的 已经被摒弃。 纹理的加载时异步的,所以需要注意。支持 、`GIF JPEG`输入格式。 最好使用正方形图片,保证长宽都是2的次方大小。 凹凸贴图 凹凸贴图是一张灰度图,上面有像素的相 阅读全文
posted @ 2018-09-13 14:58 可爱的黑精灵 阅读(3737) 评论(0) 推荐(0)
摘要: Three.js学习笔记 本篇使用three.js的扩展库THREEBSP来操作标准的几何体来创造出新的几何体。 learn more from ThreeBSP 由于three.js提供的标准几何体有限,自定义几何体的构造比较麻烦。所以我们也许可以使用three.js的扩展库ThreeBSP来构造 阅读全文
posted @ 2018-09-13 14:57 可爱的黑精灵 阅读(747) 评论(0) 推荐(0)
摘要: Three.js学习笔记 本篇介绍 (模型)及相关问题。 格式的模型较为通用,较为适合用于3D软件互导。所以我们以 模型以及其材质文件 为例。 、`CTM VTK js`文件。 添加OBJ模型 js //这里的 是我从3Dmax新鲜导出的一个简陋的 模型 //比较基本,没有材质 function l 阅读全文
posted @ 2018-09-13 14:56 可爱的黑精灵 阅读(802) 评论(0) 推荐(0)
摘要: Three.js学习笔记 本篇介绍 的创建和绑定。完成简单的骨骼动画。 初始化数据、创建骨骼 这里我们使用 来创建一段几何图形模拟具有骨骼的物体。 你可以比作人的身体而我们创建的 骨骼以及 骨架就相当于人的脊椎。 js //每段高度,这里指骨骼长度 var segmentHeight = 6; // 阅读全文
posted @ 2018-09-13 14:55 可爱的黑精灵 阅读(1080) 评论(0) 推荐(1)
摘要: Three.js学习笔记 本篇上一篇介绍的 和`curves`(曲线)实现在canvas画画。 目前只支持画线。 添加画板 我们可以添加一个 当做画板,要足够的大。 添加画笔 然后添加一个 当做画笔。利用 的`intersectObjects() point`属性获取当前相交的交点坐标。 js va 阅读全文
posted @ 2018-09-13 14:55 可爱的黑精灵 阅读(1789) 评论(0) 推荐(0)
摘要: Three.js学习笔记 本篇介绍一下高级光源,镜头眩光。镜头眩光在生活中比较常见,比如说当你直接朝着太阳拍照的时候就会出现镜头眩光。 大多数情况下要避免这种情况的发生,但是在三维场景和游戏中却是一种很好的效果。让场景更加的真实。 同时也会简单介绍一下相机控件。 渲染器设置 要生成阴影需要将渲染器的 阅读全文
posted @ 2018-09-13 14:53 可爱的黑精灵 阅读(783) 评论(0) 推荐(0)
摘要: Three.js学习笔记 本篇为Raycaster(射线)的使用。 Raycaster Constructor Main Properties :射线放射的位置 :方向向量,应该是标准化的 :能投射的最近距离 : 能投射的最远距离 拾取物体 我们可以定义一个由mouse(鼠标)发出的射线,从而来拾取 阅读全文
posted @ 2018-09-13 14:52 可爱的黑精灵 阅读(3809) 评论(0) 推荐(0)
摘要: Three.js学习笔记 本篇介绍一下阴影的生成。 渲染器设置 要生成阴影需要将渲染器的 开启。 设置 的样式 添加光源 这里的光源需要是能生成阴影的光源。比如说是 、`DirectinalLight castShadow` 属性的高级光源。 和`PointLight SpotLight`为例。 添 阅读全文
posted @ 2018-09-13 14:48 可爱的黑精灵 阅读(1425) 评论(1) 推荐(0)
摘要: Three.js学习笔记 本篇简单列举一下three.js的核心对象。 scenes scene 三维场景。 Constructor Main Properties :定义雾影响场景渲染 fog 受雾影响的三维场景。 Constructor Main Properties :定义雾的颜色 :定义雾效 阅读全文
posted @ 2018-09-13 14:47 可爱的黑精灵 阅读(389) 评论(0) 推荐(0)
摘要: Three.js学习笔记 本篇为基础扩展部分(学习使用插件扩展你的三维场景) WebGL支持 目前绝大部分主流浏览器是支持WebGL的,但是IE的大部分版本并不支持WebGL。 所以如果你想使用旧版本的IE浏览器,可以通过下载 的`Google Chrome Frame`插件 也可以使用 同时对于浏 阅读全文
posted @ 2018-09-13 14:46 可爱的黑精灵 阅读(480) 评论(0) 推荐(0)
摘要: Three.js学习笔记 本篇为基础部分(学习如何快速的创建一个三维场景) three.js是什么 Three.js是一个 `JavaScript`库。 three.js能干什么 创建简单或是比较复杂的三维图形并应用丰富多彩的纹理和材质。 添加五光十色的光源。 在3D场景中移动物体或是添加脚本动画。 阅读全文
posted @ 2018-09-13 11:56 可爱的黑精灵 阅读(334) 评论(0) 推荐(0)