three.js 中的鼠标悬停需要工具提示

Question

I'm loading object like this [demo] , where i want to show tooltip / infobox on mouse over that particular part. ( like on clicking button top, i want to show tooltip on top of the box). I tried these examples, but not working with my obj

Example 1 Example 2

I tried like

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

Im new to three.js and angular material. So i don't know how to add tooltip. Can any1 help me how to fix it. I dont know how to link my button and object top / left / right...

Answer 1

This example features tooltips via the CSS2DRenderer module, but they are always-on and synced to objects' positions.

If you want them to only appear on hover, you will have to selectively toggle them via a Raycaster (sample code included in docs).

Below is an example of the combined techniques ( Codesandbox ) with a single, shared label that moves and updates to hovered elements in 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/three@0.125.2/build/three.module.js'; import { OrbitControls } from 'https://unpkg.com/three@0.125.2/examples/jsm/controls/OrbitControls.js'; import { CSS2DRenderer, CSS2DObject, } from 'https://unpkg.com/three@0.125.2/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); // Setup 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); // Track mouse movement to pick objects 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; }); // Handle window resize window.addEventListener('resize', () => { const { innerWidth, innerHeight } = window; renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }); renderer.setAnimationLoop(() => { controls.update(); // Pick objects from view using normalized mouse coordinates raycaster.setFromCamera(mouse, camera); const [hovered] = raycaster.intersectObjects(scene.children); if (hovered) { // Setup label renderer.domElement.className = 'hovered'; label.visible = true; labelDiv.textContent = hovered.object.name; // Get offset from object's dimensions const offset = new Vector3(); new Box3().setFromObject(hovered.object).getSize(offset); // Move label over hovered element label.position.set( hovered.object.position.x, offset.y / 2, hovered.object.position.x ); } else { // Reset label renderer.domElement.className = ''; label.visible = false; labelDiv.textContent = ''; } // Render scene renderer.render(scene, camera); // Render labels labelRenderer.render(scene, camera); }); </script>