three.js教程一 使用three.js创建一个三维场景

1、html页面样式

html,body{margin: 0; padding: 0; overflow: hidden}

2、引入js

<script src="../js/three.js"></script>
<script src="./js/jquery.min.js"></script>
//Stats.js性能监控器，主要用于检测动画运行时的帧数
<script src="./js/Stats.js"></script>
//图形界面库,使用这个库可以很容易地创建出能够改变代码变量的界面组件
<script src="./js/dat.gui.js"></script>

3、代码

//性能监控器输出容器
<div id="stats"></div>
$(function(){
//统计功能的引入
function initStats(){
var stats = new Stats();
//0 FPS 刷新频率,一秒渲染次数
//1 MS 刷新周期，渲染一次时间
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
$("#stats").append(stats.domElement);
return stats;
}
var stats = initStats();
//定义dat.GUI需要修改的变量
var controls = new function(){
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}
var gui = new dat.GUI();
//变量传递给dat.GUI并限定取值范围
gui.add(controls,"rotationSpeed",0,0.5);
gui.add(controls,"bouncingSpeed",0,0.5);
//屏幕尺寸
var size = {
"w": window.innerWidth,
"h": window.innerHeight,
//屏幕比例
"s": window.innerWidth / window.innerHeight
};
//定义场景
var scene = new THREE.Scene();
//定义相机，参数一是角度，参数二屏幕比例，参数三最小可视范围，参数四最大可视范围
var camera = new THREE.PerspectiveCamera(45,size.s,0.1,1000);
//相机观察位置、及方向
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
//定义渲染器
var renderer = new THREE.WebGLRenderer();
//设置场景背景色
renderer.setClearColor(new THREE.Color(0xeeeeee));
//设置场景尺寸
renderer.setSize(size.w,size.h);
//开启阴影
renderer.shadowMapEnabled = true;
//设置聚光灯光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40,60,-10);
//开启阴影
spotLight.castShadow = true;
scene.add(spotLight);

//定义坐标，参数为坐标的大小
var axes = new THREE.AxesHelper(20);
scene.add(axes);
//定义模型
//地板模型的形状
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
//模型材质
var planeMaterial = new THREE.MeshLambertMaterial({
color: 0xcccccc });
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
//开启阴影
plane.receiveShadow = true;
plane.rotation.x = -0.5*Math.PI;//Math.PI = 180度
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
//立体体模型
var cubeGeometry = new THREE.BoxGeometry(4,4,4);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000,
//wireframe是否开启模型的边框线
wireframe: false
});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
//开启阴影
cube.castShadow = true;
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
//球体模型
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0x7777ff,
//wireframe是否开启模型的边框线
wireframe: false
});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
//开启阴影
sphere.castShadow = true;
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);
//渲染到页面中
$("body").append(renderer.domElement);
//定义渲染函数及动画效果
var step = 0;
function renderScene(){
stats.update();
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;
step += controls.bouncingSpeed;
sphere.position.x = 20+(10*Math.cos(step));
sphere.position.y = 4+(10*Math.abs(Math.sin(step)));
//requestAnimationFrame是浏览器用于定时循环操作的一个接口
requestAnimationFrame(renderScene);
renderer.render(scene,camera);
}
renderScene();
});
</script>

运行效果：