【Three.js】一、第一个Three.js项目

一、Three.js下载

Three.js github:https://github.com/mrdoob/three.js。

一个WebGL程序包含三大基本对象：场景(sence)、摄像机(camera)、渲染器(renderer)。场景是一个容器，用来保存要渲染的物体与光源。射摄像机用来调整物体视角。渲染器的作用是基于摄像机定义的角度去渲染计算物体的位置。

二、一个Three简单例子

import './index.styl';
import * as THREE from 'three';
import Stats from 'stats-js'; // 检测动画运行时的帧数
import * as dat from 'dat.gui'; // 用于创建右上角控制器

window.onload = init();
var scence;
var camera;
var renderer;
function init() {
    var stats = initStats();
    var controls = new function () {
        this.rotationSpeed = 0.02;
        this.bouncingSpeed = 0.03;
    }
    var gui = new dat.GUI();
    gui.add(controls, 'rotationSpeed', 0, 0.5);
    gui.add(controls, 'bouncingSpeed', 0, 0.5);
    // 创建场景
    scence = new THREE.Scene();
    // 创建相机
    camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth/window.innerHeight,
        0.1,
        1000);
    // 创建渲染器
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xEEEEEE, 1.0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    // 轴
    var axes = new THREE.AxisHelper(20);
    scence.add(axes);
    var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);

    plane.rotation.x = -0.5*Math.PI;
    plane.position.x = 15;
    plane.position.y = 0;
    plane.position.z = 0;
    plane.receiveShadow = true;

    var cubeGeometry = new THREE.BoxGeometry(4,4,4);
    var cubeMaterial = new THREE.MeshLambertMaterial({
        color: 0xff0000
    });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.position.x = -4;
    cube.position.y = 5;
    cube.position.z = 0;
    cube.castShadow = true;

    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshLambertMaterial({
        color: 0x7777ff
    });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.x = 20;
    sphere.position.y = 4;
    sphere.position.z = 2;
    sphere.castShadow = true;


    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 40, -15);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize = new THREE.Vector2(1024,1024);
    spotLight.shadow.camera.far = 130;
    spotLight.shadow.camera.near = 40;

    scence.add(plane);
    scence.add(cube);
    scence.add(sphere);
    scence.add(spotLight);

    var ambienLight = new THREE.AmbientLight(0x353535);
    scence.add(ambienLight);

    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scence.position);
    document.getElementById('WebGL-output').appendChild(renderer.domElement);
    renderer.render(scence, camera);
}

function initStats(){
    var stats = new Stats();
    stats.showPanel(0);
    document.getElementById('Stats-output').appendChild(stats.domElement);
    return stats;
}

  上面代码创建了一个平面(plane)、一个立方体(cube)、一个球体(sphere)，并建立了一个坐标轴(axes)，spotLight是创建的光源，用来产生阴影，ambienLight用来定义环境光。关于坐标轴：红色是x轴，绿色是y轴、蓝色是z轴。
  为了让立方体与小球产生动画效果，添加如下代码：

var step = 0;
function renderScence() {
	stats.update();
	// 立方体旋转
	cube.rotation.x += controls.rotationSpeed;
	cube.rotation.y += controls.rotationSpeed;
	cube.rotation.z += controls.rotationSpeed;
	// 小球跳动
	step += controls.bouncingSpeed;
	sphere.position.x = 20 + (10 * Math.cos(step));
	sphere.position.y = 2 + (10* Math.abs(Math.sin(step)));
	requestAnimationFrame(renderScence);
	renderer.render(scence, camera);
}

将renderer.render(scence, camera)改为renderScence(),小球会做一个循环的抛物运动而立方体则自动旋转：

完整示例：https://github.com/MAXLZ1/threejs_demo