【WebGL入门】画一个旋转的cube
最近搜罗了各种资料，发现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的更多相关文章
- Directx11学习笔记【十二】 画一个旋转的彩色立方体
上一次我们学习了如何画一个2D三角形,现在让我们进一步学习如何画一个旋转的彩色立方体吧. 具体流程同画三角形类似,因此不再给出完整代码了,不同的部分会再说明. 由于我们要画彩色的立方体,所以顶点结构体 ...
- WebGL画一个10px大小的点
WebGL程序在屏幕上同时使用HTML和javascript来创建和显示三维图形.WebGL中新引入的<canvas>元素标签,它定义了网页上的绘图区域. 由于<canvas> ...
- 教你用webgl快速创建一个小世界
收录待用,修改转载已取得腾讯云授权 作者:TAT.vorshen Webgl的魅力在于可以创造一个自己的3D世界,但相比较canvas2D来说,除了物体的移动旋转变换完全依赖矩阵增加了复杂度,就连生成 ...
- WebGL入门教程(三)-webgl动画
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...
- WebGL入门教程(二)-webgl绘制三角形
前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...
- [Unity3D入门]分享一个自制的入门级游戏项目"坦克狙击手"
[Unity3D入门]分享一个自制的入门级游戏项目"坦克狙击手" 我在学Unity3D,TankSniper(坦克狙击手)这个项目是用来练手的.游戏玩法来自这里(http://ww ...
- Three.js入门——画星空（star field）
Three.js是一个很流行的3D JavaScript库.这里有一个three.js的入门教程,在浏览器窗口中画出星空.我按照教程重新实现了一遍,这里的这篇博客把教程大致翻译了一遍.我的demo. ...
- WebGL入门教程(五)-webgl纹理
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...
- 自己画一个ActivityIndicatorView－b
苹果的UI控件中有一个UIActivityIndicatorView,俗称菊花.→_→现在我们仿照它来制作一个其它样式的指示器,如下: ActivityView.png 自定义指示器 首先画一个白色的 ...
随机推荐
- java 多线程（总结）
今天看了几篇关于java多线程问题的文章,将他们的部分内容引过来总结下,也算是对java多线程这类问题的整理. 在多线程中,必须明白两个问题,一是多线程实现,二是代码同步. 在java中要想实现多线程 ...
- IPFS: BitSwap协议(数据块交换)
原创 2018-01-11 飞向未来 IPFS指南 BitSwap协议 IPFS节点之间是如何进行数据交换的?本文来讲一下这个问题. IPFS在BitTorrent的基础上实现了p2p数据交换协议:B ...
- python解决图的最短路径问题
在hihoCoder上遇到一个算法题目,描述如下: 对图结构有了解的不难发现,这是经典的求图的最短路径问题.以下是python代码: def findMin(row): minL = max(row) ...
- 简单了解C语言内嵌汇编
最近看自旋锁的实现,自选锁的循环查找锁的主要实现类似如下,该实现使用到了内嵌的汇编(摘自sanos内核,源代码有2处实现,一处使用intel汇编,是没有问题的,另一处使用内嵌汇编语法,源代码中为cmp ...
- 通过Beego将之前实现的短url项目实现
正好通过这个小例子对之前了解的beego框架的基本内容进行一个简单的应用 实现的完整代码地址:https://github.com/pythonsite/go_simple_code/tree/mas ...
- Mycat 分片规则详解--数据迁移及节点扩容
使用的是 Mycat 提供的 dataMigrate 脚本进行对数据进行迁移和节点扩容,目前支持的 Mycat 是1.6 版本,由于 Mycat 是由 Java 编写的因此在做数据迁移及节点扩容时需要 ...
- Webpack结合ES6
一.概述ES6现在正是风华正茂的时候,各个公司都是 尝试去使用,并且作为前端工程师ES6也是体现技术的亮点.但是,现在的浏览器对es6支持不是 特别的兼容,最终还是需要把es6转换为es5,webpa ...
- [HNOI2002]营业额统计_Treap
[HNOI2002]营业额统计 题目大意:给你一串n数序列,对于每一个刚输入的数a,找到一个前面的数k,使得|a-k|最小. 注释:$n<=32767,ai<=10^6$. 想法:刚学Tr ...
- 求逆序对[树状数组] jdoj
求逆序对 题目大意:给你一个序列,求逆序对个数. 注释:n<=$10^5$. 此题显然可以跑暴力.想枚举1到n,再求在i的后缀中有多少比i小的,统计答案即可.这显然是$n^2$的.这...显然过 ...
- JVM学习八：常用JVM配置参数
前面学习的都是和类加载相关的知识,接下来学习的则和GC相关的知识,都是JVM的几个重点块. 零.在IDE的后台打印GC日志: 既然学习JVM,阅读GC日志是处理Java虚拟机内存问题的基础技能,它只是 ...