[three.js]學習筆記

時間 2019-11-05

原文原文鏈接

再此以前必須提一個sublime的插件，HTML-CSS-JS Prettify（注意插件須要node.js的安裝html

裝完事後右鍵菜單Prettify code或者ctrl+shift+h，就會看到再也不一團糟、格式乾淨的代碼了。有人推薦TAG package，能夠優化html代碼，可是我遇到js亂碼的狀況比較多因此以爲很雞肋。html5

Three.js is a library that makes WebGL - 3D in the browser - easy to use.java

three.js的introduction卻是很簡單易懂。node

three.js      918KB            jquery-1.12.3.js      286KB
three.min.js  486KB            jquery-1.12.3.min.js  94.9KB

壓縮後的大小勉強能接受，不過仍是jquery的5倍。jquery

|workflow

１.Create the scene (scene, camera, renderer)web

2.Create the cube (geometry, material, mesh)canvas

3. Render the scene瀏覽器

4. Animate the sceneapp

下面是演示代碼：dom

<body>
    <script src="js/three.js"></script>
    <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.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({
        color: 0x2ea9df,
        wireframe: true
    });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;
    var render = function() {
        requestAnimationFrame(render);
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
        renderer.render(scene, camera);
    };
    render();
    </script>
</body>