前面学习了一些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. 以冒泡排序为例--malloc/free 重定向stdin stdout

    esort.c 代码如下,可关注下mallloc/free,freopen重定向的用法,排序为每轮将最小的数放在最前面: #include<stdio.h> #include<mal ...

  2. leetcode笔记

    82. Remove Duplicates from Sorted List II https://leetcode.com/problems/remove-duplicates-from-sorte ...

  3. 关于C++中的cout

    最近恰好看到qq群里有讨论cout的问题,发现自己对于cout的运行机制也不怎么明白,所以就仔细研究了下这个东西. 如下是c++ reference中cout的定义 extern ostream co ...

  4. EBS 中经常用到的一些值集

    名称                                 值集                                                                ...

  5. iOS9网络适配(ATS)

    [转]iOS9 new_001:iOS9网络适配(ATS) 下载Xcode7打开APP后大家都发现自己的APP无法联网了,why? 苹果官方文档介绍如下: App Transport Security ...

  6. android-获得".apk"文件的相关信息。包名、版本号等等

    String filePath = "/sdcard/feijiedemo.apk"; PackageManager packageManager = getPackageMana ...

  7. 第三方提权之serv-u提权

    文章比较简单,只是做一个科普.给一个好朋友的. 倘若口令更改了大家可以去serv-u的目录(默认路径:C:\Program Files\Serv-U\)找其配置文件(ServUDaemon.ini), ...

  8. pip安装报错：is not a supported wheel on this platform

    可能的原因1:安装的不是对应python版本的库,下载的库名中cp27代表python2.7,其它同理. 可能的原因2:这个是我遇到的情况(下载的是对应版本的库,然后仍然提示不支持当前平台) 我下载到 ...

  9. SWFUpload多图上传、C#后端跨域传文件带参数

    前几天工作中用到了SWFUpload上传图片,涉及到跨域,因为前端无法实现跨域,所以只能把文件传到后端进行跨域请求,整理分享下. 效果图 前端 html部分 <!DOCTYPE html> ...

  10. 「LeetCode」全部题解

    花了将近 20 多天的业余时间,把 LeetCode 上面的题目做完了,毕竟还是针对面试的题目,代码量都不是特别大,难度和 OJ 上面也差了一大截. 关于二叉树和链表方面考察变成基本功的题目特别多,其 ...