forked from doj/buildinginstructions.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
sample_view.htm
94 lines (80 loc) · 3.39 KB
/
sample_view.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Sample Render</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/colors.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>
// The model to be rendered:
//var modelTypeUrl = 'models/fail1.mpd';
var modelTypeUrl = 'models/tristack.ldr';
// Set up camera:
var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000000);
camera.position.set(10000, 7000, 10000);
camera.lookAt(new THREE.Vector3());
// Set up scene:
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xFFFFFF);
var baseObject = new THREE.Group(), opaqueObject = new THREE.Group(), transObject = new THREE.Group();
baseObject.add(opaqueObject); // Draw non-trans before trans.
baseObject.add(transObject);
scene.add(baseObject);
var mc = new LDR.MeshCollector(opaqueObject, transObject);
// Set up renderer:
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
function render() {
renderer.render(scene, camera);
}
document.body.appendChild(renderer.domElement);
function onWindowResize(){
camera.left = -window.innerWidth;
camera.right = window.innerWidth;
camera.top = window.innerHeight;
camera.bottom = -window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
// React to user input:
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
window.addEventListener('resize', onWindowResize, false);
// Three.js loader for LDraw models:
var ldrLoader;
var onLoad = function() {
var geometryBuilder = new LDR.GeometryBuilder(ldrLoader, {});
var toBeBuilt = geometryBuilder.getAllTopLevelToBeBuilt();
geometryBuilder.build(toBeBuilt);
var mainModel = ldrLoader.partTypes[ldrLoader.mainModel]; // Main model from the LDraw file (first model encountered)
// Place model in scene:
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
// Generate the mesh:
mainModel.generateThreePart(ldrLoader, 0, 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 = window.innerWidth/b.min.distanceTo(b.max);
onWindowResize();
}
var ldrOptions = new LDR.Options(); // Determine how to show lines. Change this in sample_instruction.htm
ldrLoader = new THREE.LDRLoader(onLoad);
ldrLoader.load(modelTypeUrl);
</script>
</body>
</html>