一个月没写过博客了,这一个月发生了很多事情,让我有了很多的感悟,踏踏实实地做事始终是一件最重要的小事。学习Webgl也一样,Say Hello World 同样是一件小事,最重要的小事。下面我就讲讲我是如何做这件最重要的小事的。
webgl的原生代码实在是相对复杂,所以我选择了threejs。threejs相对webgl,好比jquery相对js,都是以提高开发者开发效率为前提为目标的东西。git地址为https://github.com/mrdoob/three.js/,想看下threejs能做到什么的,可以先去http://mrdoob.github.com/three.js/看下例子,文档可以到这里http://mrdoob.github.com/three.js/docs/52/找到。
hello world的例子就用threejs里面的一个范例来展示了,一个木箱转动的效果。
先上源码,html代码的话就是最基本的就好了,引入下three.js即可
var Cube = { createNew: function(){ var cube = {}; var camera, sence, renderer, container; var mesh; cube.init = function(){ //创建dom元素 container = document.createElement('div'); container.id = 'webgl'; renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild(renderer.domElement); document.body.appendChild( container ); //创建相机 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.z = 400; //创建视景 sence = new THREE.Scene(); //创建木箱 var geometry = new THREE.CubeGeometry( 200, 200, 200 );//创建形状 var texture = THREE.ImageUtils.loadTexture( './cube/crate.gif' );//纹理 var material = new THREE.MeshBasicMaterial({map: texture});//添加纹理 mesh = new THREE.Mesh(geometry, material);//创建木箱模型 sence.add(mesh); window.addEventListener('resize', onWindowResize, false); } function onWindowResize(){ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } cube.animate = function(){ requestAnimationFrame(cube.animate); mesh.rotation.x += 0.005; mesh.rotation.y += 0.01; renderer.render(sence, camera); } return cube; } } var cube = Cube.createNew(); cube.init(); cube.animate();
在做webgl开发的时候,我们首先要有一个概念,一个模型。我们是在二维的基础上,提升到三维来进行展示。所以,几乎每一个webgl项目都要包含场景、相机与事物。场景是基础,相机是我们的眼睛,我们通过相机去看场景,我们看到的是场景中的事物。
所以我们要首先创建如下代码:
var cube = {}; var camera, sence, renderer, container; var mesh; cube.init = function(){ //创建dom元素 container = document.createElement('div'); container.id = 'webgl'; renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild(renderer.domElement); document.body.appendChild( container ); //创建相机 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.z = 400; //创建视景 sence = new THREE.Scene(); //创建木箱 var geometry = new THREE.CubeGeometry( 200, 200, 200 );//创建形状 var texture = THREE.ImageUtils.loadTexture( './cube/crate.gif' );//纹理 var material = new THREE.MeshBasicMaterial({map: texture});//添加纹理 mesh = new THREE.Mesh(geometry, material);//创建木箱模型 sence.add(mesh); window.addEventListener('resize', onWindowResize, false); }
首先,我们创建了dom元素,然后插入到body中
container = document.createElement('div'); container.id = 'webgl'; renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild(renderer.domElement); document.body.appendChild( container );
再分别创建相机、场景和木箱,填入一些参数就可以制作出我们想要的效果了
//创建相机 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.z = 400; //创建视景 sence = new THREE.Scene(); //创建木箱 var geometry = new THREE.CubeGeometry( 200, 200, 200 );//创建形状 var texture = THREE.ImageUtils.loadTexture( './cube/crate.gif' );//纹理 var material = new THREE.MeshBasicMaterial({map: texture});//添加纹理 mesh = new THREE.Mesh(geometry, material);//创建木箱模型 sence.add(mesh);
最后再附上窗口缩放后的重新渲染与动画效果即可
function onWindowResize(){ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } cube.animate = function(){ requestAnimationFrame(cube.animate); mesh.rotation.x += 0.005; mesh.rotation.y += 0.01; renderer.render(sence, camera); }
不知道该如何深入地去写……感觉很多地方写得词不达意呀,还需要多写才行