three.js入門（三）：點光源+動畫的實現

與前幾個教程相似，場景和相機等設置就再也不重複說明了。以前的博客中有記錄。這裏只列出新學的內容。

一、圓柱體（圓錐體）的初始化

function initObject() {
    var geometry = new THREE.CylinderGeometry(0, 10, 50);
    var material = new THREE.MeshLambertMaterial({
        color: 0x483D8B
    });
    cylinder = new THREE.Mesh(geometry, material);
    cylinder.rotation.x = 0.15 * Math.PI;
    scene.add(cylinder);
}

new THREE.CylinderGeometry的三個參數含義依次爲：圓柱體上平面的圓的半徑、圓柱體下平面的圓的半徑、圓柱體的長。

二、點光源

var light;
function initLight() {
    light = new THREE.PointLight(0xffffff);
    light.position.set(0, 0, 200);
    scene.add(light);
}

點光源的使用能夠使得3D圖形具備立體感，主要體如今陰影的效果方面，以下圖：

三、動畫效果的實現。

學過物理的都知道，物體的運動有個參照系的概念，這裏經過修改相機的位置，調整與幾何體之間的距離造成動畫效果。

function animation3D() {
    cylinder.position.x -= 0.2;
    renderer.render(scene, camera);
    requestAnimationFrame(animation3D);
}

修改相機的位置後，須要從新渲染，不然不生效。不斷循環修改相機的位置，便可造成動畫的效果。