<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../libs/three.min.99.js"></script>
<script type="text/javascript" src="../libs/OrbitControls.js"></script>
<style>
body,html{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
</head>
<body>
<div id="WebGL-output" style="width: 100%;height: 100%;">
</div>
<script type="text/javascript">
var map3d = {
width: 0, height: 0,
scene: null, camera: null, renderer: null, plane: null,
controls: null, clock: null,
selection: null, focusbg: null, offset: new THREE.Vector3(), objects: [],
init: function () {
this.width = document.getElementById('WebGL-output').clientWidth;
this.height = document.getElementById('WebGL-output').clientHeight;
// 场景
this.scene = new THREE.Scene();
// 相机
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.1, 1000);
this.camera.position.set(30, 30, 30);
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
this.scene.add(this.camera);
// 渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setClearColor('rgba(0,0,0,0.1)', 0.0);
this.renderer.setSize(this.width, this.height);
this.renderer.shadowMapEnabled = true;
document.getElementById("WebGL-output").appendChild(this.renderer.domElement);
// 参考轴
this.axes = new THREE.AxisHelper(20);
this.scene.add(this.axes);
// 地图平面
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
this.plane = new THREE.Mesh(planeGeometry, planeMaterial);
this.plane.rotation.x = -0.5 * Math.PI;
this.plane.position.x = 0;
this.plane.position.y = 0;
this.plane.position.z = 1;
this.scene.add(this.plane);
// 新建一个轨道控制器
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target = new THREE.Vector3(0, 0, 0);
this.controls.maxDistance = 150;
this.controls.enableKeys = true;
// 用于更新轨道控制器
this.clock = new THREE.Clock();
// 添加一个环境光
this.scene.add(new THREE.AmbientLight(0x141414));
// 添加一个方向光
var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(0, 30, 20);
this.scene.add(dirLight);
},
};
function animate() {
var delta = map3d.clock.getDelta();
map3d.controls.update(delta);
requestAnimationFrame(animate);
map3d.renderer.render(map3d.scene, map3d.camera);
}
window.onload = function () {
map3d.init();
animate();
};
</script>
</body>
</html>
