WEBGL橢圓

運用three技術建立一個簡單的圖形

第一步， 建立HTML標籤

<div id="canvas3d"></div>

第二步，呼叫three.js外掛

第三步，貼程式碼

window.οnlοad=function() {
    var canvas3d = document.getElementById("canvas3d"); //獲取容器


//建立渲染
    var renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(canvas3d.clientWidth, canvas3d.clientHeight);
    canvas3d.appendChild(renderer.domElement);
    renderer.setClearColor(new THREE.Color(0xffffff)); //改變canvas背景色


//建立場景
    var scene = new THREE.Scene();


//建立幾何
    var geometry = new THREE.SphereGeometry(30, 30);
    var meterial = new THREE.MeshLambertMaterial({color: 0xff0000});
    var mesh = new THREE.Mesh(geometry, meterial);
    scene.add(mesh);


//建立燈光
    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(200, 200, 200);
    scene.add(light);


//建立相機
    var camera = new THREE.PerspectiveCamera(45, canvas3d.offsetWidth / canvas3d.offsetHeight, 1, 4000);
    camera.position.set(200, 200, 200);
    camera.lookAt(scene.position);


    //新增渲染
    renderer.render(scene,camera);
}