Three.js 是一款运行在浏览器中的 3D 引擎，我们可以用它在 web 中创建各种三维场景，包括了摄影机、光影、材质等各种对象。使用它可以让我们更加直观的了解 webgl 的世界。
一、搭建HTML框架，导入libs
<!DOCTYPE html>
<html>
<head>
<title>Example 01.01 - Basic skeleton</title>
<script type="text/javascript" src="./libs/three.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
<script type="text/javascript">
function init() {
}
window.onload = init
</script>
</body>
</html>
二、Three.js三要素
1、场景（Scene）
场景（Scene）是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。
一个场景想要显示任何东西，必须要添加摄像机（Camera）、光源和对象。这将在第三部分进行介绍。
下面来添加一个场景（Scene）
var scene = new THREE.Scene();
2、摄像机（Camera）
摄像机（Camera）决定了能够在场景中看到什么
下面来定义一个摄像机（Camera）及其坐标
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 30;
camera.position.y = 20;
camera.position.z = 40;
camera.lookAt(scene.position);
其中用到了PerspectiveCamera(fov, aspect, near, far)
- fov 可视角度
- aspect 为width/height,通常设置为canvas元素的高宽比。
- near近端距离
- far远端距离
只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到。
3、渲染器（renderer）
顾名思义，渲染器（renderer）是将观察到的场景渲染到浏览器中。
下面来定义一个渲染器（renderer），并设置它的背景色和尺寸大小
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
三、为场景添加元素
1、添加光源
这里添加一个点光源
var spotLight = new THREE.SpotLight(0xffffff); //定义一个点光源，并设置颜色
spotLight.position.set(40, 60, 40); //设置点光源坐标
spotLight.castShadow = true;
scene.add(spotLight);
2、添加一个辅助坐标轴
var axes = new THREE.AxisHelper(20);
scene.add(axes);
3、添加一个物体
这里添加一个使用MeshLambertMaterial材质的长方体
var sphereGeometry = new THREE.SphereGeometry(6, 4, 4); // 创建一个长方体
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});// 创建一个材质
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 构造一个球体并附着材质
sphere.position.x = 0; //设置球体的x轴坐标
sphere.position.y = 4; //设置球体的x轴坐标
sphere.position.z = 0; //设置球体的x轴坐标
scene.add(sphere);
4、添加一个辅助平面（可选）
var planeGeometry = new THREE.PlaneGeometry(40, 20);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
四、输出
接下来使用渲染器来输出建模结果
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
可以看到我们的建模结果如图所示
Github链接：https://github.com/JayneJing/ThreeJs-test/blob/master/threejs-1.html
参考资料：《Three.js开发指南》
网友评论