Skip to content
webgl_extrapolation_pick
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL Pick - Extrapolation</title>
<style type='text/css'>
body{
position: relative;
left: 10px;
top: 10px;
padding: 0px;
margin: 0px;
}
.container{
padding: 0px;
margin: 0px;
}
canvas{
border-style:dashed;
border-width:thin;
cursor:crosshair;
z-index: 0;
}
</style>
<script type='text/javascript' src='./scripts/jquery.min.js'></script>
<script type='text/javascript' src='./scripts/three.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
var camera, scene, renderer;
var background;
var projector;
var quad;
var follow = false;
//extrapolation
var mouseX, mouseY;
var R = [[0, 0], [0, 0]];
var dR = [0, 0];
var d2R = [0, 0];
var dt = [0, 0];
function Push(arr, v){
for(var i = arr.length - 1; i > 0; --i){
arr[i] = arr[i - 1];
}
arr[0] = v;
}
var clock = new THREE.Clock();
var animClock = new THREE.Clock();
var width = 800, height = 600;
init();
animate();
function animate(){
requestAnimationFrame( animate );
var delta = animClock.getDelta();
if(follow == true){
var ray = projector.pickingRay(new THREE.Vector2(mouseX, mouseY), camera);
quad.position.x = ray.origin.x + delta * dR[0] + 0.5 * delta * delta * d2R[0];
quad.position.y = ray.origin.y + delta * dR[1] + 0.5 * delta * delta * d2R[1];
}
renderer.render( scene, camera );
}
function onDocumentMouseMove(event){
event.preventDefault();
var elem = $("canvas");
var offset = elem.offset();
var offsetX = offset.left;
var offsetY = offset.top;
Push(dt, clock.getDelta());
var prevX = mouseX;
var prevY = mouseY;
//NDC
mouseX = ((event.clientX - offsetX) / width) * 2 - 1;
mouseY = -((event.clientY - offsetY) / height) * 2 + 1;
Push(R, [mouseX - prevX, mouseY - prevY]);
dR = [R[0][0]/dt[0], R[0][1]/dt[0]];
d2R = [(R[1][0] - R[0][0])/(dt[0] + dt[1]), (R[1][1] - R[0][1])/(dt[0] + dt[1])];
}
function onDocumentMouseDown(event){
console.log("DOWN");
event.preventDefault();
var ray = projector.pickingRay(new THREE.Vector2(mouseX, mouseY), camera);
var intersects = ray.intersectObjects(scene.children);
if(intersects.length > 0){
follow = true;
}
}
function onDocumentMouseUp(event){
event.preventDefault();
console.log("UP");
follow = false;
}
function init(){
camera = new THREE.OrthographicCamera(-width/2.0, width/2.0, height/2.0, -height/2.0, -1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
projector = new THREE.Projector();
var material = new THREE.MeshBasicMaterial({color: 0xff0000});
quad = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), material);
quad.position.z = -500;
scene.add(quad);
renderer = new THREE.WebGLRenderer();
//renderer = new THREE.CanvasRenderer();
renderer.setSize(width, height);
$(".container").append(renderer.domElement);
$(".container")[0].addEventListener('mousedown', onDocumentMouseDown, false);
$(".container")[0].addEventListener('mousemove', onDocumentMouseMove, false);
$(".container")[0].addEventListener('mouseup', onDocumentMouseUp, false);
clock.start();
animClock.start();
}
});
</script>
</head>
<body>
<div class = 'container'>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.