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>