初识Three
1.下面将创建第一个场景并添加物体和摄像机。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My 002 Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<div id="stats-output"></div>
<script type="text/javascript" src="../three-js/jquery-2.1.4.min.js"></script><p id="counter"></p>
<script src="../three-js/three.js"></script>
<script src="../three-js/Tween.js"></script>
<script src="../three-js/OrbitControls.js"></script>
<script src="../three-js/libs/stats.min.js"></script>
<script src="../three-js/libs/dat.gui.min.js"></script>
<script>
// 设置全局变量
var scene, camera, renderer, controls, tween, door, stats, cube,sphere, gui;
//GUI库提供用户操作界面，控制动画参数
var controls = new function(){
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}
init();
window.addEventListener('resize', onResize, false);
function init(){
stats = initStats();
gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);
//1.场景
scene = new THREE.Scene();
//2.相机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
//3.渲染器
renderer = new THREE.WebGLRenderer();
//设置渲染器的大小为窗口的内宽度，也就是内容区的宽度。
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.shadowMapEnabled = true;
//创建一个坐标轴
var axes = new THREE.AxisHelper();
scene.add(axes);
//设置光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
//创建平面几何体
var planGeometry = new THREE.PlaneGeometry( 60,20,1,1);
var planMaterial = new THREE.MeshLambertMaterial( {color: 0xccccc} );
var plane = new THREE.Mesh( planGeometry, planMaterial );
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
//是否投射阴影
plane.receiveShadow = true;
scene.add( plane );
//创建立方几何体
var cubeGeometry = new THREE.BoxGeometry( 4,4,4 );
var cubeMaterial = new THREE.MeshLambertMaterial( {color: 0x00ff00} );
cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
//是否投射阴影
cube.castShadow = true;
scene.add( cube );
//创建球几何体
var sphereGeometry = new THREE.SphereGeometry( 4, 20, 20 );
var sphereMaterial = new THREE.MeshLambertMaterial( {color: 0x7777ff, wireframe: true} );
sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
//是否投射阴影
sphere.castShadow = true;
scene.add( sphere );
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
document.body.appendChild( renderer.domElement );
render();
}
// 渲染
var step = 0;
function render(){
stats.update();
step+=0.04;
requestAnimationFrame(render);
sphere.position.x = 20 + (10 *(Math.cos(step)));
sphere.position.y = 2 +(10 * Math.abs(Math.sin(step)));
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
renderer.render(scene,camera);
}
//显示每秒传输帧数
function initStats(){
var stats = new Stats();
//0: 检测每秒传输帧数fps; 1: 画面渲染时间。
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("stats-output").appendChild( stats.domElement );
return stats;
}
//对浏览器大小的自适应
function onResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth , window.innerHeight);
}
</script>
</body>
</html>
示例地址：http://114.116.34.95/three/test1/test-1.html
