Sailing in data ocean.
Published
Edited
Sep 27, 2020
mutable isMouseHover = false
{
let test = document.getElementsByClassName("observablehq")[1];
test.addEventListener(
"mouseleave",
function(event) {
mutable isMouseHover = false;
},
false
);
test.addEventListener(
"mouseover",
function(event) {
mutable isMouseHover = true;
},
false
);
}
mutable intersected = 0
function renderRayCaster(
mouse,
camera,
scene,
intersectedElement = { name: undefined },
color = "rgb(255,0,0)"
) {
// Ray Caster Function. @ferrari212. Inspirations:
// https://threejs.org/docs/#api/en/core/Raycaster;
// https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes_ortho.html
// mouse: {x: float, y: float}; position normalized from -1 to 1 of the relative position of the mouse
// camera: obj; THREE.js camera object
// scene: obj; THREE.js scene object
// intersectedElement : obj; Previous intersected element
//
// return new intersected element object
var raycaster = new THREE.Raycaster();
// update the picking ray with the camera and mouse position
raycaster.setFromCamera(mouse, camera);
// Ensures just the layers = 1 one will be effected by raycaster
//raycaster.layers.set(0);
//console.log(raycaster.layers);
scene.updateMatrixWorld();
// calculate objects intersecting the picking ray
// recursive setted to true to check all sub elements
var intersects = raycaster.intersectObjects(scene.children, true);
//console.log(intersects);
// Enabling and disabling elements
// intersects.forEach(element => {
// console.log(element.visible)
// element.visible ? element.layers.enable(1) : element.layers.disable(1)
// })
// Try verifies the if there is intersects[0].object error
try {
setNewColor();
return intersectedElement;
} catch {
// Objsect touched nothing
returnToOriginalColor();
return { name: undefined };
}
function setNewColor() {
if (
intersects[0].object.name != "" &&
intersects[0].object.name != undefined
) {
// Objsect touched something
if (intersectedElement.name != intersects[0].object.name) {
// Objsect touched is different from the previeus
if (intersectedElement.name != undefined) {
// Check if there was a previeus touched object
// Make the previous in its original color
intersectedElement.material.color.set(intersectedElement.currentHex);
}
// cast name and colors of the object
intersectedElement = intersects[0].object;
intersectedElement.currentHex = intersectedElement.material.color.getHex();
//paint element of red
intersects[0].object.material.color.set(color);
}
intersectedElement.status = true;
} else {
returnToOriginalColor();
// cast name and colors of the object as udefined
intersectedElement = {
name: undefined,
currentHex: undefined,
status: false
};
}
}
function returnToOriginalColor() {
if (intersectedElement.name != undefined) {
// Check if there was a previeus touched
// Make the previous in its original color
intersectedElement.material.color.set(intersectedElement.currentHex);
}
// cast name and colors of the object as udefined
intersectedElement = {
name: undefined,
currentHex: undefined,
status: false
};
}
}
mutable mouse = new THREE.Vector2()
document
.getElementsByClassName("observablehq")[1]
.addEventListener("mousemove", onMouseMove, false)
function onMouseMove(event) {
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mutable mouse.clientX = event.clientX;
mutable mouse.clientY = event.clientY;
mutable mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mutable mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
styles = html`
<style>
#gui {
position: absolute;
top: 73px;
right: 0px
}
</style>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
