Looking for mouseover tooltips in three.js?

Question

Looking for mouseover tooltips in three.js?

Currently, I am working on loading an object similar to this demo. My goal is to display a tooltip or infobox when hovering over a specific part of the object. For example, upon clicking the top button, I would like a tooltip to appear above the box. I have experimented with various examples, but none seem to work with my particular object.

References: Example 1, Example 2

Here's what I've attempted:

 cube.name = "top cube";
  cube.getObjectbyname = "top cube obj";
  scene.add(cube); // add cube to the scene

As a newcomer to both three.js and angular material, I'm unsure how to incorporate a tooltip. Can someone provide guidance on how to address this issue? Specifically, I'm looking for assistance in linking my button to the object's top, left, or right side.

javascript angularjs three.js

Answer 1

Answer №1

Check out this example showcasing tooltips using the CSS2DRenderer module, where tooltips are continuously displayed and synchronized with objects' positions.

If you prefer them to only show up on hover, you'll need to selectively toggle them through a Raycaster (sample code available in the documentation).

Here's an illustration of both techniques combined (Codesandbox) with a single shared label that dynamically moves and updates based on hovered elements within your scene:

body {
  margin: 0;
}

canvas {
  cursor: grab;
  display: block;
}

canvas:active {
  cursor: grabbing;
}

.hovered {
  cursor: help;
}

.label {
  color: #fff;
  font-family: sans-serif;
  padding: 2px;
  background: rgba(0, 0, 0, 0.6);
}

<script type="module">
  import {
    WebGLRenderer,
    PerspectiveCamera,
    Scene,
    BoxGeometry,
    MeshNormalMaterial,
    Mesh,
    Vector3,
    Box3,
    Raycaster,
    Vector2,
  } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccb8a4bea9a98cfce2fdfef9e2fe">[email protected]</a>/build/three.module.js';
  import { OrbitControls } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196d716b7c7c592937282b2c">[email protected]</a>/examples/jsm/controls/OrbitControls.js';
  import {
    CSS2DRenderer,
    CSS2DObject,
  } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acd8c4dec9c9ec9c829d9e99829e">[email protected]</a>/examples/jsm/renderers/CSS2DRenderer.js';

  // Boilerplate
  const { innerWidth, innerHeight } = window;

  const renderer = new WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(innerWidth, innerHeight);
  renderer.setPixelRatio(2);
  document.body.appendChild(renderer.domElement);

  const camera = new PerspectiveCamera(70, innerWidth / innerHeight, 0.1, 10);
  camera.position.z = 1;

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;

  const scene = new Scene();

  const geometry = new BoxGeometry(0.2, 0.2, 0.2);
  const material = new MeshNormalMaterial();
  const mesh = new Mesh(geometry, material);
  mesh.name = 'mesh';
  scene.add(mesh);

  // Setting up labels
  const labelRenderer = new CSS2DRenderer();
  labelRenderer.setSize(innerWidth, innerHeight);
  labelRenderer.domElement.style.position = 'absolute';
  labelRenderer.domElement.style.top = '0px';
  labelRenderer.domElement.style.pointerEvents = 'none';
  document.body.appendChild(labelRenderer.domElement);

  const labelDiv = document.createElement('div');
  labelDiv.className = 'label';
  labelDiv.style.marginTop = '-1em';
  const label = new CSS2DObject(labelDiv);
  label.visible = false;
  scene.add(label);

  // Tracking mouse movement for object selection
  const raycaster = new Raycaster();
  const mouse = new Vector2();

  window.addEventListener('mousemove', ({ clientX, clientY }) => {
    const { innerWidth, innerHeight } = window;

    mouse.x = (clientX / innerWidth) * 2 - 1;
    mouse.y = -(clientY / innerHeight) * 2 + 1;
  });

  // Handling window resize
  window.addEventListener('resize', () => {
    const { innerWidth, innerHeight } = window;

    renderer.setSize(innerWidth, innerHeight);
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
  });

  renderer.setAnimationLoop(() => {
    controls.update();

    // Selecting objects with normalized mouse coordinates
    raycaster.setFromCamera(mouse, camera);

    const [hovered] = raycaster.intersectObjects(scene.children);

    if (hovered) {
      // Configuring label
      renderer.domElement.className = 'hovered';
      label.visible = true;
      labelDiv.textContent = hovered.object.name;

      // Determining offset from object dimensions
      const offset = new Vector3();
      new Box3().setFromObject(hovered.object).getSize(offset);

      // Moving label over hovered element
      label.position.set(
        hovered.object.position.x,
        offset.y / 2,
        hovered.object.position.z
      );
    } else {
      // Resetting label
      renderer.domElement.className = '';
      label.visible = false;
      labelDiv.textContent = '';
    }

    // Rendering scene
    renderer.render(scene, camera);

    // Rendering labels
    labelRenderer.render(scene, camera);
  });
</script>

Answer 2

Check out this example showcasing tooltips using the CSS2DRenderer module, where tooltips are continuously displayed and synchronized with objects' positions.

If you prefer them to only show up on hover, you'll need to selectively toggle them through a Raycaster (sample code available in the documentation).

Here's an illustration of both techniques combined (Codesandbox) with a single shared label that dynamically moves and updates based on hovered elements within your scene:

body {
  margin: 0;
}

canvas {
  cursor: grab;
  display: block;
}

canvas:active {
  cursor: grabbing;
}

.hovered {
  cursor: help;
}

.label {
  color: #fff;
  font-family: sans-serif;
  padding: 2px;
  background: rgba(0, 0, 0, 0.6);
}

<script type="module">
  import {
    WebGLRenderer,
    PerspectiveCamera,
    Scene,
    BoxGeometry,
    MeshNormalMaterial,
    Mesh,
    Vector3,
    Box3,
    Raycaster,
    Vector2,
  } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccb8a4bea9a98cfce2fdfef9e2fe">[email protected]</a>/build/three.module.js';
  import { OrbitControls } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196d716b7c7c592937282b2c">[email protected]</a>/examples/jsm/controls/OrbitControls.js';
  import {
    CSS2DRenderer,
    CSS2DObject,
  } from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acd8c4dec9c9ec9c829d9e99829e">[email protected]</a>/examples/jsm/renderers/CSS2DRenderer.js';

  // Boilerplate
  const { innerWidth, innerHeight } = window;

  const renderer = new WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(innerWidth, innerHeight);
  renderer.setPixelRatio(2);
  document.body.appendChild(renderer.domElement);

  const camera = new PerspectiveCamera(70, innerWidth / innerHeight, 0.1, 10);
  camera.position.z = 1;

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;

  const scene = new Scene();

  const geometry = new BoxGeometry(0.2, 0.2, 0.2);
  const material = new MeshNormalMaterial();
  const mesh = new Mesh(geometry, material);
  mesh.name = 'mesh';
  scene.add(mesh);

  // Setting up labels
  const labelRenderer = new CSS2DRenderer();
  labelRenderer.setSize(innerWidth, innerHeight);
  labelRenderer.domElement.style.position = 'absolute';
  labelRenderer.domElement.style.top = '0px';
  labelRenderer.domElement.style.pointerEvents = 'none';
  document.body.appendChild(labelRenderer.domElement);

  const labelDiv = document.createElement('div');
  labelDiv.className = 'label';
  labelDiv.style.marginTop = '-1em';
  const label = new CSS2DObject(labelDiv);
  label.visible = false;
  scene.add(label);

  // Tracking mouse movement for object selection
  const raycaster = new Raycaster();
  const mouse = new Vector2();

  window.addEventListener('mousemove', ({ clientX, clientY }) => {
    const { innerWidth, innerHeight } = window;

    mouse.x = (clientX / innerWidth) * 2 - 1;
    mouse.y = -(clientY / innerHeight) * 2 + 1;
  });

  // Handling window resize
  window.addEventListener('resize', () => {
    const { innerWidth, innerHeight } = window;

    renderer.setSize(innerWidth, innerHeight);
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();
  });

  renderer.setAnimationLoop(() => {
    controls.update();

    // Selecting objects with normalized mouse coordinates
    raycaster.setFromCamera(mouse, camera);

    const [hovered] = raycaster.intersectObjects(scene.children);

    if (hovered) {
      // Configuring label
      renderer.domElement.className = 'hovered';
      label.visible = true;
      labelDiv.textContent = hovered.object.name;

      // Determining offset from object dimensions
      const offset = new Vector3();
      new Box3().setFromObject(hovered.object).getSize(offset);

      // Moving label over hovered element
      label.position.set(
        hovered.object.position.x,
        offset.y / 2,
        hovered.object.position.z
      );
    } else {
      // Resetting label
      renderer.domElement.className = '';
      label.visible = false;
      labelDiv.textContent = '';
    }

    // Rendering scene
    renderer.render(scene, camera);

    // Rendering labels
    labelRenderer.render(scene, camera);
  });
</script>

Looking for mouseover tooltips in three.js?

Answer №1

Similar questions

Javascript addClass and removeClass functions are not functioning as expected

Successful AJAX Post request functioning exclusively within the Web Console (Preview)

Troubleshooting: Height setting issue with Kendo UI Grid during editing using Jquery

Issue with hidden.bs.modal event not triggering in Bootstrap

Can someone break down the meaning of "returning $http.post" in Angular while developing a factory service?

Adding color between lines in Three.js

Exploring the power of Vue.js by utilizing nested components within single file components

Experiencing a lack of information when trying to retrieve data through an http request in an express/react

Rearranging columns in Bootstrap 4 beta across multiple containers

Understanding the performance of video in threejs when using getImageData

Tips for executing an SQL query containing a period in its name using JavaScript and Node.JS for an Alexa application

Creating a uniform mobile version for all smartphones on a website

I encountered an SyntaxError while working with Ionic. The error message reads: "Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>)."

What is the method to have the text cursor within a text field start a few pixels in?

How would you go about creating a VueJS component that displays a table with a set number of columns and automatically distributes the cells within them?

Using Puppeteer-cluster along with cheerio in an express router API results in an unexpectedly blank response

What is the best way to keep the calendar of a Datepicker always visible while still being able to select a date easily?

Automatically synchronize dynatable with AJAX requests and JSON responses

How can we eliminate every item of a specific type from an array?

The "add to cart" button is unresponsive