1.下载three.js库。​​https://github.com/mrdoob/three.js/​

第一步:新建一个项目文件夹“Threejs”

第二步:在Threejs文件夹内新建一个html文件(index.html)。该文件是通过浏览器进入游戏的入口。

第三步:在Threejs文件夹内新建一个libs文件夹,用来存放three.js库和需要用到的其他库。

第四步:在Threejs文件夹内新建一个images文件夹,用来存放需要素材。

第五步:在Threejs文件夹内新建一个js文件夹,用来存放我们开发项目写的脚本。

three.js入门_github

index.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>

three.js文件 在目录下建立libs文件夹,把three,js拷贝进去

https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.js

main.js文件

var renderer;//渲染器
var scene;//场景
var camera;//相机
function init() {//init()函数是我们整个项目的入口,类似我们平时编程时的main函数。
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;

three.js入门_html_02

漆黑一片。因为我们还没向场景添加任何东西。