-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathexample.html
138 lines (116 loc) · 4.51 KB
/
example.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - ColladaLoader2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - ColladaLoader2 test
</div>
<script src="js/Three.js"></script>
<script src="ColladaLoader2.js"></script>
<script>
var container;
var camera, scene, renderer;
init();
requestAnimationFrame(animate);
function init() {
// container
container = document.createElement( 'div' );
document.body.appendChild( container );
// scene
scene = new THREE.Scene();
// camera and lights (hardcoded)
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.up = new THREE.Vector3( 0, 0, 1 ); // the example that we load has Z as the up axis
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
// model (loaded from file)
var loader = new ColladaLoader2();
loader.options["verboseMessages"] = true; // for a list of available options, see ColladaLoader2.prototype._init
loader.setLog(onLoaderLogMessage);
loader.load('testdata/monkey.dae', onFileLoaded, onProgress);
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// events
window.addEventListener( 'resize', onWindowResize, false );
}
function onLoaderLogMessage(msg, type) {
// Called whenever the loader outputs a log message.
// Default is already to output messages to console.log, this is just for illustration.
var typeStr = ColladaLoader2.messageTypes[type];
console.log(typeStr + ": " + msg);
}
function onFileLoaded(collada) {
// collada.scene is an instance of THREE.Scene, containing the whole COLLADA scene
// Note that collada files contain whole scene graphs (including cameras and lights), not just individual meshes.
var loadedScene = collada.scene;
// We could directly append the loaded scene to the global scene (as a sub-graph).
// Here, we just extract all meshes and append them to the root of the global scene.
// Note that this way, we may lose local transformations of the loaded nodes.
collada.scene.traverse( function(node) {
if (node instanceof THREE.Mesh) {
scene.add(node);
}
});
// Other interesting members:
var loadedScene2 = collada.threejs.scene; // The whole loaded THREE.Scene (same as above, alias)
var loadedImages = collada.threejs.images; // Array of loaded THREE.Texture objects
var loadedGemetries = collada.threejs.geometries; // Array of loaded THREE.Geometry objects
var loadedMaterials = collada.threejs.materials; // Array of loaded THREE.Material objects
var colladaInfo = collada.getInfo(); // A pretty-printed string outlining the contents of the collada file
}
function onProgress(data) {
// data.total might be null if the server does not set the Content-Length header
if (data.total) {
var percentLoaded = 100 * data.loaded / data.total;
console.log("Load progress: " + percentLoaded.toFixed(2) + "%");
} else {
console.log("Load progress: " + data.loaded + " bytes");
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate(timestamp) {
requestAnimationFrame( animate );
render(timestamp);
}
function render(timestamp) {
camera.position.x = Math.cos( 0.001*timestamp ) * 5;
camera.position.y = Math.sin( 0.001*timestamp ) * 5;
camera.position.z = 1;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>