前面学习了一些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. 分享10款非常有用的 Ajax 插件

    这篇文章与大家分享的是10款非常有用的 Ajax 插件,有用于图片的,用于分页的,还有用于导航的.这些作者的想法特别新颖,希望你能从中找到自己需要的插件. 1. AJAX-ZOOM 非常强大的一款插件 ...

  2. Android 项目结构图

    src:存放Java源代码 gen:存放系统自动生成的配置文件 Android 4.4.2:包含Android.jar文件,包含构建应用程序所需的所有Android SDK库 asssets:存放资源 ...

  3. Linux软件包管理

    Linux软件包管理 Linux软件包管理主要有2类:是二进制包管理.源码包管理 二进制包管理 主要有RPM和YUM两种 RPM包管理 安装 --ivh:-v ,-vv,-vvv显示的安装信息依次详细 ...

  4. 08-linux 其他知识

    linux其他知识点 1-防火墙- iptables原理 2- 本部分属于一步一步学习大数据系列之 Linux 的章节,欢迎订阅更多文章 更多内容请参考:一步一步学习大数据系列介绍

  5. vue.js的一些知识点

    1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  6. bzoj4691: Let There Be Light

    如果原点能被一个光源照到,那么这两个点之间一定没有任何球.我们可以通过三分距离来确定某线段和球是否有交点. 注意到m非常小,于是我们可以枚举原点被哪些光源照到.由于\(O(2^{n}*m)\)会超时, ...

  7. Application对象、ViewState对象、分页展示--2017年1月4日

    Application对象 存储 Application 变量  Application["application名称"] = "application的值"; ...

  8. 3篇NeuroImage文献分析

    鉴于之前读的一些文章很容易就忘掉了,故打算花点时间记录下所读的文献. 这几天花了一些时间读了3篇文献: Intersubject consistency of cortical MEG signals ...

  9. Nagios安装

    在做安装之前确认要对该机器拥有root权限. 确认你安装好的Fedora系统上已经安装如下软件包再继续: Apache GCC编译器 GD库与开发库 可以用yum命令来安装这些软件包: yum ins ...

  10. Linux远程执行Shell命令或脚本

    ## 远程执行shell命令 ssh [user]@[server] '[command]' # eg. ssh root@192.168.1.1 'uptime' ## 远程执行本地shell脚本 ...