137 lines
4.0 KiB
HTML
137 lines
4.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>2019nCov draw by Cheney</title>
|
||
|
|
<style type="text/css">
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
canvas {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src="./three.js" type="text/javascript"></script>
|
||
|
|
<script src="./ColladaLoader.js" type="text/javascript"></script>
|
||
|
|
<script src="./OrbitControls.js" type="text/javascript"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var scene, camera, renderer, daeModel;
|
||
|
|
// 获得可见区域宽度
|
||
|
|
var width = document.documentElement.clientWidth;
|
||
|
|
// 获得可见区域的高度
|
||
|
|
var height = document.documentElement.clientHeight;
|
||
|
|
//初始化场景
|
||
|
|
function initScene() {
|
||
|
|
scene = new THREE.Scene();
|
||
|
|
}
|
||
|
|
|
||
|
|
//初始化摄像机
|
||
|
|
function initcamera() {
|
||
|
|
aspect = width / height;
|
||
|
|
D = 8;
|
||
|
|
camera = new THREE.OrthographicCamera(-D * aspect, D * aspect, D, -D, 1, 1000);
|
||
|
|
//camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,200)
|
||
|
|
camera.position.set(300, -300, 300);
|
||
|
|
camera.lookAt(new THREE.Vector3(0, 0, 0));
|
||
|
|
camera.up.x = 0;
|
||
|
|
camera.up.y = 0;
|
||
|
|
camera.up.z = 1;
|
||
|
|
//camera.rotation.z = 1 / 6 * Math.PI;
|
||
|
|
//camera.rotation.z = 5/6*Math.PI;
|
||
|
|
}
|
||
|
|
|
||
|
|
function initthree() {
|
||
|
|
renderer = new THREE.WebGLRenderer();
|
||
|
|
renderer.setSize(width, height);
|
||
|
|
renderer.setClearColor(0xffffff);
|
||
|
|
document.body.appendChild(renderer.domElement);
|
||
|
|
/*
|
||
|
|
var spotLight = new THREE.SpotLight( 0xffffff );
|
||
|
|
spotLight.position.set( 100, 1000, 100 );
|
||
|
|
|
||
|
|
spotLight.castShadow = true;
|
||
|
|
|
||
|
|
spotLight.shadow.mapSize.width = 1024;
|
||
|
|
spotLight.shadow.mapSize.height = 1024;
|
||
|
|
|
||
|
|
spotLight.shadow.camera.near = 500;
|
||
|
|
spotLight.shadow.camera.far = 4000;
|
||
|
|
spotLight.shadow.camera.fov = 30;
|
||
|
|
|
||
|
|
scene.add( spotLight );
|
||
|
|
*/
|
||
|
|
}
|
||
|
|
|
||
|
|
function initlight() {
|
||
|
|
var light = new THREE.DirectionalLight(0xffffff, 2);
|
||
|
|
light.position.set(300, -300, 200);
|
||
|
|
scene.add(light);
|
||
|
|
|
||
|
|
|
||
|
|
var ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
|
||
|
|
scene.add( ambientLight );
|
||
|
|
|
||
|
|
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
|
||
|
|
camera.add( pointLight );
|
||
|
|
}
|
||
|
|
|
||
|
|
function LoadModel() {
|
||
|
|
var loader = new THREE.ColladaLoader();
|
||
|
|
loader.load("./model.dae", function (collada) {
|
||
|
|
|
||
|
|
console.log("collada", collada)
|
||
|
|
|
||
|
|
daeModel = collada.scene;
|
||
|
|
daeModel.scale.set(5, 5, 5);
|
||
|
|
daeModel.position.set(0, 0, 0);
|
||
|
|
scene.add(daeModel);
|
||
|
|
//参考坐标轴
|
||
|
|
var axisHelper = new THREE.AxisHelper(500);
|
||
|
|
scene.add(axisHelper);
|
||
|
|
},
|
||
|
|
function (xhr) {
|
||
|
|
console.log((xhr.loaded / xhr.total * 100) + "% loaded");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//初始化渲染器
|
||
|
|
function render() {
|
||
|
|
requestAnimationFrame(render);
|
||
|
|
|
||
|
|
renderer.clear();
|
||
|
|
|
||
|
|
renderer.render(scene, camera);
|
||
|
|
//if( daeModel ){
|
||
|
|
// daeModel.rotation.z++;
|
||
|
|
//}
|
||
|
|
}
|
||
|
|
|
||
|
|
var Controls;
|
||
|
|
|
||
|
|
// 初始化控制器
|
||
|
|
function initControls() {
|
||
|
|
Controls = new THREE.OrbitControls(camera);
|
||
|
|
}
|
||
|
|
|
||
|
|
function startGame() {
|
||
|
|
console.log('Load Model started...');
|
||
|
|
initScene();
|
||
|
|
initcamera();
|
||
|
|
initthree();
|
||
|
|
initlight();
|
||
|
|
LoadModel();
|
||
|
|
render();
|
||
|
|
initControls();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body onload="startGame()" onresize="startGame()">
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|