three.js

由浅入深科普最常用的八种HTML 5动效制作手法

12-09
  一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验;一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造. 近两年,小到loading动画,表单动效,大到各式各样H5运营页的炫酷展现,"动效设计"一词可谓是火遍大江南北,而动效设计早已成为一名合格设计师必需有所知晓的领域.本文将通过一些案例,和大家一同挖掘几种常见的H5动效制作手法. 我们由浅入深来挖掘这动效制作的秘密,一个入门级的小问题:看上图这几个动画例子,大家是否能说出这动画是如何制作出来的呢?而又是如何在网页之上

21. WebAR那些事: ARDemo之《天马行空》

12-09
紧接上文 使用WebAR技术,开发者只需40行代码,即可搭建一个ARDemo.同时我们也抛出了一个问题,如果把地球模型,换成一个可以动的小猫小狗,是不是就更加接近虚拟现实了? 本次Demo所需二维码 本次demo已经集成到APK中,用户可以点击<天马星空>来体验. 天马星空 环境准备 Demo使用r82版本,向下兼容 Three.js 到http://www.threejs.org下载最新源码,这里使用three.min.js作为渲染引擎. WebVR.js WebVR的工具库,用于切换VR状

20. WebAR那些事: 一个40行的ARDemo

12-07
紧接上文 WebVR+Three.js可以快速高效的搭建VR场景,降低了初学者的准入门槛,节省多平台重复开发,开始了H5在VR的新时代. 本次Demo所需二维码 用户可以本地启动HTTP服务,将URL填写到播放路径 本次demo已经集成到APK中,用户可以点击<AR地球>来体验 AR地球 环境准备 Demo使用r82版本,向下兼容 Three.js 到http://www.threejs.org下载最新源码,这里使用three.min.js作为渲染引擎. WebVR.js WebVR的工具库,

基于Three.js插件制作360度全景图_javascript技巧

11-29
这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"></script> <script src="js/photo-sphere-viewer.min.js"></script> 2.初始化一下,(具体各种参数配置根据情况而定) var PSV = new PhotoSphereViewer({ // 全

19. Html5的局: 手把手写一个100行的VR程序

11-07
紧接上文 WebVR扩展了WebGL的标准,增加了HMD.PS等组件,让开发者可以在H5上开发VR程序.高级VR设备往往拥有了比手机更高精度的传感器.显示器.GPU等,让用户可以更加真实的感受虚拟世界.本节是<Html5的局>最后一节,我们手把手的写一段VR代码,感受WebVR的便捷. 本次Demo所需二维码 用户可以本地启动HTTP服务,将URL填写到播放路径 3D地球 环境准备 Three.js 到http://www.threejs.org下载最新源码,这里使用three.min.js作

18. Html5的局: 用WebVR来解释小米VR眼镜

10-31
紧接上文 WebVR使用跨平台H5技术,降低了开发者的技术门槛,提升了开发效率,我们来做个VR的Demo如何?本周小米发布了VR头盔,头盔还自带芯片,那又是什么呢? 本次Demo二维码 依旧800k,这次可以支持URL在线播放WebVR的程序了. WebGL+WebVR+Three.js JS常见的3D引擎框架 Three.js 浏览器常见的3D动画引擎,居于WebGL的渲染技术,整合了常见的精灵.纹理.异步加载.动画.场景.骨骼等等,无需安装IDE,直接在浏览器上开发即可,目前网上已经有许多在

javascript-three.js如何在加载obj后改变模型?

10-28
问题描述 three.js如何在加载obj后改变模型? three.js加载obj人物模型后,如何修改任务的身高.腰围之类的数据? 解决方案 http://blog.csdn.net/awnuxcvbn/article/details/50736936

HTML 5实现多人实时3D游戏

08-23
六周前我们想试下用HTML5实现一个twitch3D游戏是否可行.最终我们完成了几个游戏且很意外我们所达成的效果. 你可以试下其中一个游戏:Air Hockey 图形 目前多数浏览器对WebGL的支持已经很好,three.js是对使用WebGL很有用的库.它提供了简洁的API,内建 的实用功能,通信模块等,其缺点是-文档很少.不过你可以通过很多现存例子来学习如何实现你所需要的功能. 一些例子使用了 state.js 和 dat.GUI 来监控频帧和修改设置,这两个库都是非常有用的.dat.GUI

Three.js学习之网格_javascript类库

08-10
前言 小编之前发布过关于几何形状和材质,相信大家看过学习之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(ParticleSystem)等.创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色.纹理等信息. 1.创建网格 在前几篇中,我们学习了如何创建几何形状与材质,而网格的创建非常简单,只要把几何形状与材质传入其构造函数.最常用的物体是网

Three.js学习之几何形状_javascript类库

08-01
1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值.其构造函数是: THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments) width:x方向上的长度 height:y方向上的长度 depth:z方向上的长度 widthSegments:x方向上的分段数(可选,缺省值1) heightSegments:y方向上的分段数(同

Three.js学习之正交投影照相机_javascript类库

08-01
前言 Three.js是一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SVG标签的渲染器,调试建议使用Chrome或者Firefox. 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机. 2.两种相机的区别与适用范围 正交投影:   透视投影:   正交投影就像数学课上画的:而透视投影有一个基本点,就是远处的物体比近处的物体小,远大近小. 对于制图.建模软件通

Three.js学习之文字形状及自定义形状_javascript类库

08-01
1.文字形状 说起3d文字想起了早年word里的一些艺术字: 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helvetiker字体为例. 引用: <script type="text/javascript" src="你的路径/helvetiker_regular.typeface.json"></script> TextGeometry的构造函数是: THREE.TextG

10款最佳HTML5绘图工具

06-11
  HTML5无疑是当前最受宠的一项技术,每个web设计者都在热烈的讨论这种神奇的标记语言的兴起.HTML5是一种学起来毫不费力的标记语言,但它却能提供迷人的.富有艺术性的特征,帮助web设计人员完成他们的构思想象.HTML5对于一个设计人员来说能毫不费力的理解,轻松的掌握. 草绘和制图是设计工作者工作中一个重要的特征.HTML5将会这方面显露出不可限量的前途. 今天,我给web设计人员收集了几款最好的HTML5绘图或涂鸦工具.这些绘图工具大多数是用HTML5画布(Canvas)实现的,部分辅以

使用three.js 画渐变的直线_其它

06-05
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页上看到许多精彩的演示.不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面. http://github.com/mrdoob/three.js/ 我们来看实例吧 <!DOCTYPE html> <html> <head>

javascript-three.js中如何旋转物体position坐标系

02-22
问题描述 three.js中如何旋转物体position坐标系 在three.js中导入了外部创建的几何体,我想使物体本身的坐标系围绕Y轴旋转45度: object.rotation.y=Math.PI/4; object.position.x=1; 但是旋转后物体的坐标并没有变化,即物体的世界坐标还是(1,0,0).请问我改如何实现这种想法,以上程序错误在哪里?谢谢大家的解答. 解决方案 我找到解决方案了,分享给大家,rotation改变的是子对象的坐标系,但是不改变本身的坐标系角度,所以想要

javascript-three.js r71版本和r75版本obj模型加载问题

01-29
问题描述 three.js r71版本和r75版本obj模型加载问题 three.js以前一直用的是r71版本的后来发现更新到了75果断down下来放到了项目里. 但是发现不仅obj模型加载的方式并且在场景里的渲染效果也发生了变化.同样的render 71: 75:' 渲染效果发生了明显的变化. 查看了一下源码,未果. 本着求真的精神,求赐教.

20143D WEBGL的运用网页设计的新趋势

01-03
  这么多年以来,网页似乎都停留在2D的世界.2012年末开始到整个2013年,涌现出非常多采用CSS 3D变形和Parallax(视觉差,通过鼠标滑动让网页上不同层次的内容以不同的速率位移而形成一种层次感)效果的网站,让这个2D的网络世界出现了丰富的层次和纵深感.但是真正的3D(除了flash实现的)似乎没有成为网页设计师的工具,不过这种情况应该会在2014年有所改变. 目前在HTML里实现无插件3D内容呈现的技术就是WebGL,这个技术其实并不复杂,但是之前由于缺乏浏览器的支持而一直没能被广