Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探
什么是Three.js
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。
上面摘自百度百科。依我来看就是一个在HTML5画布(canvas)上显示的3D引擎。如果你之前折腾过本地3D引擎,比如Steam,寒霜,那上手这个就非常简单了。
学习这个引擎难处有几点:第一,正如上面所说,没有比较系统的文档,只有一些大神写的Demo,对于一些js基础不好或者英语不好的童鞋来说简直不能历届;第二,一般人对游戏引擎里面的纹理、光源、材质等词不甚理解。第三,不晓得怎么去调试。
在开始正式介绍之前,可以先看看Demo,了解一下这个引擎能做什么。
官方网站上的例子:http://threejs.org/
GitHub上的例子:http://stemkoski.github.io/Three.js/
其中几个比较有特色的列一下(提提你们的胃口~)(都不要使用IE或基于IE的浏览器打开!推荐使用Chrome):
最基本的Hello World:http://stemkoski.github.io/Three.js/HelloWorld.html
调用你的摄像头:http://stemkoski.github.io/Three.js/Webcam-Texture.html
体感操作(你没有看错!):http://stemkoski.github.io/Three.js/Webcam-Motion-Detection-Texture.html
支持你的游戏手柄(XBox等):http://stemkoski.github.io/Three.js/Mesh-Movement-Gamepad.html
3D建模和方向键控制移动方向:http://stemkoski.github.io/Three.js/Model-Animation-Control.html
SkyBox和3个气泡渲染(可见Three.js的渲染真心不赖):http://stemkoski.github.io/Three.js/Metabubbles.html
3D红蓝偏光的名车展(打开前自备偏光镜):http://threejs.org/examples/webgl_materials_cars_anaglyph.html
帅爆了的元素周期表:http://threejs.org/examples/css3d_periodictable.html
跑车游戏:http://hexgl.bkcore.com/
有没有和小伙伴们都惊呆了?——至少我是的。没有使用Flash,没有大量的图片拼接,绝大多数的特效靠代码实现,包括文章配图那款SS跑车,AMAZING!
Three.js环境的准备
正文现在开始。
我整个例子有不少地方参考的是http://www.hiwebgl.com/?p=1058。向这样的译者表示绝对的敬意!(话说原文是日文的,我这个看英语文档无压力的无论如何也受不鸟日文啊……)
Three.js从GitHub库中获取:https://github.com/mrdoob/three.js/,下载请点击在页面右边的“Download ZIP”按钮。比较齐活的例子在:https://github.com/stemkoski/stemkoski.github.com可以下载。
Three.js至少需要build目录下的three,js,three.min.js是前者的压缩版。docs下的index.html是器官方文档(我还没细致看过,质量怎么样没法说)。example目录下都是例子,值得一提的是,这些例子必须要挂到服务器里面预览,本地打开会有问题,IIS或者Tomcat或者Apache都可以(以后会说到为什么)。
运行第一个Three.js
第一个例子也用来确定一下Three.js是否能正常运行。在WebRoot下建一个js文件夹,把three,js拷贝进去(three.min.js也行)。
在WebRoot下建一个index.html,内容如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three.js チュートリアル1</title> <script src="Three.js"></script> <style type="text/css"> div#canvas-frame {border: none;cursor: pointer;width: 600px;height: 600px;background-color: #EEEEEE; } </style> <script>var renderer;function initThree() {width = document.getElementById('canvas-frame').clientWidth;height = document.getElementById('canvas-frame').clientHeight;renderer = new THREE.WebGLRenderer({antialias : true});renderer.setSize(width, height);document.getElementById('canvas-frame').appendChild(renderer.domElement);renderer.setClearColorHex(0xFFFFFF, 1.0);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);camera.position.x = 100;camera.position.y = 20;camera.position.z = 50;camera.up.x = 0;camera.up.y = 0;camera.up.z = 1;camera.lookAt({x : 0,y : 0,z : 0});}var scene;function initScene() {scene = new THREE.Scene();}var light;function initLight() {light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);light.position.set(100, 100, 200);scene.add(light);}var cube;function initObject() {cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), //形状の設定new THREE.MeshLambertMaterial({color : 0xff0000}) //材質の設定);scene.add(cube);cube.position.set(0, 0, 0);}function threeStart() {initThree();initCamera();initScene();initLight();initObject();renderer.clear();renderer.render(scene, camera);} </script> </head><body οnlοad="threeStart();"><div id="canvas-frame"></div> </body> </html>
执行的结构应该是这样,Three.js也比较大,网的质量可能不好,看不到效果的多刷几次:http://tonythegod.eu5.org/three.js/1/demo1.html
自二个例子:一个可控制的长方体
最后的效果(没看到效果多刷几次):http://tonythegod.eu5.org/three.js/1/demo2.html
我没有给李兴华打广告……只是这本书在我写Demo时就在我手边,然后就当了模特了~
贴出主要的代码,附上一些主要的注释:
<!doctype html> <html lang="en"> <head> <title>Template (Three.js)</title> <meta charset="utf-8"> <meta name="viewport"content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link rel=stylesheet href="css/base.css" /> <!-- 这个样式表主要写了body的背景为#F5F5F5,就是整个网页的背景颜色 --> </head><body><script src="../js/Three.js"></script> <!-- 这个是Three.js引擎的js --><script src="../js/Detector.js"></script><script src="../js/Stats.js"></script><script src="../js/OrbitControls.js"></script><script src="../js/THREEx.KeyboardState.js"></script><script src="../js/THREEx.FullScreen.js"></script><script src="../js/THREEx.WindowResize.js"></script><script src="../js/Texture.js"></script> <!-- 一些js工具类,现在不深究 --><div id="ThreeJS"style="z-index: 1; position: absolute; left: 0px; top: 0px"></div> <!--这个div就是整个画布 --><script>// // MAIN ////// standard global variablesvar container, scene, camera, renderer, controls, stats; <!-- 几个变量代表的含义:容器、场景、摄像机(视角)、渲染器、控制装置 -->var keyboard = new THREEx.KeyboardState();var clock = new THREE.Clock();// custom global variablesvar cube;// initializationinit();// animation loop / game loopanimate();///// FUNCTIONS /////function init() { <!-- 初始化 -->///// SCENE /////scene = new THREE.Scene(); <!-- 定义场景 -->// CAMERA //// set the view size in pixels (custom or according to window size)// var SCREEN_WIDTH = 400, SCREEN_HEIGHT = 300;var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;// camera attributesvar VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;// set up cameracamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); <!-- 定义视角 -->// add the camera to the scenescene.add(camera);// the camera defaults to position (0,0,0)// so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origincamera.position.set(-400, 150, 200); <!--视角的位置 -->camera.lookAt(scene.position);//// RENDERER ////// create and start the renderer; choose antialias setting.if (Detector.webgl)renderer = new THREE.WebGLRenderer({antialias : true});elserenderer = new THREE.CanvasRenderer();renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);// attach div element to variable to contain the renderercontainer = document.getElementById('ThreeJS');// alternatively: to create the div at runtime, use:// container = document.createElement( 'div' );// document.body.appendChild( container );// attach renderer to the container divcontainer.appendChild(renderer.domElement);// EVENTS //// automatically resize rendererTHREEx.WindowResize(renderer, camera);// toggle full-screen on given key pressTHREEx.FullScreen.bindKey({charCode : 'm'.charCodeAt(0)});//// CONTROLS ////// move mouse and: left click to rotate, // middle click to zoom, // right click to pancontrols = new THREE.OrbitControls(camera, renderer.domElement); <!-- 设置控制,这里只有鼠标操作 -->///// STATS /////// displays current and past frames per second attained by scenestats = new Stats();stats.domElement.style.position = 'absolute';stats.domElement.style.bottom = '0px';stats.domElement.style.zIndex = 100;container.appendChild(stats.domElement);///// LIGHT /////// create a lightvar light = new THREE.PointLight(0xffffff); <!-- 设置光源 -->light.position.set(0, 250, 0);scene.add(light);// CUBEvar cubeGeometry = new THREE.CubeGeometry(260, 35, 185, 1, 1, 1); <!-- 定义一个立方体,就是那本书的模型 -->var cubeMaterialArray = [];cubeMaterialArray.push(new THREE.MeshBasicMaterial({map : new THREE.ImageUtils.loadTexture('img/side-up.png') <!-- 给每一面上贴图,下同 -->}));cubeMaterialArray.push(new THREE.MeshBasicMaterial({map : new THREE.ImageUtils.loadTexture('img/side-up.png')}));cubeMaterialArray.push(new THREE.MeshBasicMaterial({map : new THREE.ImageUtils.loadTexture('img/up.png')}));cubeMaterialArray.push(new THREE.MeshBasicMaterial({map : new THREE.ImageUtils.loadTexture('img/down.png')}));cubeMaterialArray.push(new THREE.MeshBasicMaterial({map : new THREE.ImageUtils.loadTexture('img/side-right.png')}));cubeMaterialArray.push(new THREE.MeshBasicMaterial({map : new THREE.ImageUtils.loadTexture('img/side-left.png')}));var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);cube = new THREE.Mesh(cubeGeometry, cubeMaterials);cube.position.set(0, 0, 0); <!-- 立方体放置的位置 -->scene.add(cube);}function animate() {requestAnimationFrame(animate);render();update();}function update() {// delta = change in time since last call (in seconds)var delta = clock.getDelta();controls.update();stats.update();}function render() {renderer.render(scene, camera);}</script></body> </html>
其实学习Three.js大多是这样,因为缺少相应的文档,看大牛们写的注释是最快上手的办法。
这次就先到这儿,下次再说怎么一点点在画布上作画。
本文转载自tony的小站: http://tonythegod.eu5.org/three-js-study-notes-study-on-three-js/ | Tony的工作站
http://www.cnblogs.com/xufeiyang/articles/3181369.html
Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探相关推荐
- Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探(转)
什么是Three.js three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包 ...
- Three.js学习笔记---我和小伙伴都惊呆了
什么是Three.js three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包 ...
- JS学习笔记——入门基础知识总结
JS入门基础知识总结1 前言 基础背景知识 一.产生历史: 二.特点: 三.应用方向: 四.Javascript组成: JavaScript书写使用方式 一.行内式(了解即可,项目中不使用,日常练习尽 ...
- ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
- backbone.js学习笔记
backbone.js学习笔记 之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
- node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一 内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- html 流程控制,HTML5独家分享:原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句 常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
最新文章
- 「AI不惑境」残差网络的前世今生与原理
- CentOS7最小化安装配置IP
- 阿里云SLB(负载均衡)获取真实ip地址, log_format配置
- PHP扩展CURL的用法详解
- Zabbix触发器_action动作及模板应用(二)
- hihoCoder 1014trie树(字典树)
- [二叉树|深搜|dfs] leetcode 404 左叶子之和
- git小乌龟拉取分支代码
- 如何清空Matlab命令行窗口
- CleanMyMac X的免费版电脑系统瘦身工具
- html 公式编辑器,基于web的在线复杂公式编辑器的实现
- 合肥工业大学计算机和信息学院,合肥工业大学计算机与信息学院
- UE4 二维地图的缩放与拖拽操作
- 阿里巴巴编码规范技能认证考试心得与试题
- Opegnl ES之四边形绘制
- java实训感想6000字_JAVA论文6000字:无线校园
- ORA-01005: null password given; logon denied
- 视频流中实时人脸检测
- 访问者模式-好人打贱人
- Sql Server 中 mdf和ldf
热门文章
- Entity Framework Code First关系映射约定
- 友元程序集(C# 和 Visual Basic)
- [cocos2d-x]游戏开发系列教程-搭建cocos2d-x的windows开发环境
- 单寄存器加载与存储指令
- ospf特殊区域,默认路由,汇总
- 2013年新疆中小学教师计算机水平考试机试题(复习版),2013年新疆中小学教师计算机水平考试笔试题(复习版8套含答案)...
- Android中ActivityManager学习笔记
- Java动态调用方法
- JAVA线程池(ThreadPoolExecutor)源码分析
- 玩转数据结构从入门到进阶三