-
Notifications
You must be signed in to change notification settings - Fork 0
/
mesh.html
102 lines (73 loc) · 2.65 KB
/
mesh.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
<html>
<head>
<title>Ply Parser Project</title>
<style>
body { margin: 0px; width: 100%; }
canvas {
display: block;
margin: 25px auto;
width: 80%;
height: 100%
}
</style>
<script src="Libraries/three.min.js"></script>
<script src ="Libraries/OrbitControls.js"></script>
<script src ="mesh.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
//camera with orbit controlling
var camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0, 0, 20);//camera faces the front of the mesh
controls = new THREE.OrbitControls( camera );
controls.damping = 0.2;
controls.addEventListener( 'change', render );
//Ply file and texture file to be used as arguments of THREE.PLYLoader
var url_geom = "https://3dplusme-prod.s3.amazonaws.com/QA_MODEL/RICH-LAPTOP-B-2015-02-11/1mij5kglt8ER2JtQ.ply";
var url_texture = "https://3dplusme-prod.s3.amazonaws.com/QA_MODEL/RICH-LAPTOP-B-2015-02-11/ASIRkUDI0v7ORj6Y.jpg";
var loader = new THREE.PLYLoader( url_geom, url_texture );
loader.addEventListener( 'load', function ( event ) {
//geometry built from ply
var meshInfo = event.content;
var geometry = meshInfo[0];
var material = meshInfo[1];
//Function that actually makes the request to google book api
mesh = new THREE.Mesh( geometry, material );
var bbox = new THREE.BoundingBoxHelper( mesh, 0x36D439 );
bbox.update();
console.log(bbox);
var biggest = bbox.box.max;
var smallest = bbox.box.min;
var center = new THREE.Vector3( (biggest.x + smallest.x ) / 2,
(biggest.y + smallest.y ) / 2,
(biggest.z + smallest.z ) / 2 );
//camera is now dynamic - every geometry will be placed so that its
//center is at the origin.
mesh.position.set( -center.x, -center.y, -center.z );
bbox.update();
geometry.boundingBox = bbox.box;
//uncomment these to see axis and bounding box
// var axis = buildAxis();
// scene.add( bbox );
scene.add(mesh);
// console.log(mesh);
} );
loader.load( geomFile );
//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xD3D3D3, .8);
document.body.appendChild( renderer.domElement );
animate();
function animate() {
requestAnimationFrame( animate );
controls.update();
}
function render() {
renderer.render( scene, camera );
}
render();
</script>
</body>
</html>