<!--

最近要研究一下webgl,发现了webgl中文网(http://www.hewebgl.com/article/articledir/1)。边研究教程边做下记录

-->

three.js是WebGL开源框架,它能写出在浏览器上流畅运行的3D程序。

代码地址:https://github.com/mrdoob/three.js。

支持Webgl的浏览器很多,例如Chrome、FireFox、360安 全浏览器6.0等,而IE浏览器对Webgl标准的支持就不太好。

第一个框架

三大组建

在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)、相机(camera)和渲染器(renderer)。有了这三样东西,才能将物体渲染到网页中去。

var scene = new THREE.Scene();  // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度,也就是内容区的宽度
document.body.appendChild(renderer.domElement);

  渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的

添加物体到场景中

var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

  THREE.CubeGeometry是一个立方体,cubeGeometry的原型如下代码所示:

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)

  

渲染

渲染应该使用渲染器,结合相机和场景来得到结果画面。

function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
render();

  

渲染函数的原型如下:

render( scene, camera, renderTarget, forceClear )

renderTarget:渲染的目标,默认是渲染到前面定义的render变量中

forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。

渲染有两种方式:实时渲染和离线渲染 。

事先渲染好一帧一帧的图片,然后再把图片拼接成电影的。这就是离线渲染。

实时渲染:就是需要不停的对画面进行渲染,即使画面中什么也没有改变,也需要重新渲染。

其中一个重要的函数是requestAnimationFrame,这个函数就是让浏览器去执行一次参数中的函数,这样通过上面render中调用requestAnimationFrame()函数,requestAnimationFrame()函数又让render()再执行一次,就形成了我们通常所说的游戏循环了。

three.js初涉略(一)的更多相关文章

  1. cocos2d-js中jsc逆向为js攻略

    笔记: 主要发现有两个工具 存档记录一下 https://github.com/OEDx/cocos-jsc-endecryptor  python的 解密需要秘钥 推荐这个: https://git ...

  2. 系列3|走进Node.js之多进程模型

    文:正龙(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 之前的文章"走进Node.js之HTTP实现分析"中,大家已经了解 Node.js 是如何处理 HTTP 请求 ...

  3. python调用html内的js方法

    这方面资料不多,不懂html,不懂js,略懂python的我,稍微看了点html和js,好几天的摸索,终于测试成功了. PYQT+HTML利用PYQT的webview调用JS内方法 1.python调 ...

  4. MEAN stack 做网站【1】

    做一个小project,学习如何用MEAN技术栈来搭建网站. JavaScript新手,不足之处,请指出.(系统为win10) 搭建环境: 安装Node.JS (略过) 安装MySQL,MongoDB ...

  5. Ajax条用WebService 5星级

    转:http://www.cnblogs.com/frozenzhang/p/ajax.html 随笔- 2 文章- 0 评论- 5 $.ajax()调用webservice   常规请求基本格式 [ ...

  6. cordova安装中的坑

    1.安装android环境直接略过! 2.安装node.js直接略过! 3.安装cordova npm install -g cordova npm uninstall cordova  -g(这条是 ...

  7. autoprefixer安装或者里sass的$mixin处理浏览器前缀

    Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...

  8. 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Javascript你不知道的那些事!(数字计算篇-变态篇)无意中聊天发现的一些奇怪的事情

    javascript:alert(0.1 + 0.2) 如果看到这样一道题你会怎么思考了!大家肯定第一反应0.3,但是考虑到我已经这样问了!那么幼稚的答案我会专门写篇文章吗 然后人就开始折磨自己了会不 ...

随机推荐

  1. centos6修改nameserver

    1.直接修改/etc/resolv.conf,重启网卡 #service network restart 后发现并没有修改掉 2.直接修改ifcfg-eth0文件 /etc/sysconfig/net ...

  2. Blog 公用部分结构与class定义

    /*博客文章公用部分class与结构 common*/ /* 1.title-block //标题块 ├── border-danger //危险红 ├── border-info //普通蓝 └── ...

  3. JAVA 对象调用理解图

  4. requirejs代码结构分析

    一.函数入口函数. req = requirejs = function (deps, callback, errback, optional) { //Find the right context, ...

  5. mongodb数据库迁移

    如果遇到权限问题,终极解决办法:关掉权限! 如:assertion: 18 { ok: 0.0, errmsg: "auth failed", code: 18 }等错误

  6. 关于IOS音频的开发积累

    1.设置类别,表示该应用同时支持播放和录音 OSStatus error; UInt32 sessionCategory = kAudioSessionCategory_PlayAndRecord; ...

  7. [转]Android - 文件读写操作 总结

     转自:http://blog.csdn.net/ztp800201/article/details/7322110 Android - 文件读写操作 总结 分类: Android2012-03-05 ...

  8. 【转载】Mysql 查看连接数,状态

    转载地址:http://blog.csdn.net/starnight_cbj/article/details/4492555 命令: show processlist; 如果是root帐号,你能看到 ...

  9. chrome调试 JavaScript 脚本

    随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaSc ...

  10. 接口测试(二)—HttpClient

    使用HttpClient进行接口测试,所需要使用的相关代码 HttpClient进行接口测试所需jar包:httpclient.jar.httpcore.jar.commons-logging.jar ...