现在学习也不晚

本人技术交流群:585582495,本人技术交流群:585582495,本人技术交流群:585582495,重要事情说三遍...

排序:
默认
按更新时间
按访问量

恭喜本人的《Three.js基础入门》上线达人课!

本人学习Three.js也有一年多了,接触这个库也两年左右,起初根本没有仔细的学习,想做一些绚丽的东西都无法实现。没想到学习一个框架能记这么多的笔记,从系统的学习Three.js到现在,大大小小的笔记也写了一百多篇了。从学习过来发现Three.js真的内容很多,但是看到现在能制作的东西,自己没有白...

2018-07-02 15:35:43

阅读数:289

评论数:0

WebGL相关框架及网站

(1)three.js 官网:https://threejs.org/ 中文文档:http://techbrood.com/threejs/docs/ (2)RequestAnimationFrame.js(requestAnimationFrame()函数兼容性组件) github地址:http...

2017-07-04 14:49:38

阅读数:773

评论数:3

持续更新,本人感觉需要的网站

1.程序员相关书籍学习网站地址,免费的编程中文书 2.jquery源码查看网址 3.nodejs的express配合websocket使用 4.判断鼠标移入移出时的位置案例 5、控制元素视差滚动效果 6、angular中文文档 7、webpack的配置 8、ionic官方网站 9、ionic中文翻...

2016-11-02 01:27:14

阅读数:844

评论数:1

indexedDB 浏览器本地存储

indexedDB为何物 在使用一个技术之前,先搞清楚它是什么,这对你的理解很重要,从DB就可以看出,它肯定是一个数据库,而说到数据库,有两种不同类型的数据库,就是关系型数据库和非关系型数据库,关系型数据库如Mysql、Oracle等将数据存储在表中,而非关系型数据库如Redis、MongoDB...

2018-07-26 00:28:27

阅读数:42

评论数:0

我看好WebGL

未来都是未知的,虽然我们无法确定未来的科技会发展成什么样,人们的生活会发生什么样的变化,甚至我们以后使用的手机会变成什么样都是无法确定。虽然我们无法预测长远的未来,但是,我们能够看清将会发生的一些变化,这其中就就有HTML5。 HTML5 HTML5的优势现在已经很明显,在这里先列几个...

2018-07-03 18:18:20

阅读数:121

评论数:3

102 Three.js 使用几何体生成拱门形状

Three.js的几何体已经能够创建很多的几何体模型,但是,远远还达不到特殊需求的几何体模型。今天,我就记一下如何制作特殊几何模型的感想。 这是我制作的一个简单的拱门形状的几何体。这个创建可以使用BSP插件创建两个模型一个立方体和一个圆柱进行求余。但是,今天我们不用插件,自己手动实现。接下来...

2018-06-28 22:37:44

阅读数:135

评论数:2

101 Three.js 场景世界坐标和平面二维坐标互转

平面坐标转场景坐标 这种转换由于是由2D转换为3D,所以转换过于以后,平面的坐标在场景坐标内的位置应该是从相机的near到far的一条直线。所以我们无法确定单个点的坐标,一般都是使用当前2D平面的坐标生成一条射线raycaster,来检测当前射线是否和模型产生相交,而获取到当前模型上的位置以及相...

2018-06-25 10:48:30

阅读数:315

评论数:2

10 Physijs暂停物理模拟和手动更新模型的位置旋转(Three.js的物理引擎)

设置摩擦力和弹性 我们可以在Physijs里面直接使用Three.js的材质,但是这样无法设置物体的摩擦力和弹性。 所以,我们在创建材质的时候需要使用Physijs.createMaterial方法来进行材质创建,需要额外配置两个参数:friction(摩擦系数)和restitution(弹性...

2018-05-30 23:31:44

阅读数:154

评论数:2

09 Physijs约束物体的移动范围(Three.js的物理引擎)

点约束 如果添加了一个对象,那这个对象会随着指定的点产生荡秋千的效果,超出不了被添加时距离点的距离。 如果添加了两个对象,那这两个对象的距离超出不了添加场景时的两个物体的距离。 var constraint = new Physijs.PointConstraint( physijs...

2018-05-30 00:42:28

阅读数:173

评论数:1

08 Physijs固定一个物体(Three.js的物理引擎)

有两种方法可以使对象冻结或不可移动。如果对象始终是静态的,例如地面,则可以在创建网格时把第三个参数设置为0: new Physijs.BoxMesh( geometry, material, 0 ) 在任何情况下,模型都是静止的。 第二种情况,就是它只是在某些情况下是静止的,而在其它情况...

2018-05-29 23:15:20

阅读数:110

评论数:1

07 Physijs的复合对象(Three.js的物理引擎)

复合对象是向场景添加复杂几何图形的有效方式,并且通过将Physij中的可用形状拼凑在一起以创建更大,更复杂的几何体来创建复合形状。 在three.js中,您可以将这些子几何添加到父对象中,例如: var parent = new THREE.Mesh( new THREE.BoxGeome...

2018-05-29 22:37:33

阅读数:59

评论数:1

06 Physijs的碰撞检测(Three.js的物理引擎)

碰撞检测当前监听当前碰撞回调来获取,回调事件内有返回三个参数,再加上this:this代表当前的监听的对象,和碰撞的对象,两个模型之间的力差(模型之间冲击时的速度)和旋转力之间的力差: var mesh = new Physijs.SphereMesh( new THREE.Sphe...

2018-05-29 18:42:48

阅读数:214

评论数:0

05 Physijs相关回调事件(Three.js的物理引擎)

场景更新 由于Physijs运行在与主应用程序不同的线程上,因此无法保证每次调用时它都能够迭代场景scene.simulate。因此,您可以将事件监听器附加到物理模拟运行时触发的场景。 var scene = new Physijs.scene; scene.addEventListene...

2018-05-29 18:07:25

阅读数:96

评论数:0

04 Physijs场景相关配置(Three.js的物理引擎)

实例化场景时,你可以通过配置一些选项: var scene = new Physijs.Scene({ reportsize: 50, fixedTimeStep: 1 / 60 }); 场景构造函数参数 REPORTSIZE 默认值为50,作为优化使用,指定当前场景的模型的个数。...

2018-05-29 17:21:54

阅读数:88

评论数:0

03 Physijs的基本物理模型(Three.js的物理引擎)

Physijs现在支持9种模型: Physijs.PlaneMesh匹配Three.js中的没有厚度的平面模型 Physijs.BoxMesh匹配Three.js中的THREE.BoxGeometry立方体模型 Physijs.SphereMesh匹配Three.js中的THREE.Spher...

2018-05-28 23:35:58

阅读数:232

评论数:1

02 Physijs基本设置(Three.js的物理引擎)

简介 Physijs开发时的目标就是尽可能保持简单和用户友好。普通物理引擎的使用有可能使人望而却步,有想当多的复杂配置和选项,让人感觉不知所措。而Physijs则将所有额外的逻辑抽象出来,以便您可以专注于项目的其余部分。 基础使用 它是Three.js的一个插件,是一个友好的菜鸟级Web...

2018-05-21 23:42:08

阅读数:135

评论数:1

01 Physijs简介(Three.js的物理引擎)

简介 Physijs作为Three.js的物理引擎插件。为Three.js提供一套非常简单易于使用的物理引擎。Three.js如此流行的原因之一就是因为它对于新手来说非常容易上手的图形引擎。Physijs也坚持了相同的理念,使得对于物理效果的制作变得非常的简单。 工作原理 Physijs...

2018-05-18 15:45:48

阅读数:172

评论数:1

100 Three.js使用VideoTexture实现视频Video更新纹理

案例查看地址: 简介 既然我们可以使用canvas元素创建纹理,Three.js也给我们提供了可以实现video创建纹理的方法。我们通过Three.js提供的VideoTexture来实现创建视频纹理。 案例实现 首先还是需要有一个video标签,我们将video放到左下角: ...

2018-05-10 23:28:42

阅读数:569

评论数:4

99 Three.js使用canvas更新纹理

案例查看地址: 简介 Three.js可以直接将canvas画布上的图像作为纹理绘制到模型上面。下面我们说一下如何实现 案例实现 首先,我们创建了一个canvas对象,并使用js在上面循环绘制图像。在上面绘制了一个火在燃烧的动画。 <ca...

2018-05-10 22:23:41

阅读数:200

评论数:1

98 Three.js 通过设置纹理属性来修改纹理贴图的位置和大小

案例查看地址: 简介 前几节我们也了解了纹理一些用法,在这一节,我们进行自定义UV映射。并且还可以查看到wrapS和wrapT两个配置项不同的区别。 实现原理 要实现通过Three.js改变纹理的UV映射,我们需要用到两个属性:matrixAutoUpdate和matrix。通过设置这...

2018-05-09 21:53:52

阅读数:377

评论数:1

提示
确定要删除当前文章?
取消 删除
关闭
关闭