3d model cursor

Questions
1

hello i want instead of default cursor of browser to be 3d rocket model that walk through website is that possible??

2

Yup - all you need is to create three.js WebGLRenderer as usual, render whatever 3D scene or model you’d like like you’d do usually - then (1) set renderer.domElement.style.position to absolute, and (2) use pointermove event listener to move the renderer along with the cursor, ex.:

const renderer = new THREE.WebGLRenderer({
  alpha: true
});
// NOTE ... Do rest of the setup ...
renderer.setSize(32, 32);

renderer.domElement.style.position = 'absolute';
renderer.domElement.style.width = '32px';
renderer.domElement.style.height = '32px';
renderer.domElement.style.transform = `translateX(-50%) translateY(-50%)`;
renderer.domElement.style.zIndex = 9999; // NOTE Or something higher, so that it's rendered on top of other elements

window.addEventListener('pointermove', event => {
  renderer.domElement.style.left = `${event.clientX}px`;
  renderer.domElement.style.top = `${event.clientY}px`;
});

document.body.style.cursor = 'none';
2 Likes