forked from wikimedia/3d2png
-
Notifications
You must be signed in to change notification settings - Fork 0
/
3d2png.html
128 lines (99 loc) · 3.39 KB
/
3d2png.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</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;
}
</style>
</head>
<body>
<script src="node_modules/three/three.js"></script>
<script src="node_modules/three/examples/js/loaders/STLLoader.js"></script>
<script src="AMFLoader.js"></script>
<script>
var container;
var camera, scene, renderer;
init();
animate();
// Assumes a main object to focus on
function center( object ) {
if ( object.type == 'Group' ) {
center( object.children[0] );
} else if ( object.type == 'Mesh' ) {
object.geometry.center();
object.geometry.computeBoundingBox();
bbox = object.geometry.boundingBox;
bbox_width = bbox.max.x - bbox.min.x;
bbox_height = bbox.max.z - bbox.min.z;
bbox_depth = bbox.max.y - bbox.min.y;
camerax = -bbox_width;
cameray = -bbox_depth;
cameraz = bbox_height;
camera.position.set( camerax, cameray, cameraz );
console.log( 'camera position', camerax, cameray, cameraz );
}
}
function load_amf( manager, file, scene ) {
var loader = new THREE.AMFLoader( manager );
loader.load( file, function ( object ) {
center( object );
scene.add( object );
} );
}
function load_stl( manager, file, scene ) {
var loader = new THREE.STLLoader( manager );
loader.load( file, function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xaaaaff, shading: THREE.FlatShading } ),
object = new THREE.Mesh( geometry, material );
center( object );
scene.add( object );
} );
}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 500 );
camera.up.set( 0, 0, 1 );
camera.add( new THREE.PointLight( 0xffffff, 0.4 ) );
scene.add(camera);
var ambient = new THREE.AmbientLight( 0x999999 );
scene.add( ambient );
var manager = new THREE.LoadingManager();
//load_amf( manager, 'samples/rook.amf', scene );
//load_stl( manager, 'samples/WikipediaGlobePrint.stl', scene );
//load_stl( manager, 'samples/octocat_head.stl', scene );
//load_stl( manager, 'samples/DavidStatue.stl', scene );
//load_stl( manager, 'samples/Scull_geant_fix02.stl', scene );
//load_stl( manager, 'samples/brain-lh.stl', scene );
load_stl( manager, 'samples/globe-whole.stl', scene );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xaaaaaa, 1 );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>