360全景图教程：HelloWorld
360全景图教程：HelloWorld
three.js介绍
three.js 是一款基于javascript开发的WebGL 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。Three.js采用javascript开发，这意味着它是运行在浏览器上的。 本教程只用到这个强大的引擎的一小部分，如果读者对该引擎感兴趣，可以查看我们提供的教程。
新建网页
要开始使用three.js，必须先创建一个网页，下面是一个简单的网页模板
<!DOCTYPE html> <html> <head> <title>360全景图教程-开发学院</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> </head> <body> </body> </html>
导入trhee.js
创建好网页之后，导入three.js，代码如下：
<script src="js/three.js"></script>
第一个demo
导入好three.js就可以开始编写第一个程序了，一个最基本的3d程序需要至少一个相机，一个场景以及各种3d物体组成，所以我们要先创建场景和相机。
var scene = new THREE.Scene();//创建场景 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );//创建摄像机
接下来创建渲染器，渲染器用来渲染场景中的物体，包括材质、贴图、光照等。
var renderer = new THREE.WebGLRenderer();//创建rederer renderer.setSize( window.innerWidth, window.innerHeight );//设置宽高
然后还要添加这个渲染器到网页中。
document.body.appendChild( renderer.domElement );//添加rederer到网页中
现在最基本的场景已经搭建好了，但是现在场景中还没有任何物体，需要添加一些可供显示的3d物体，我们来创建一个立方体。
var geometry = new THREE.BoxGeometry( 1, 1, 1 );//创建立方体
var material = new THREE.MeshBasicMaterial( { color: 0x66aa55 } );//创建材质
var cube = new THREE.Mesh( geometry, material );//创建实例
scene.add( cube );//把物体添加到场景中最后还要设置rederder去渲染当前场景：
renderer.render( scene, camera );
现在打开页面就可以看到一个方块显示在屏幕正中间，但是此时看不出来是一个3d物体，因为它总是一个面对着相机，我们写个函数让它动起来。
var animate = function () {//旋转方法
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );//渲染方法要写在这里了
};
//renderer.render( scene, camera );//注释掉这个渲染方法
animate();//直接执行这个函数，它会每帧调用一次旋转方法此时刷新页面，就可以看到一个不断旋转的立方体了，下面给出完整的代码：
<!DOCTYPE html>
<html>
<head>
<title>360全景图教程-开发学院</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();//场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//创建摄像机
var renderer = new THREE.WebGLRenderer();//创建rederer
renderer.setSize(window.innerWidth, window.innerHeight);//设置宽高
document.body.appendChild(renderer.domElement);//添加rederer到网页中
var geometry = new THREE.BoxGeometry(1, 1, 1);//创建立方体
var material = new THREE.MeshBasicMaterial({color: 0x66aa55});//创建材质
var cube = new THREE.Mesh(geometry, material);//创建实例
scene.add(cube);//把物体添加到场景中
camera.position.z = 5;//设置相机的z轴
var animate = function () {//旋转方法
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>