前面学习了一些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. 前端构建工具之gulp（一）「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  2. 移动Web之响应式布局的探讨

    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...

  3. jquery easyui tree动态加载子节点

    1.前端tree绑定时,使用onBeforeExpand事件:当节点展开时触发加载子节点,自动会向服务端发送请求:url为绑定url,参数为当前节点id this.tree = { method: ' ...

  4. 使用Open xml 操作Excel系列之一-读取Excel

    一. 安装Open Xml SDK 从微软网站下载Open xml SDK,安装SDK. 二. 在项目中添加对DocumentFormat.OpenXml库的引用

  5. 疯狂了！当游戏爱上MongoDB会怎么样？？？

    导读 前端时间魔兽这个电影我相信大家都看过了哈,作为一个码农,有时候我也会去思考魔兽世界这个游戏背后他的一些设计和实现,比如他用什么数据库.当然真正用什么数据库这个我是不确定的,我们今天的主题是当游戏 ...

  6. mysql数据库史上最详细起步教程（1）

    本文主要讲解mysql的操作,尽量保证步骤的详细与清晰,希望能帮到大家. 1.登录后进行数据库的创建:create database lf(数据库名);  (一定要记住分号,mysql在语句的结束符就 ...

  7. Photoshop学习笔记

    视频地址:PhotoshopCS5视频教程 1.打开文件的快捷方式:软件刚启动时,双击绘图区域 2.文件->新建,弹出的新建对话框中,包含了剪切板及纸张的相关信息 3.图像缩放快捷方式:ctrl ...

  8. Linux下安装MongoDB

    MongoDB是一个C++编写的基于分布式文件存储的数据库,是一个介于关系和非关系之间的数据库,当然也属于NoSQL的行列,存储方式和Redis类似,是json格式的kav-value存储方式,只是R ...

  9. Web项目使用Oracle.DataAccess.dll 类库连接oracle数据库

    首先我用的工具是oracle 32位免安装版+Oracle.DataAccess.dll 32位  文件版本4.121.1.0+vs2013 +win7 64位 Oracle.DataAccess.d ...

  10. B+Tree和MySQL索引分析

    首先区分两组概念: 稠密索引,稀疏索引: 聚簇索引,非聚簇索引: btree和mysql的分析: 参见 http://blog.csdn.net/hguisu/article/details/7786 ...