-
Notifications
You must be signed in to change notification settings - Fork 0
/
three-point_perspective.html
96 lines (83 loc) · 2.79 KB
/
three-point_perspective.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
<html>
<head>
<title>Three-point perspective test</title>
<script src="three.js-master/build/three.js"></script>
<script src="three.js-master/examples/js/controls/OrbitControls.js"></script>
<script src="dat.gui-master/build/dat.gui.js"></script>
</head>
<body>
<nav style="position: absolute; top:0; left:0, height:2vh; z-index:999">
<a href="." style="color: #66ffff">Back to index.</a>
</nav>
<script>
"use strict";
//Globals
var clock, renderer, scene, camera, controls, gui;
var container;
(function main() {
//Renderer setup
clock = new THREE.Clock(/*false*/); //false vil skru av autostart
document.body.style = "overflow: hidden;";
var container = document.createElement("div");
container.style = "position: absolute; top: 0; left: 0;"
document.body.appendChild(container);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
//Scene setup:
scene = new THREE.Scene();
//scene.add(new THREE.GridHelper(S, 8));
scene.add(new THREE.AmbientLight(0xffffff, 1));
scene.add(function(){
let sun = new THREE.DirectionalLight(0xffffff, 1);
sun.position.set(54, 74, -87);
return sun;
}());
//Fake cube with lines to vanishing points:
container = new THREE.Group();
for (let i = 0; i < 2; i++) {
for (let j = 0; j < 2; j++) {
for (let k = 0; k < 2; k++) {
let ah = new THREE.AxesHelper(1000000);
ah.position.set(-(i-0.5), -(j-0.5), -(k-0.5));
ah.scale.set((i-0.5)*2,(j-0.5)*2,(k-0.5)*2);
container.add(ah);
}
}
}
container.add(new THREE.Mesh(
new THREE.BoxBufferGeometry(1,1,1),
new THREE.MeshPhongMaterial({color: 0xcccccc, transparent: true, opacity: 0.8})
));
container.scale.set(100,100,100);
scene.add(container);
/*let ah = new THREE.AxesHelper(1000);
scene.add(ah);*/
//Camera setup
camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight, 1, 200000);
window.addEventListener('resize', function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
requestAnimationFrame(render);
}, false);
camera.position.set(800, -1200, 900);
camera.lookAt(scene.position);
scene.add(camera);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", ()=>requestAnimationFrame(render));
gui = new dat.GUI();
gui.add(container.scale, "x", 10, 1000).name("Breadth");
gui.add(container.scale, "y", 10, 1000).name("Height");
gui.add(container.scale, "z", 10, 1000).name("Length");
gui.add(camera, "fov", 1, 179).onChange(function (value) {
camera.updateProjectionMatrix();
});
requestAnimationFrame(render);
})();
function render() {
renderer.render(scene, camera);
}
</script>
</body>
</html>