1.下载three.js库。https://github.com/mrdoob/three.js/
第一步:新建一个项目文件夹“Threejs”
第二步:在Threejs文件夹内新建一个html文件(index.html)。该文件是通过浏览器进入游戏的入口。
第三步:在Threejs文件夹内新建一个libs文件夹,用来存放three.js库和需要用到的其他库。
第四步:在Threejs文件夹内新建一个images文件夹,用来存放需要素材。
第五步:在Threejs文件夹内新建一个js文件夹,用来存放我们开发项目写的脚本。
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;
漆黑一片。因为我们还没向场景添加任何东西。