2015-08-27

Three.js试玩

玩什么

前几天我才知道，以前在网上看到的酷炫HTML5制作的3D效果，其实是WebGL的功劳。HTML5的Canvas元素作为DOM接口，就可以利用WebGL做出酷炫效果了。有一个非常著名的Water WebGL Demo，实现了一个球在水中的场景，并可以通过鼠标移动这个球，水波进行实时渲染。
demo

但是我觉得这个对新手来说难度太高了吧，不如找个简单一些的，看能不能上手玩一玩，于是我找到了这个。

demo

这个看起来也很有趣，感兴趣的话可以点开demo看看。

怎么玩

那么问题来了，怎么玩？

作为初级玩家，当然是从简单的开始咯。先稍微看一下WebGL教程…再读一下threejs入门指南…再欣赏一下threejs官网给出的样例。然后就可以做出这个简单的方块动画…

<!DOCTYPE html>
<html>
    <head>
        <title>My first cube</title>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="http://cdn.bootcss.com/three.js/r71/three.min.js"></script>
        <script>
            var scene = new THREE.Scene(); //场景
            var camera = new THREE.PerspectiveCamera(50, 300/300, 1, 50); //照相机
            camera.position.set(0, 0, 5);
            scene.add(camera);
            var light = new THREE.AmbientLight(0xffffff); //灯光
            scene.add(light);

            var geometry = new THREE.BoxGeometry(1,2,3); //几何体
            var material = new THREE.MeshBasicMaterial({color: 0xff0000}); //材质
            var cube = new THREE.Mesh(geometry, material); //Meshify
            scene.add(cube);

            var renderer = new THREE.WebGLRenderer(); //渲染器
            renderer.setSize(300, 300);
            document.body.appendChild(renderer.domElement); //添加Canvas到HTML


            function draw() {
                cube.rotation.x = (cube.rotation.x + 0.1) % (Math.PI * 2); // X方向旋转
                cube.rotation.y = (cube.rotation.y + 0.05) % (Math.PI * 2); // Y方向旋转
                renderer.render(scene, camera); // rendering
                requestAnimationFrame(draw); // callback
            }
            draw();
        </script>
    </body>
</html>