<!DOCTYPE html>
<html>
<head>
<title>Example 02.01 - Basic Scene</title>
<script type="text/javascript" src="../three.js/three.js"></script>
<script type="text/javascript" src="../three.js/stats.js"></script>
<script type="text/javascript" src="../three.js/dat.gui.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
#Stats-output{
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// 初始化函数
function init() {
//
var stats = initStats();
// 创建场景
var scene = new THREE.Scene();
// 创建摄像机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 场景添加摄像机
scene.add(camera);
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
// 设置颜色
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
// 设置大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染阴影启动
renderer.shadowMapEnabled = true;
// 生成平面对象
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
// 平面材质
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
// 生成平面/
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 平面上显示阴影
plane.receiveShadow = true;
// 平面的反转90度和坐标
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
//场景加入平面
scene.add(plane);
// 摄像机的坐标
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
// 摄像机看向场景中央
camera.lookAt(scene.position);
// 创建创建指定颜色的环境光
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
// 场景加入环境光
scene.add(ambientLight);
// 创建光照对象
var spotLight = new THREE.SpotLight(0xffffff);
// 创建灯光坐标
spotLight.position.set(-40, 60, -10);
// 灯光产生阴影
spotLight.castShadow = true;
// 场景中添加灯光
scene.add(spotLight);
// 添加到网页中的div标签中
document.getElementById("WebGL-output").appendChild(renderer.domElement);
// 定义变量
var step = 0;
// 定义组件函数
var controls = new function () {
// 旋转步进角度为每次0.02
this.rotationSpeed = 0.02;
// 立方体的数量赋值给变量
this.numberOfObjects = scene.children.length;
// 删除立方体函数
this.removeCube = function () {
//获取所有的立方体
var allChildren = scene.children;
// 获取左后添加的立方体
var lastObject = allChildren[allChildren.length - 1];
// 如果最后一个立方体是Mesh对象，避免是摄像机或是光源
if (lastObject instanceof THREE.Mesh) {
// 场景移出这个对象
scene.remove(lastObject);
// 更新立方体对象数量
this.numberOfObjects = scene.children.length;
}
};
//添加一个新的立方体
this.addCube = function () {
// 随机生成边长为1到3的随机数的立方体
var cubeSize = Math.ceil((Math.random() * 3));
var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
//立方体的颜色是随机的
var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
// 创建立方体
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 产生阴影
cube.castShadow = true;
// 为立方体命名为数量
cube.name = "cube-" + scene.children.length;
// 立方体的坐标是随机的
cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
cube.position.y = Math.round((Math.random() * 5));
cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));
// 场景添加立方体
scene.add(cube);
// 更新立方体数量
this.numberOfObjects = scene.children.length;
};
// 创建控制台打印组件
this.outputObjects = function () {
// 打印现在立方体的数量包含灯光平面摄像机等必需的东西
console.log(scene.children);
}
};
// 创建菜单组件
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.02); // 旋转步长
gui.add(controls, 'addCube'); // 添加立方体
gui.add(controls, 'removeCube'); // 删除立方体
gui.add(controls, 'outputObjects'); // 控制台输出对象
gui.add(controls, 'numberOfObjects').listen(); // 显示剩余或共有对象数量
render(); // 渲染
//定义渲染函数
function render() {
// 更新时间 左上角的监视器
stats.update();
// 操作场景中的所有对象
scene.traverse(function (e) {
// 是场景中的对象是mech对象但不是平面
if (e instanceof THREE.Mesh && e != plane) {
// 旋转角度
e.rotation.x += controls.rotationSpeed;
e.rotation.y += controls.rotationSpeed;
e.rotation.z += controls.rotationSpeed;
}
});
// 稳定持续的渲染场景函数
requestAnimationFrame(render);
// 渲染场景
renderer.render(scene, camera);
}
function initStats() {
//开始初始化Stats函数
var stats = new Stats();
//刷新频率,一秒渲染次数
stats.setMode(0); // 0: fps, 1: ms
// 监视器的显示位置
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '10px';
stats.domElement.style.top = '10px';
// 将监视器添加到页面中
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init
</script>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)