forked from MaptimeSEA/maptime_bear
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
118 lines (99 loc) · 3.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html lang="en">
<head>
<title>Maptime Bear</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/ColladaLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<div>
<img src="images/maptimelalogo.png" style="width:25%; position:absolute; padding:25px">
</div>
<script>
//Initializes three.js
var scene, camera, renderer, hemiLight;
init();
animate();
function init() {
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer = new THREE.WebGLRenderer({antialias:true, preserveDrawingBuffer : true});
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor( 0xffffff, 1);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(35, WIDTH / HEIGHT, 0.1, 10000);
camera.position.set(20,27.5,30);
scene.add(camera);
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
//Loads Lights
hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 1 );
hemiLight.color.setHSL( 0.6, 1, .65 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 500, 0 );
scene.add( hemiLight )
dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.color.setHSL( 0.1, 1, .8 );
dirLight.position.set( 0, 1, 0 );
dirLight.position.multiplyScalar( 50 );
scene.add( dirLight );
dirLight.castShadow = true;
dirLight.shadowMapWidth = 2048;
dirLight.shadowMapHeight = 2048;
/*
var light = new THREE.PointLight(0xfffff3, 0.8);
light.position.set(-100,200,100);
scene.add(light);
var sphereSize = 1;
var pointLightHelper = new THREE.PointLightHelper( light, sphereSize );
scene.add( pointLightHelper );
var light2 = new THREE.PointLight(0xd7f0ff, 0.2);
light2.position.set(200,200,100);
scene.add(light2);
var sphereSize = 1;
var pointLightHelper2 = new THREE.PointLightHelper( light2, sphereSize );
scene.add( pointLightHelper2 );
var light3 = new THREE.PointLight(0xFFFFFF, 1);
light3.position.set(150,200,-100);
scene.add(light3);
var sphereSize = 1;
var pointLightHelper3 = new THREE.PointLightHelper( light3, sphereSize );
scene.add( pointLightHelper3 );
*/
//Loads Bear from Collada, sketchup export with textures
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
//Insert dae file location here
loader.load( 'model/maptimebear_12.dae', function ( collada ) {
var dae = collada.scene;
var skin = collada.skins[ 0 ];
dae.position.set(20,0,-45);//x,z,y- if you think in blender dimensions ;)
dae.scale.set(1.5,1.5,1.5);
scene.add(dae);
var axes = new THREE.AxisHelper(50);
axes.position = dae.position;
//scene.add(axes);
var gridXZ = new THREE.GridHelper(10, 10);
gridXZ.setColors( new THREE.Color(0x8f8f8f), new THREE.Color(0x8f8f8f) );
gridXZ.position.set(0,0,0);
scene.add(gridXZ);
});
//Adds mouse controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>