WebGL與three.js

時間 2019-12-14

原文原文鏈接

前面學習了一些webgl的基礎知識，如今就用一下three.js寫一個小例子，記錄一下學習的過程。javascript

效果圖：html

1.去github下載three.js，而後將它加載到網頁中java

<script src="js/three.js"></script>

2接着就該寫一下參數了，主要的四大組件一個不能少git

2.1生成「場景」組件github

var scene = new THREE.Scene();

2.2生成「相機」組件web

var camera = new THREE.PerspectiveCamera(45 , window.innerWidth/window.innerHeight, 1, 1000);

四個參數app

第一個參數：是夾角dom

第二個參數：寬高比yii

第三個參數：最近距離學習

第四個參數：最遠距離　　

2.3生成「渲染器」組件

var renderer = new THREE.WebGLRenderer();

由於渲染器有許多種，按需求生成

2.4生成「幾何體」組件　

var geometry = new THREE.CubeGeometry(2,2,2);

這裏生成了一個立方體，一樣也能夠生成多種幾何體

3.最後渲染出圖形

function render(){
        //add animation
        requestAnimationFrame(render);
        //rotating
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        //renderer cube
        renderer.render(scene,camera);
    }

其中requestAnimationFrame是新的方法，也能夠用setTimeout 代替

詳細代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/three.js"></script>

</head>
<body>
<script>
    //create scenc
    var scene = new THREE.Scene();
    //create Camera
    var camera = new THREE.PerspectiveCamera(45 , window.innerWidth/window.innerHeight, 1, 1000);
    //create renderer
    var renderer = new THREE.WebGLRenderer();
    //clean renderer color
    renderer.setClearColor('#FFFFFF');
    //set renderer size
    renderer.setSize(window.innerWidth,window.innerHeight);
    //put rendererDom into body
    document.body.appendChild(renderer.domElement);
    //create geometry
    var geometry = new THREE.CubeGeometry(2,2,2);
    //create naterial
    var material = new THREE.MeshBasicMaterial({color:0xff0000});
    //create cube
    var cube = new THREE.Mesh(geometry,material);
    //put cube into scene
    scene.add(cube);

    //Point of view see the cube
    camera.position.z = 10;

    function render(){
        //add animation
        requestAnimationFrame(render);
        //rotating
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        //renderer cube
        renderer.render(scene,camera);
    }
    render();
</script>
</body>
</html>

學習資料：

[1]:WebGL中文網：http://www.hewebgl.com

[2]:three.js在Github地址：https://github.com/Billshuai/three.js

[3]:一些案例：https://threejs.org/

[4]:易百webgl教程：http://www.yiibai.com/webgl/webgl_context.html