【WebGL入門】畫一個旋轉的cube

時間 2019-11-29

標籤 WebGL入門一個旋轉 cube 简体版

原文原文鏈接

最近蒐羅了各類資料，發現WebGL中文網特別好用，很適合新手入門：http://www.hewebgl.com/article/getarticle/50html

只須要下載好須要的全部包，而後用notepad 就能夠開始寫代碼了，運行代碼我選擇的Google Chrome，其實IE也是同樣的，純屬我的信仰。前端

而後對於畫cube的話，給出的代碼已經很是清晰了：web

<!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>canvas

有寫過網站頁面的話都知道html的處理就像一個堆棧，看到head就push到棧裏，開始處理head的內容，碰到下一個head再pop出來，標誌head處理結束。小程序

整體來講，簡單的網站頁面包括<html><head><body>格式都是固定的，其中代碼裏面 document.body.appendChild(renderer.domElement);這句話聲明此腳本是掛在body下執行的，若是不寫這一句，body是不知道這個腳本是給它用的，所以就不會顯示腳本里描述的cube的各類活動。微信小程序

和寫unity腳本相似，webgl的圖形界面也是須要這三個基本元素構成的。微信

1.sceneapp

2.cameradom

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感受是一個挺適合前端工程的一套工具。