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

效果图：

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

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

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

2.1生成“场景”组件

var scene = new THREE.Scene(); 

2.2生成“相机”组件

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

四个参数

第一个参数：是夹角

第二个参数：宽高比

第三个参数：最近距离

第四个参数：最远距离　　

2.3生成“渲染器”组件

var renderer = new THREE.WebGLRenderer();

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

2.4生成“几何体”组件　

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

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

3.最后渲染出图形

function render(){

        //add animation

        requestAnimationFrame(render);

        //rotating

        cube.rotation.x += 0.01;

        cube.rotation.y += 0.01;

        //renderer cube

        renderer.render(scene,camera);

    }

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

详细代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

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

</head>

<body>

<script>

    //create scenc

    var scene = new THREE.Scene();

    //create Camera

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

    //create renderer

    var renderer = new THREE.WebGLRenderer();

    //clean renderer color

    renderer.setClearColor('#FFFFFF');

    //set renderer size

    renderer.setSize(window.innerWidth,window.innerHeight);

    //put rendererDom into body

    document.body.appendChild(renderer.domElement);

    //create geometry

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

    //create naterial

    var material = new THREE.MeshBasicMaterial({color:0xff0000});

    //create cube

    var cube = new THREE.Mesh(geometry,material);

    //put cube into scene

    scene.add(cube);

    //Point of view see the cube

    camera.position.z = 10;

    function render(){

        //add animation

        requestAnimationFrame(render);

        //rotating

        cube.rotation.x += 0.01;

        cube.rotation.y += 0.01;

        //renderer cube

        renderer.render(scene,camera);

    }

    render();

</script>

</body>

</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. (转)CentOS下开机启动查看管理命令:chkconfig用法

    CentOS下开机启动查看管理命令:chkconfig用法   CentOS下开机启动查看管理的命令是:chkconfig   1. 开机启动列表查看: chkconfig --list     说明 ...

  2. codevs1403 新三国争霸

    题目描述 Description PP 特别喜欢玩即时战略类游戏,但他觉得那些游戏都有美中不足的地方.灾害总不降临道路,而只降临城市,而且道路不能被占领,没有保护粮草的真实性.于是他就研发了<新 ...

  3. python标准模块（os及sys模块）

    一.os模块 用于提供系统级别的操作 os.getcwd() 获取当前工作目录 os.stat('path/filename') 获取文件/目录信息,其中包括文件大小等 os.sep 获得操作系统特定 ...

  4. mysql基于“报错”的注入

    报错是如何转为xss的? mysql语句在页面报错,泄露信息 ===================================================================== ...

  5. QuartusII Design partion and logic lock

    Design partion Design partion常用于“增益变量(QIC)”,通过Design Partition对子模块进行“逻辑分区”,在Design Partition Window中 ...

  6. 在Azure虚拟机上安装SQL server

    Azure虽然向用户提供SQL paas服务,但是大多数用户还是习惯在用虚拟机自己搭建SQL server,这样的好处是便于后期最大化的扩展,所以鉴于这些情况,所以觉得有必要写这篇博客. 首先,我们要 ...

  7. Appcan——Box

    Box架构 ub….. Box架构元素空间大小分配比例 ub-f……. Ub-f1,ub-f2,ub-f3……. Box架构元素垂直方向的位置排列 ub-ac,ub-ae… -webkit-box-a ...

  8. Python 动态创建函数【转】

    知乎上也有相似的问题 偶然碰到一个问题,初想是通过动态创建Python函数的方式来解决,于是调研了动态创建Python函数的方法. 定义lambda函数 在Python中定义lambda函数的写法很简 ...

  9. 整理：Javascript获取数组中的最大值和最小值的方法汇总

    方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //最小值 Array.prototype.min = function ...

  10. word20161222

    T.120 tag / 标记 TAPI, Telephony API / 电话 API target journaling / 目标日志 taskbar / 任务栏 taskbar button / ...