<Three.js>(第一节)环境搭建
Three.js顾名思义3D的js库。是运行在浏览器的基于webgl的3D引擎。该引擎是github上的一个开源项目,下载地址:https://github.com/mrdoob/three.js/
1、搭建一个本地服务器。(本人用的是另外一台mac电脑的自带本地服务器)
2、下载three.js库。https://github.com/mrdoob/three.js/
准备好前面的操作后,接下来是创建一个项目的过程。
第一步:新建一个项目文件夹“Threejs”
第二步:在Threejs文件夹内新建一个html文件(index.html)。该文件是通过浏览器进入游戏的入口。
第三步:在Threejs文件夹内新建一个libs文件夹,用来存放three.js库和需要用到的其他库。
第四步:在Threejs文件夹内新建一个images文件夹,用来存放需要素材。
第五步:在Threejs文件夹内新建一个js文件夹,用来存放我们开发项目写的脚本。
html文件:
<!DOCTYPE html>
<html>
<head>
<title>three.js</title>
<script src="libs/three.js"></script>
<script src="js/main.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<script>
</script>
<body>
</body>
</html>
下面开始写脚本。在js文件夹内新建一个main.js文件:
var renderer;
var scene;
var camera;
function init() {
scene = new THREE.Scene();//场景
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相机
renderer = new THREE.WebGLRenderer();//渲染
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
render();
}
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
window.onload = init;
代码分析:
init()函数是我们整个项目的入口,类似我们平时编程时的main函数。
上面的脚本中还包含scene; camera; renderer;分别是场景,相机,渲染器。每个项目必须得有这三样才能把显示模型显示在屏幕上。
scene:像电影上的场景,类似容器包含各种我们能看到的精灵、地图等。后面还会讲到灯光等。
camera:通过camera,我们才能看到场景上的画面,类似我们的眼睛,有视角等。
renderer:渲染器,把3D空间上的事物渲染到一个2D的平面。在屏幕上显示场景上的事物。
运行结果:
一片黑呜呜的。因为我们还没向场景添加任何东西。
我们可以向场景中添加一些元素。例如添加一个正方体,效果如下:
具体实现方法下一节讲。