Webgl:Hello World by ThreeJs

/ 0评 / 0

一个月没写过博客了,这一个月发生了很多事情,让我有了很多的感悟,踏踏实实地做事始终是一件最重要的小事。学习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);
        }

不知道该如何深入地去写……感觉很多地方写得词不达意呀,还需要多写才行

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注