前面学习了一些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. MATLAB-RSP 随笔

    1.Getting Started with Signal Analyzer App 161216 (1) 在命令行中输入:signalAnalyzer. (2)在工作空间中选择要分析的信号

  2. Java的输入方式总结

    写java代码的时候,经常会遇到的情况就是输入输错了怎么办?大部分想的是用一个if判断,但是用if判断的话我们就无法让用户再次输入,因为if语句程序执行后就会直接退出程序.因此要想实现循环就要用whi ...

  3. codevs2216 行星序列

    题目描述 Description "神州"载人飞船的发射成功让小可可非常激动,他立志长大后要成为一名宇航员假期一始,他就报名参加了"小小宇航员夏令营",在这里小 ...

  4. Ajax工作原理

    在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...

  5. REDHAT一总复习1 记录systemd日志条目 rsyslogd配置记录日志指令

    显示9:05:00 到9:15:00 之间在/home/student/systemdreview.txt 文件中记录所有systemd日志条目 # echo "journalctl --s ...

  6. Toad各版本所包含的组件

    Toad for Oracle Base Edition Toad for Oracle Knowledge Xpert for PL/SQL Knowledge Xpert for Oracle A ...

  7. ubuntu 系统下搭建Java的环境

    1.首先可以使用 java -version来查看自己是否已经搭建了java的环境,如果出现了java的版本号则表示java的环境已经搭建好了!否则则继续下面的步骤进行java环境的搭建 2.进入Or ...

  8. Doctype的作用

    <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令,也就是定义文档类型. 所有的浏览器都需要两种模式:怪异模式和严格模式 ...

  9. iOS中为什么block用copy属性

    1. Block的声明和线程安全Block属性的声明,首先需要用copy修饰符,因为只有copy后的Block才会在堆中,栈中的Block的生命周期是和栈绑定的,可以参考之前的文章(iOS: 非ARC ...

  10. Xcode的一个简单的UITests

    国内写Tests的很少,写UITests的更少了...或许只是我眼见不够开阔.网上那么几篇都是Swift的.这里给个简单的OC. - (void)viewDidLoad { [super viewDi ...