2016-12-06

Three.js 起手式

题外话：

起手式，这个词第一次是从金庸的小说中看到的，通常用来向对手表示礼貌与尊敬，并不具备攻击性；大部分门派的基本功第一招都是起手式，因此也用来表示入门的第一步。

bg:

年会抽奖系统
头像滚动
Powered by Three.js Based on WebGL

正文

先上一个 Demo。概念的东西就不提了，在资料里头的教程里就能看到简单易懂的介绍。
首先撇开其他方面的依赖，直接回到最原始的开发环境中，也就是静态的 HTML 页面。

<!DOCTYPE html>
<html>
<head>
    <title>Three.js Demo</title>
    <style>
        html, body { margin:0;overflow: hidden; }
        canvas { width: 100%; height: 120% }
    </style>
</head>
<body>
<script src="./three.min.js" ></script>
<script>
    var scene, camera, renderer;
    init();
    function init(){
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        renderer = new THREE.WebGLRenderer();
        camera.position.z = 0;
        renderer.setSize( window.innerWidth, window.innerHeight );
        var geometry = new THREE.PlaneGeometry( 128, 128, 1, 1);
        var material = new THREE.MeshBasicMaterial( {color: 0xfffff} );
        var plane = new THREE.Mesh( geometry, material );
        plane.position.z = -500;
        scene.add( plane );
        document.body.appendChild( renderer.domElement );
        renderer.render( scene, camera );
    }
</script>
</body>
</html>

在这里头画了一个正方形（只是一个面），调好 camera 与物体之间的距离，就能看到这个正方形。
让场景动起来的方法有两种，

移动 camera ，让场景相对动起来。
移动场景里头的物体，这是场景真正动起来。

现在我们要让场景动起来，下面 Demo 采用的是第一种方法，让 camera 动起来。在代码里头加入 animate 方法，下面这个 Demo 只改变了 z 轴的值，使 camera 前后移动。
requestAnimationFrame 方法不明白自行 Google (之前看过一个很好的博文，找不着了)。

<script>
    var scene, camera, renderer;
    init();
    animate(); //初始化后执行 animate 方法
    function init(){
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        renderer = new THREE.WebGLRenderer();
        camera.position.z = 0;
        renderer.setSize( window.innerWidth, window.innerHeight );
        var geometry = new THREE.PlaneGeometry( 128, 128, 1, 1);
        var material = new THREE.MeshBasicMaterial( {color: 0xfffff} );
        var plane = new THREE.Mesh( geometry, material );
        plane.position.z = -500;
        scene.add( plane );
        document.body.appendChild( renderer.domElement );
        renderer.render( scene, camera );
    }
    //增加了 animate 方法
    function animate(){
        requestAnimationFrame( animate );
        camera.position.z -= 5;
        //下面代码保证每次调用 animate 都重新渲染
        renderer.render( scene, camera );
    }THREE.ImageUtils.loadTexture
</script>

后来我又在 init 里头往场景里添加了许多物体，然后也是通过移动 camera 来使这些物体看起来像是在往前飞或者往后飞。
接下来我要给这个正方形贴上纹理，也就是把这个蓝色的正方形变成我想要的照片（也就是抽奖系统里的头像）。

教程里头使用是 THREE.ImageUtils.loadTexture 这个方法，但是实际应用后发现这个方法已经被废弃，后经过多方考证后我使用了 THREE.TextureLoader 对象里的 load 方法来载入纹理图片。
代码如下（我把 animate 方法去掉了）：

<script>
    var scene, camera, renderer;
    init();
    function init(){
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        renderer = new THREE.WebGLRenderer();
        camera.position.z = 0;
        renderer.setSize( window.innerWidth, window.innerHeight );
        var loader = new THREE.TextureLoader();
        loader.load( "logo.png", function(texture){
                var geometry, material, plane;
                geometry = new THREE.PlaneGeometry( 128, 128, 1, 1);
                material = new THREE.MeshBasicMaterial( {map:texture} );
                // var material = new THREE.MeshBasicMaterial( {color: 0xfffff} );
                plane = new THREE.Mesh( geometry, material );
                plane.position.z = -500;
                scene.add( plane );
                document.body.appendChild( renderer.domElement );
                renderer.render( scene, camera );
            },
            function ( xhr ) {
                // onProcess 方法
                console.log( (xhr.loaded / xhr.total ) + '% loaded' );
            },
            function ( xhr ) {
                // onError 方法
                console.log( 'An error happened' );
            }
        );
    }
</script>

上面这个代码直接访问是会有问题的。
以踩完坑的角度来看这个问题。这个坑有两个影响因素：

本地访问 THML 文件（file:///Applications/MAMP/htdocs/lottery/pic.html）与服务器访问 HTML 文件（http://localhost:8888/lottery/pic.html）
相对路径访问纹理纹理图片与绝对路径访问纹理图片

第一种情况：本地访问 HTML 文件＋相对路径访问纹理图片
console 中打出了两条日志：

three.min.js:606 XMLHttpRequest cannot load file:///Users/poorbug/Desktop/lottery/logo.png. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
An error happened

跨域错误，于是我把图片放到七牛上。

第二种情况：本地访问 HTML 文件＋绝对路径( url )访问纹理图片
修改 load 方法中的第一个参数( url )；此时从 console 与 network 都可以看出 load 方法已经成功加载图片。但同时也爆出了一个错误：

three.min.js:119 DOMException: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: Tainted canvases may not be loaded.(…)

纹理并没有成功渲染上，还是有问题，在这一块卡了非常久。

可能是从跨域问题获得了灵感。我把本地服务器启动了。

第三种情况：服务器访问 HTML 文件＋本地访问纹理图片
通过 localhost 访问 HTML 文件，则纹理能够成功贴上(不管是本地访问纹理图片还是通过服务器访问纹理图片)。

此时，完整代码如下（经过稍微加工，代码与上面 Demo 不完全一致）：

<!DOCTYPE html>
<html>
<head>
    <title>lottery</title>
    <style>
        html, body{margin:0;overflow: hidden;}
        canvas { width: 100%; height: 120% }
    </style>
    <script src="./three.min.js" ></script>
</head>
<body>
<script>
    var scene, camera, renderer;
    var step = 20;
    var len = 5;
    var dis = 500;
    init();
    animate();
    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        renderer = new THREE.WebGLRenderer();
        camera.position.z = -dis;
        renderer.setSize( window.innerWidth, window.innerHeight );
        var loader = new THREE.TextureLoader();
        loader.load( "logo.png", function(texture){
                var geometry, material, plane;
                for(var i=1; i<=len; i++){
                    geometry = new THREE.PlaneGeometry( 128, 128, 1, 1);
                    material = new THREE.MeshBasicMaterial( {map:texture} );
                    // var material = new THREE.MeshBasicMaterial( {color: 0xfffff} );
                    plane = new THREE.Mesh( geometry, material );
                    plane.position.z = i * dis;
                    scene.add( plane );
                }
                document.body.appendChild( renderer.domElement );
                renderer.render( scene, camera );
            },
            function ( xhr ) {
                console.log('size = '+ xhr.loaded)
                console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
            },
            // Function called when download errors
            function ( xhr ) {
                console.log( 'An error happened' );
            }
        );
    }
    function animate() {
        if(camera.position.z == (len + 1)*dis){
            // 所有照片都投入后，停留3秒，反向滚动
            console.log('=.'+camera.position.z)
            step = -step;
            setTimeout(animate, 3000)
        }else if(camera.position.z % dis == 480 && step > 0 && camera.position.z != (len + 1) * dis - step){
            // 每个照片会停留500毫秒
            console.log('-.'+camera.position.z)
            setTimeout(animate, 500)
        }else{
            requestAnimationFrame( animate );
        }
        camera.position.z += step;
        renderer.render( scene, camera );
    }
</script>
</body>
</html>

总结

经过几天的学习，发现 Three.js 的教程实在是不多，有不少还有点过时。官网的文档又没有教程，demo 晦涩难懂，简直不忍多看。因此学习这个还是需要自己花点时间琢磨；参考网上的资料，自己动手试一试，不轻松，但是会有收获。

That’s all.

留言板

说:

Poorbug

🚲 黄昏虽好，未敢停留。

Three.js 起手式

题外话：

bg:

相关资料：

正文

总结

留言板