创建一个简单的入门案例
three.js的三大场景：场景（scene）、相机（camera）和渲染器（renderer），包含了这些就可以将物体渲染到网页中去了，下面我们来做一个小案例感受一下。
1.首先，我们需要设置一个容器来接纳这些物体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用构建Three.js场景的基本组件</title>
<script type="text/javascript" src="../js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../js/three.js"></script>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
</body>
</html>
2.创建一个平面试试：
// 创建场景
var scene = new THREE.Scene();
// 创建透明相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 将相机添加到场景中
scene.add(camera);
// 创建WebGL渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 0.1));
renderer.setSize(window.innerWidth, window.innerHeight);
// 创建平面
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterail = new THREE.MeshLambertMaterial({
color: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry, planeMaterail);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
// 设置照相机的位置
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// 设置环境光
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// 创建立方体
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: Math.random() * 0xffffff
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;
scene.add(cube);
// 将渲染器的dom添加到webGL后
$("#WebGL-output").append(renderer.domElement);
// 渲染
renderer.render(scene, camera);
效果如下：
new-plane.png
可以看到平面场景中一片漆黑，添加的立方体并没有显示出来，因此我们需要添加聚光灯光源，添加代码如下：
// 设置聚光灯光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, 30);
scene.add(spotLight);
效果如下：
new-cube.png
3.添加阴影
<script type="text/javascript" src="../js/stats.min.js"></script>
// 创建场景
var scene = new THREE.Scene();
// 创建透明相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 将相机添加到场景中
scene.add(camera);
// 创建WebGL渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 0.1));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
// 创建平面
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterail = new THREE.MeshLambertMaterial({
color: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry, planeMaterail);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
// 设置照相机的位置
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// 设置环境光
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// 设置聚光灯光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -30);
spotLight.castShadow = true;
scene.add(spotLight);
// 创建立方体
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: Math.random() * 0xffffff
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;
cube.castShadow = true;
scene.add(cube);
// 将渲染器的dom添加到webGL后
$("#WebGL-output").append(renderer.domElement);
// 渲染
renderer.render(scene, camera);
效果如下：
cube-shadow.png
4.添加统计对象，修改渲染方法，引入requestAnimationFrame()方法（可以解决setInterval()函数问题）：
// 初始化统计对象
function initStats() {
var stats = new Stats();
// 监测FPS
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0';
stats.domElement.style.top = '0';
$("#Stats-output").append(stats.domElement);
return stats;
}
var stats = initStats();
// 渲染
function render() {
stats.update();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
5.让立方体旋转起来
cube.position.x = 0;
cube.position.y = 5;
cube.position.z = 0;
cube.castShadow = true;
function render() {
stats.update();
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
效果如下：
cube-rotation.gif
网友评论