【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