forked from LasseD/buildinginstructions.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample_view.htm
98 lines (78 loc) · 4.09 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
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Sample Render</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<!-- Three.js core libraries. three.min.js is required for rendering, while OrbitControls.js is used for user input -->
<script src="js/three.min.js"></script><script src="js/OrbitControls.js"></script>
<!-- Three.js libraries for supporting Outline Pass -->
<script src="js/CopyShader.js"></script><script src="js/Pass.js"></script><script src="js/OutlinePass.js"></script><script src="js/ShaderPass.js"></script><script src="js/RenderPass.js"></script><script src="js/MaskPass.js"></script><script src="js/EffectComposer.js"></script>
<!-- buildinginstructions.js core libraries. All required. -->
<script src="js/colors.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>
<!-- buildinginstructions.js optional libraries: Generator.js for quick creation of some primitives. Required for studs.js which can create customized studs. StudioTexmap.js allows for Studio 2.0-created files -->
<script src="js/LDRGenerator.js"></script>
<script src="js/LDRStuds.js"></script>
<script src="js/StudioTexmap.js"></script>
<script>
let startTime = new Date();
let model = 'models/corvette_full.mpd'; // The model to be rendered:
//let model = 'models/luminance.ldr';
// Set up camera:
let 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:
let scene = new THREE.Scene();
scene.background = new THREE.Color(0xFFFFFF);
let baseObject = new THREE.Group(), opaqueObject = new THREE.Group(), sixteenObject = new THREE.Group(); transObject = new THREE.Group();
baseObject.add(opaqueObject); baseObject.add(sixteenObject); baseObject.add(transObject); scene.add(baseObject); // Draw non-trans before trans.
let mc = new LDR.MeshCollector(opaqueObject, sixteenObject, transObject);
// Set up renderer:
let composer = null, storage;
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
let render = () => composer === null ? renderer.render(scene, camera) : composer.render();
function onWindowResize(){
const w = window.innerWidth;
const h = window.innerHeight;
camera.left = -w;
camera.right = w;
camera.top = h;
camera.bottom = -h;
camera.updateProjectionMatrix();
renderer.setSize(w, h);
composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
if(!mc.attachGlowPasses(w, h, scene, camera, composer)) {
composer = null; // Nothing glows - just render directly.
}
render();
}
// React to user input:
let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
window.addEventListener('resize', onWindowResize, false);
// Three.js loader for LDraw models:
let ldrLoader;
let onLoad = function() {
ldrLoader.generate(14, mc);
// Find center of drawn model:
let b = mc.boundingBox;
let elementCenter = new THREE.Vector3();
b.getCenter(elementCenter);
baseObject.position.set(-elementCenter.x, -elementCenter.y, -elementCenter.z);
//baseObject.add(new THREE.Box3Helper(b, 0x0000FF)); // Uncomment if you want to see the bounding box
camera.zoom = 1.5*window.innerWidth/b.min.distanceTo(b.max);
onWindowResize();
console.log("Model rendered in " + (new Date()-startTime) + "ms.");
}
LDR.Studs.makeGenerators('', 0, 0);
ldrLoader = new THREE.LDRLoader(onLoad, null, {cleanUpPrimitivesAndSubParts:false});
ldrLoader.load(model);
</script>
</body>
</html>