Spaces:
Running
Running
Update index.html
Browse files- index.html +37 -2
index.html
CHANGED
|
@@ -62,13 +62,48 @@
|
|
| 62 |
}
|
| 63 |
}
|
| 64 |
|
| 65 |
-
|
| 66 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 67 |
function animate() {
|
| 68 |
requestAnimationFrame(animate);
|
| 69 |
renderer.render(scene, camera);
|
| 70 |
}
|
| 71 |
animate();
|
|
|
|
| 72 |
</script>
|
| 73 |
</head>
|
| 74 |
<body>
|
|
|
|
| 62 |
}
|
| 63 |
}
|
| 64 |
|
| 65 |
+
var raycaster = new THREE.Raycaster();
|
| 66 |
+
var mouse = new THREE.Vector2();
|
| 67 |
+
var selectedCard = null;
|
| 68 |
+
var offset = new THREE.Vector3();
|
| 69 |
+
function onMouseMove(event) {
|
| 70 |
+
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
| 71 |
+
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
| 72 |
+
if (selectedCard) {
|
| 73 |
+
raycaster.setFromCamera(mouse, camera);
|
| 74 |
+
var intersects = raycaster.intersectObject(table, true);
|
| 75 |
+
if (intersects.length > 0) {
|
| 76 |
+
var intersect = intersects[0];
|
| 77 |
+
selectedCard.position.copy(intersect.point.add(offset));
|
| 78 |
+
}
|
| 79 |
+
}
|
| 80 |
+
}
|
| 81 |
+
function onMouseDown(event) {
|
| 82 |
+
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
| 83 |
+
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
| 84 |
+
raycaster.setFromCamera(mouse, camera);
|
| 85 |
+
var intersects = raycaster.intersectObjects(cards, true);
|
| 86 |
+
if (intersects.length > 0) {
|
| 87 |
+
selectedCard = intersects[0].object;
|
| 88 |
+
var intersects = raycaster.intersectObject(table, true);
|
| 89 |
+
if (intersects.length > 0) {
|
| 90 |
+
var intersect = intersects[0];
|
| 91 |
+
offset.subVectors(selectedCard.position, intersect.point);
|
| 92 |
+
}
|
| 93 |
+
}
|
| 94 |
+
}
|
| 95 |
+
function onMouseUp(event) {
|
| 96 |
+
selectedCard = null;
|
| 97 |
+
}
|
| 98 |
+
window.addEventListener('mousemove', onMouseMove, false);
|
| 99 |
+
window.addEventListener('mousedown', onMouseDown, false);
|
| 100 |
+
window.addEventListener('mouseup', onMouseUp, false);
|
| 101 |
function animate() {
|
| 102 |
requestAnimationFrame(animate);
|
| 103 |
renderer.render(scene, camera);
|
| 104 |
}
|
| 105 |
animate();
|
| 106 |
+
|
| 107 |
</script>
|
| 108 |
</head>
|
| 109 |
<body>
|