-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.htm
160 lines (137 loc) · 5.26 KB
/
test.htm
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width" />
<style>
body {
background-color: #EEE;
}
canvas {
display: block;
margin: auto;
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/colors.js"></script>
<script src="js/geometry.js"></script>
<script src="js/height_map.js"></script>
<script src="js/pattern_folder.js"></script>
<script src="js/LDROptions.js"></script>
<script src="js/LDRShaders.js"></script>
<script src="js/LDRColorMaterials.js"></script>
<script src="js/LDRGeometries.js"></script>
<script src="js/LDRLoader.js"></script>
<script src="js/maps.js"></script>
<h3>DAT</h3>
<pre id="ldr"></pre>
<div id="preview1"></div>
<h3>FOLDED</h3>
<div id="preview2"></div>
<script>
var ldrOptions = new LDR.Options(); // Determine how to show lines.
// Set up cameras:
var camera1 = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000000);
var camera2 = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000000);
camera1.position.set(10000, 7000, 10000); camera2.position.set(10000, 7000, 10000);
camera1.lookAt(new THREE.Vector3()); camera2.lookAt(new THREE.Vector3());
// Set up scenes:
var scene1 = new THREE.Scene(), scene2 = new THREE.Scene(); // Original and folded.
scene1.background = scene2.background = new THREE.Color(0xFFFFFF);
var baseObject1, baseObject2;
// Set up renderer:
var renderer1 = new THREE.WebGLRenderer({antialias: true}), renderer2 = new THREE.WebGLRenderer({antialias: true});
renderer1.setPixelRatio(window.devicePixelRatio); renderer2.setPixelRatio(window.devicePixelRatio);
function render() {
renderer1.render(scene1, camera1);
renderer2.render(scene2, camera2);
}
var preview1 = document.getElementById('preview1'), preview2 = document.getElementById('preview2');
preview1.appendChild(renderer1.domElement); preview2.appendChild(renderer2.domElement);
var w, h;
function onWindowResize(){
w = window.innerHeight * 0.9;//preview1.offsetWidth*0.8;
h = window.innerWidth * 0.9;//preview1.offsetHeight*0.8;
w = h = Math.min(w, h);
camera1.left = camera2.left = -w;
camera1.right = camera2.right = w;
camera1.top = camera2.top = h;
camera1.bottom = camera2.bottom = -h;
camera1.updateProjectionMatrix(); camera2.updateProjectionMatrix();
renderer1.setSize(w, h); renderer2.setSize(w, h);
render();
}
window.addEventListener('resize', onWindowResize, false);
onWindowResize();
// React to user input:
var controls1 = new THREE.OrbitControls(camera1, renderer1.domElement);
var controls2 = new THREE.OrbitControls(camera2, renderer2.domElement);
controls1.addEventListener('change', render); controls2.addEventListener('change', render);
// Used for setting up models in scenes:
var origo = new THREE.Vector3();
var inv = new THREE.Matrix3(); inv.set(1,0,0, 0,-1,0, 0,0,-1); // Invert Y, and Z-axis for LDraw
function showInScenes(ldr1, ldr2) {
//console.log("Setting up scene for LDR: " + ldr1);
//console.log("and "+ ldr2);
function showInScene(ldr, scene, camera, baseObject) {
var ldrLoader = new THREE.LDRLoader(function(){}, {onError:console.dir, onWarning:console.warn});
ldrLoader.parse(ldr);
if(!ldrLoader.mainModel) {
console.log('A valid model was not parsed. Nothing will be shown');
return baseObject;
}
var mainModel = ldrLoader.ldrPartTypes[ldrLoader.mainModel]; // Main model from the LDraw file (first model encountered)
var geometryBuilder = new LDR.GeometryBuilder(ldrLoader, {});
geometryBuilder.build([mainModel]);
if(baseObject) {
scene.remove(baseObject);
}
baseObject = new THREE.Group();
scene.add(baseObject);
var opaqueObj = new THREE.Group();
baseObject.add(opaqueObj);
var transObj = new THREE.Group();
baseObject.add(transObj);
var mc = new LDR.MeshCollector(opaqueObj, transObj);
mainModel.generateThreePart(ldrLoader, 16, origo, inv, true, false, mc);
// Find center of drawn model:
var b = mc.boundingBox;
var elementCenter = new THREE.Vector3();
b.getCenter(elementCenter);
baseObject.position.set(-elementCenter.x, -elementCenter.y, -elementCenter.z);
//baseObject.add(new THREE.Box3Helper(b, 0xff0000)); // Uncomment if you want to see the bounding box
camera.zoom = w/b.min.distanceTo(b.max)*2;
return baseObject;
}
// First handle preview:
baseObject1 = showInScene(ldr1, scene1, camera1, baseObject1);
// Then the folded model:
baseObject2 = showInScene(ldr2, scene2, camera2, baseObject2);
onWindowResize();
}
/*
Folding
*/
function fold(ldr) {
//console.log('Folding ' + ldr);
var [paths,header] = UTIL.ldr2Paths(ldr, console.warn);
var map = "-4 -8 -3 -7 0 0 3 -1";
//var map = MAPS.ALL[4].toTxt();
var mapper = new LDR.LinearHeightMap(map);
paths = mapper.foldPaths(paths);
// LDraw content:
var lDrawContent = UTIL.paths2LDraw(paths, header);
$('#ldr_result').val(lDrawContent);
showInScenes(ldr, lDrawContent + mapper.toLDR());
}
$(document).ready(function() {
//$('#ldr').load('./sample_files/sticker_corvette_flag.dat', fold);
$('#ldr').load('./sample_files/testb.dat', fold);
});
</script>
</body>
</html>