-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplane_rendering_viz.html
151 lines (112 loc) · 4.88 KB
/
plane_rendering_viz.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
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
<html>
<body>
<body>
<script type=module>
// help I'm stupid and can't figure out how to render a parallelogram -_-
// use WASD to tweak the ray direction (and associated hit point)
// blue arrow is the noraml
// green arrows mean the hit point is on the inside of that bound
// cube is camera
// black arrow is ray
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
let camera, controls, scene, renderer;
init();
//render(); // remove when using next line for animation loop
animate();
function updateSceneWithDir(scene, ray_dir) {
while(scene.children !== undefined && scene.children.length > 0){
scene.remove(scene.children[0]);
}
const o = new THREE.Vector3(-3, 4, -10);
const a = new THREE.Vector3(0.1, 1, 0).normalize();
const b = new THREE.Vector3(1, 0, 0).normalize();
const normal = a.clone().cross(b);
const camera_o = new THREE.Vector3(0, 0, 0);
const ndotray = normal.clone().dot(ray_dir);
const d = normal.clone().dot(camera_o);
const t = (normal.clone().dot(o) + d) / ndotray;
console.log({ndotray, d, t});
const p = camera_o.clone().add(ray_dir.clone().multiplyScalar(t));
const corner1off = p.clone().sub(o);
let d0 = normal.clone().dot(a.clone().cross(corner1off));
let d1 = normal.clone().dot(corner1off.clone().cross(b));
let d2 = normal.clone().dot(corner1off.clone().sub(b).cross(a));
let d3 = normal.clone().dot(b.clone().cross(corner1off.clone().sub(a)));
console.log({d0, d1, d2, d3});
scene.add(new THREE.ArrowHelper(normal.clone().normalize(), o, 1, 0x0000FF));
scene.add(new THREE.ArrowHelper(ray_dir.clone().normalize(), camera_o, 10, 0x000000));
scene.add(new THREE.ArrowHelper(corner1off.clone().normalize(), o, corner1off.length(), 0xFFEEAA));
scene.add(new THREE.ArrowHelper(a.clone().normalize(), o, a.length(), d0 < 0 ? 0xFF0000 : 0x00FF00));
scene.add(new THREE.ArrowHelper(b.clone().normalize(), o, b.length(), d1 < 0 ? 0xFF0000 : 0x00FF00));
scene.add(new THREE.ArrowHelper(a.clone().normalize(), o.clone().add(b), a.length(), d2 < 0 ? 0xFF0000 : 0x00FF00));
scene.add(new THREE.ArrowHelper(b.clone().normalize(), o.clone().add(a), b.length(), d3 < 0 ? 0xFF0000 : 0x00FF00));
// camera
const geometry = new THREE.BoxGeometry(2, 2, 2);
const m = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 0x333333}))
m.position.set(camera_o.x, camera_o.y, camera_o.z);
scene.add(m);
// hit point
const s = new THREE.Mesh(new THREE.SphereGeometry(0.3, 8, 8), new THREE.MeshBasicMaterial({color: 0x330000}))
s.position.set(p.x, p.y, p.z);
scene.add(s);
}
var ray_dir;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 2, 1, 0 );
// controls
controls = new OrbitControls( camera, renderer.domElement );
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 10;
controls.maxDistance = 50;
controls.maxPolarAngle = Math.PI / 2;
ray_dir = new THREE.Vector3(0, 0.3, -0.6);
updateSceneWithDir(scene, ray_dir);
window.addEventListener( 'resize', onWindowResize );
function onDocumentKeyDown(event) {
let keyCode = event.which;
if(event.key == "a") {
ray_dir.x -= 0.01;
updateSceneWithDir(scene, ray_dir);
}
if(event.key == "d") {
ray_dir.x += 0.01;
updateSceneWithDir(scene, ray_dir);
}
if(event.key == "w") {
ray_dir.y += 0.01;
updateSceneWithDir(scene, ray_dir);
}
if(event.key == "s") {
ray_dir.y -= 0.01;
updateSceneWithDir(scene, ray_dir);
}
}
document.addEventListener('keydown', onDocumentKeyDown, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</body>
</html>