前面学习了一些webgl的基础知识，现在就用一下three.js写一个小例子，记录一下学习的过程。

效果图：

1.去github下载three.js，然后将它加载到网页中

  1. <script src="js/three.js"></script>

2接着就该写一下参数了，主要的四大组件一个不能少

2.1生成“场景”组件

  1. var scene = new THREE.Scene(); 

2.2生成“相机”组件

  1. var camera = new THREE.PerspectiveCamera(45 , window.innerWidth/window.innerHeight, 1, 1000); 

四个参数

第一个参数：是夹角

第二个参数：宽高比

第三个参数：最近距离

第四个参数：最远距离　　

2.3生成“渲染器”组件

  1. var renderer = new THREE.WebGLRenderer();

因为渲染器有许多种，按需求生成

2.4生成“几何体”组件　

  1. var geometry = new THREE.CubeGeometry(2,2,2);

这里生成了一个立方体，同样也可以生成多种几何体

3.最后渲染出图形

  1. function render(){
  2.         //add animation
  3.         requestAnimationFrame(render);
  4.         //rotating
  5.         cube.rotation.x += 0.01;
  6.         cube.rotation.y += 0.01;
  7.         //renderer cube
  8.         renderer.render(scene,camera);
  9.     }

其中requestAnimationFrame是新的方法，也可以用setTimeout 代替

详细代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="js/three.js"></script>
  7.  
  8. </head>
  9. <body>
  10. <script>
  11.     //create scenc
  12.     var scene = new THREE.Scene();
  13.     //create Camera
  14.     var camera = new THREE.PerspectiveCamera(45 , window.innerWidth/window.innerHeight, 1, 1000);
  15.     //create renderer
  16.     var renderer = new THREE.WebGLRenderer();
  17.     //clean renderer color
  18.     renderer.setClearColor('#FFFFFF');
  19.     //set renderer size
  20.     renderer.setSize(window.innerWidth,window.innerHeight);
  21.     //put rendererDom into body
  22.     document.body.appendChild(renderer.domElement);
  23.     //create geometry
  24.     var geometry = new THREE.CubeGeometry(2,2,2);
  25.     //create naterial
  26.     var material = new THREE.MeshBasicMaterial({color:0xff0000});
  27.     //create cube
  28.     var cube = new THREE.Mesh(geometry,material);
  29.     //put cube into scene
  30.     scene.add(cube);
  31.  
  32.     //Point of view see the cube
  33.     camera.position.z = 10;
  34.  
  35.     function render(){
  36.         //add animation
  37.         requestAnimationFrame(render);
  38.         //rotating
  39.         cube.rotation.x += 0.01;
  40.         cube.rotation.y += 0.01;
  41.         //renderer cube
  42.         renderer.render(scene,camera);
  43.     }
  44.     render();
  45. </script>
  46. </body>
  47. </html>

　　

学习资料：

[1]:WebGL中文网：http://www.hewebgl.com

[2]:three.js在Github地址：https://github.com/Billshuai/three.js

[3]:一些案例：https://threejs.org/

[4]:易百webgl教程：http://www.yiibai.com/webgl/webgl_context.html

WebGL与three.js的更多相关文章

  1. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  2. 转：WebGL、Asm.js和WebAssembly概念简介

    WebGL.Asm.js和WebAssembly概念简介 转:http://www.techbrood.com/zh/news/webgl/webgl%E3%80%81asm_js%E5%92%8Cw ...

  3. 学废了系列 - WebGL与Node.js中的Buffer

    WebGL 和 Node.js 中都有 Buffer 的使用,简单对比记录一下两个完全不相干的领域中 Buffer 异同,加强记忆. Buffer 是用来存储二进制数据的「缓冲区」,其本身的定义和用途 ...

  4. webGL之three.js入门3--材料篇

    这几天在看李鹏程翻译的[美]Jos Dirksen的<Three.js开发指南>,看到第八章了,现在来总结一下threejs中材料的相关知识.顺带也看完了上海交大的张雯莉出的<thr ...

  5. webGL之three.js入门2

    入门建议: webGL中文翻译教程,基于NeHe的openGL教程:http://www.hiwebgl.com/?p=42 . WebGL中文网 http://www.hewebgl.com/ ,里 ...

  6. webGL之three.js入门1

    开场白 最近开始学前端,看了极客学院的前端教学视频,其实有C++或者java基础的人学前端还是很快的.但是html的标签和CSS的样式还是得多code才能熟练,熟能生巧,学以致用. 还在看js,因为有 ...

  7. webGL和three.js的关系

    如今浏览器的功能越来越强大,而且这些功能可能通过JavaScript直接调用.你可以用HTML5标签轻松地添加音频和视频,而且可以在HTML5画布上创建各种交互组件.现在这个功能集合里又有了一个新成员 ...

  8. webGL之three.js入门4--ThreeJS Editor入门篇

    因为工作需要,要看threejs editor的源码,顺便记录过程. github下载的源码目录是这样的 但是editor和其他文件夹内的内容的关联的,我需要将其独立出来并且编辑editor. 进入e ...

  9. WebGL框架 -- three.js

    http://segmentfault.com/a/1190000002421007 http://www.cnblogs.com/shawn-xie/archive/2012/08/16/26425 ...

随机推荐

  1. Mysql基础（二）

    学习路线:数据约束-> 数据库的设计过程-> 存储过程的相关知识-> 触发器-> 权限管理 (一)数据约束 1.1.默认值的设置 创建员工表emp 将默认地址设置为'中国'my ...

  2. [Windows] win7 配置Java开发环境

    Installed Softwares Git for windows 64 bit Java 7 & 8 64 bit apache maven 3.3.3 Intellij Idea ID ...

  3. jq 根据值的正负变色

    效果图这样: 意思就是根据最后的百分值变色,值为负变绿色,值为正变红色. 所以只要取到那个标签里的值了,就能根据正负的判断决定颜色. 我的html部分这样: /*不过他们都说我的dom结构不太合理,同 ...

  4. inline-block和float

    Inline-block: 1.使块元素在一行显示 2.使内联支持宽高 3.换行被解析 4.不设置宽度,宽度由内容撑开 5.在IE6/7下不支持块标签 Float: 1.使块元素在一行显示 2.使内联 ...

  5. 面localStorage用作数据缓存的简易封装

    面localStorage用作数据缓存的简易封装 最近做了一些前端控件的封装,需要用到数据本地存储,开始采用cookie,发现很容易就超过了cookie的容量限制,于是改用localStorage,但 ...

  6. http://www.sqlservercentral.com/articles/Failover+Clustered+Instance+(FCI)/92196/

    http://www.sqlservercentral.com/articles/Failover+Clustered+Instance+(FCI)/92196/ http://blogs.msdn. ...

  7. 【Android自学日记】五大布局常用属性

    线性布局(LinearLayout)常用属性: android:orientation="vertical"--决定子类控件的排布方式(vertical垂直:horizontal水 ...

  8. memcache服务器端及PHP memcache扩展的安装（转载）

    memcache服务器端的安装(windows版)    1.下载memcached软件 32位下载地址: memcached-win32-1.4.4-14.zip(直接下载) 下载页面: 64位下载 ...

  9. Hamming Distance

    The Hamming distance between two integers is the number of positions at which the corresponding bits ...

  10. Koa2 的安装运行记录（二）

    参考 :koa2-boilerplate    https://github.com/superalsrk/koa2-boilerplate Ajax Login and Ajax Logout in ...