最近搜罗了各种资料，发现WebGL中文网特别好用，很适合新手入门：http://www.hewebgl.com/article/getarticle/50

只需要下载好需要的所有包，然后用notepad 就可以开始写代码了， 运行代码我选择的Google Chrome，其实IE也是一样的，纯属个人信仰。

然后对于画cube的话，给出的代码已经非常清晰了：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();
  
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
  
        var renderer = new THREE.WebGLRenderer();
  
        renderer.setSize(window.innerWidth, window.innerHeight);
  
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.CubeGeometry(2,2,2);
        var material = new THREE.MeshBasicMaterial({color: 0xF0F000});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.05;
            cube.rotation.y += 0.05;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>

有写过网站页面的话都知道html的处理就像一个堆栈，看到head就push到栈里，开始处理head的内容，碰到下一个head再pop出来，标志head处理结束。

总体来说，简单的网站页面包括<html><head><body>格式都是固定的，其中代码里面  document.body.appendChild(renderer.domElement);这句话声明此脚本是挂在body下执行的，如果不写这一句，body是不知道这个脚本是给它用的，因此就不会显示脚本里描述的cube的各种活动。

和写unity脚本类似，webgl的图形界面也是需要这三个基本元素构成的。

1.scene

2.camera

3.renderer

然后是声明一个物体对象cube，和new一个变量一样：var cube = new THREE.Mesh(geometry, material); scene.add(cube);其中值得注意的是js喜欢用var来声明变量，因为var和c的（void*）类似，都是可以接收任何类型的，比较灵活。

其中看起来比较奇葩的是color的赋值，用的是16进制，其实0x000000，就相当于0xRGB，每个颜色用两位来表示。

感觉webgl实现和最新的opengl类似，然后现在新兴的微信小程序其实也和H5有着密不可分的关系，所以webgl感觉是一个挺适合前端工程的一套工具。

【WebGL入门】画一个旋转的cube的更多相关文章

  1. Directx11学习笔记【十二】 画一个旋转的彩色立方体

    上一次我们学习了如何画一个2D三角形,现在让我们进一步学习如何画一个旋转的彩色立方体吧. 具体流程同画三角形类似,因此不再给出完整代码了,不同的部分会再说明. 由于我们要画彩色的立方体,所以顶点结构体 ...

  2. WebGL画一个10px大小的点

    WebGL程序在屏幕上同时使用HTML和javascript来创建和显示三维图形.WebGL中新引入的<canvas>元素标签,它定义了网页上的绘图区域. 由于<canvas> ...

  3. 教你用webgl快速创建一个小世界

    收录待用,修改转载已取得腾讯云授权 作者:TAT.vorshen Webgl的魅力在于可以创造一个自己的3D世界,但相比较canvas2D来说,除了物体的移动旋转变换完全依赖矩阵增加了复杂度,就连生成 ...

  4. WebGL入门教程(三)-webgl动画

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...

  5. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  6. [Unity3D入门]分享一个自制的入门级游戏项目"坦克狙击手"

    [Unity3D入门]分享一个自制的入门级游戏项目"坦克狙击手" 我在学Unity3D,TankSniper(坦克狙击手)这个项目是用来练手的.游戏玩法来自这里(http://ww ...

  7. Three.js入门——画星空（star field）

    Three.js是一个很流行的3D JavaScript库.这里有一个three.js的入门教程,在浏览器窗口中画出星空.我按照教程重新实现了一遍,这里的这篇博客把教程大致翻译了一遍.我的demo. ...

  8. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  9. 自己画一个ActivityIndicatorView－b

    苹果的UI控件中有一个UIActivityIndicatorView,俗称菊花.→_→现在我们仿照它来制作一个其它样式的指示器,如下: ActivityView.png 自定义指示器 首先画一个白色的 ...

随机推荐

  1. ajax利用FormData异步文件提交

    通常情况下,我们上传文件都会使用form表单来提交文件.但有时候,我们会有异步提交文件的需求,在这种情况下,我们就需要新建一个Formdata来提交文件,后台如果使用的是PHP的话可以使用$_FILE ...

  2. Mycat 分片规则详解--日期范围 hash 分片

    实现方式:其思想和范围取模分片一样,由于日期取模会出现数据热点问题,所以先根据日期分组,再根据时间 hash 使得短期数据分布跟均匀. 优点:避免扩容时的数据迁移,可以在一定程度上避免范围分片的热点问 ...

  3. Java基础_Java概述

    Java_概述 特点: 平台的移植性 开源 面向对象 多线程 安全性 工作方式: 先编译再解释执行. 先通过Javac命令将Java源代码编译成字节码文件(bytecode,类文件,.class,中间 ...

  4. JDK1.8源码(四)——java.util.Arrays 类

    java.util.Arrays 类是 JDK 提供的一个工具类,用来处理数组的各种方法,而且每个方法基本上都是静态方法,能直接通过类名Arrays调用. 1.asList public static ...

  5. JS时间处理由CST格式转成GMT格式时间

    问题描述:js接收java后台的时间数据时,时间格式的CST时间,而js默认的是GMT时间格式,js 需要对这个时间进行处理才能使用,具体处理方法如function dateToGMT(sDate){ ...

  6. 痛吻过YY寻找到真爱的三非渣本春招之路

    写下这篇文章可能就不是大家乐于见闻的面经了,更多是深入一些面试细节. 前言 我猜拿到了BAT等一线互联网公司Offer的小伙伴或者那些老鸟看到这条标题的时候会不屑一顾,认为YY这种级别的公司是属于二线 ...

  7. java中equals与==的区别

    http://blog.csdn.net/zfrong/article/details/4290904

  8. Win调整和小技巧

    推荐win下一些个人爱用的工具软件(以及使用心得)和一些系统调整方法,让win下不尽人意的设置发生小小变化,让整天摸着电脑的ITer们的生活更有乐趣. 本人酷爱收集一些好用的软件,若各位也对某个或某些 ...

  9. 计算1-1/3+1/5-1/7+···的前n项和

    这图1为书里的教材,图二为自己打的程序 (1)二者相比,自己写的代码显得更短,听说代码写的越精简越好,但是自己的较难分析,他人看来可能会较难理解一点:(自己在第一次运行时将for()中的第二个表达式写 ...

  10. 听翁恺老师mooc笔记（2）-第一个程序--&运算符

    使用devC++写hello world 第一步:文件-新建-源代码.然后输入"输出hello world"程序: 注意:写程序时关闭中文输入法,否则语句输入的分号可能会被识别为错 ...