Move rotate gltf object on mouse move on gtlf object

innovate · March 23, 2021, 12:36pm

Hi Guys,

saw this post from Michael on stackoverflow ,
html - How would I be able to get my GLTF object follow someone using touch on a phone? - Stack Overflow,

great with mouse move on canvas , i am trying to get the mouse move on the gltf object , and when it is on the gltf object not the canvas, translate rotate the object with mouse move

i followed the below document on raycasting on three with the gltf object , did not work ,

if i get this working i can get on with my application , any help an example would be greatly appreciated ,

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseMove( event ) {

	// calculate mouse position in normalized device coordinates
	// (-1 to +1) for both components

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

}

function render() {

	// update the picking ray with the camera and mouse position
	raycaster.setFromCamera( mouse, camera );

	// calculate objects intersecting the picking ray
	const intersects = raycaster.intersectObjects( scene.children );

	for ( let i = 0; i < intersects.length; i ++ ) {

		intersects[ i ].object.material.color.set( 0xff0000 );

	}

	renderer.render( scene, camera );

}

window.addEventListener( 'mousemove', onMouseMove, false );

window.requestAnimationFrame(render);

Mugen87 · March 23, 2021, 12:55pm

Try it with:

const intersects = raycaster.intersectObject( scene, true );

innovate · March 23, 2021, 1:06pm

Thanks Michael,

tried with scene,true , fails to display anything on the screen,

let scene, camera, renderer;
scene = new THREE.Scene();

const fov = 75;

const near = .01;

const far = 1000;

camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight,near,far);

camera.position.set(0, 0, 1);  

renderer = new THREE.WebGLRenderer({antialias:true});

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

directionalLight = new THREE.DirectionalLight(0xff8c19,2.5);

directionalLight.position.set(0,0,4);

scene.add(directionalLight);

const gltfLoader = new THREE.GLTFLoader();

gltfLoader.load('testObj.glb',( gltf ) => {

    scene.add( gltf.scene );

    });

  

const raycaster = new THREE.Raycaster();

const mouse = new THREE.Vector2();

function onMouseMove( event ) {

    // calculate mouse position in normalized device coordinates

    // (-1 to +1) for both components

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;

    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

function render() {

    // update the picking ray with the camera and mouse position

    raycaster.setFromCamera( mouse, camera );

    // calculate objects intersecting the picking ray

    const intersects = raycaster.intersectObject( scene, true );

    for ( let i = 0; i < intersects.length; i ++ ) {

        intersects[ i ].object.material.color.set( 0xff0000 );

    }

    renderer.render( scene, camera );

}

window.addEventListener( 'mousemove', onMouseMove, false );

window.requestAnimationFrame(render);

testObj.glb (427.4 KB)

Mugen87 · March 23, 2021, 4:56pm

This code works for me:

import * as THREE from '../build/three.module.js';

import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();

const fov = 75;

const near = .1;

const far = 1000;

const camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, near, far );

camera.position.set( 0, 1, 1 );

const renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

scene.add( new THREE.AmbientLight( 0xffffff, 0.4 ) );

const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );

directionalLight.position.set( 0, 0, 4 );

scene.add( directionalLight );

const gltfLoader = new GLTFLoader();

gltfLoader.load( 'models/testObj.glb', ( gltf ) => {

	scene.add( gltf.scene );

	animate();

} );

const raycaster = new THREE.Raycaster();

const mouse = new THREE.Vector2();

function onMouseMove( event ) {

	// calculate mouse position in normalized device coordinates

	// (-1 to +1) for both components

	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;

	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

function animate() {

	requestAnimationFrame( animate );

	// update the picking ray with the camera and mouse position

	raycaster.setFromCamera( mouse, camera );

	// calculate objects intersecting the picking ray

	const intersects = raycaster.intersectObject( scene, true );

	for ( let i = 0; i < intersects.length; i ++ ) {

		intersects[ i ].object.material.color.set( 0xff0000 );

	}

	renderer.render( scene, camera );

}

window.addEventListener( 'mousemove', onMouseMove, false );

innovate · March 23, 2021, 6:11pm

Tried this does not work for me,

i presume that this has to do something with the modules being imported

i have even tried changing the import modules to point to the versions below, still does not work
gives me a blank screen

the html is here

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>My first three.js app</title>

        <style>

            body { margin: 0;   width: 100vw;

                    height: 100vh;

                    margin: 0;

                    overflow: hidden;

                    display: flex;

                    justify-content: center;

                    align-items: center;}

        </style>

        <style>

            canvas {width: 100%; height: 100%}

        </style>

    </head>

    <body>

     

    <script type = "module" src="selectGl.js"></script>

    </body>

</html>

and the js code modified is here

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js';

import { GLTFLoader } from 'https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js';

const scene = new THREE.Scene();

const fov = 75;

const near = .1;

const far = 1000;

const camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, near, far );

camera.position.set( 0, 0, 3 );

const renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

scene.add( new THREE.AmbientLight( 0xffffff, 0.4 ) );

const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );

directionalLight.position.set( 0, 0, 4 );

scene.add( directionalLight );

const gltfLoader = new GLTFLoader();

gltfLoader.load( 'models/testObj.glb', ( gltf ) => {

    scene.add( gltf.scene );

    animate();

} );

const raycaster = new THREE.Raycaster();

const mouse = new THREE.Vector2();

function onMouseMove( event ) {

    // calculate mouse position in normalized device coordinates

    // (-1 to +1) for both components

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;

    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

function animate() {

    requestAnimationFrame( animate );

    // update the picking ray with the camera and mouse position

    raycaster.setFromCamera( mouse, camera );

    // calculate objects intersecting the picking ray

    const intersects = raycaster.intersectObject( scene, true );

    for ( let i = 0; i < intersects.length; i ++ ) {

        intersects[ i ].object.material.color.set( 0xff0000 );

    }

    renderer.render( scene, camera );

}

window.addEventListener( 'mousemove', onMouseMove, false );

Irakli_Kandelaki · March 23, 2021, 8:28pm

You need to import it from /jsm/ folder.

Try this:

import * as THREE from 'https://threejs.org/build/three.module.js';

import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';

P.S Your code should go in
<script type="module"> </script>

innovate · March 24, 2021, 3:07pm

Hi Irakli,

will try this out

Thnaks

innovate · March 26, 2021, 12:13pm

Tried this and it is not working ?

innovate · March 26, 2021, 1:16pm

This code was working earlier now i am using r125, and it fails to load the glb object, what i would like to do is click on this object and on mouse drag on this glb object it should rotate ,

and i am using the module in sourcing the script as well ,so do not know why this is failing to load,

it is complaining about load object 404 error , and i have tested this, the path to the glb file exists as well , any help would be greatly appreciated

‘./build/three.module.js’ works , the loader does not

‘’’

import * as THREE from './build/three.module.js';

import { GLTFLoader } from './loaders/GLTFLoader.js';

let scene, camera, renderer, mouse, raycaster,intersects;

function init();
{

    scene = new THREE.Scene();

    const fov = 75;

    const near = .1;

    const far = 1000;

    camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);

    camera.position.set(0, 0, 4);

    renderer = new THREE.WebGLRenderer({ antialias: true });

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    raycaster = new THREE.Raycaster();

    mouse = new THREE.Vector2();

    scene.add(new THREE.AmbientLight(0xffffff, 0.1));

    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.1);

    directionalLight.position.set(0, 0, 4);

    scene.add(directionalLight);

    const gltfLoader = new GLTFLoader();

    gltfLoader.load('models/testObj.glb', (gltf) => {

        scene.add(gltf.scene);

    });

    window.addEventListener( 'mousemove', onMouseMove, false );
    animate();
}

function onMouseMove( event ) {

    // calculate mouse position in normalized device coordinates

    // (-1 to +1) for both components

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;

    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}


function animate() {

    requestAnimationFrame( animate );

    // update the picking ray with the camera and mouse position

    raycaster.setFromCamera( mouse, camera );

    // calculate objects intersecting the picking ray

    intersects = raycaster.intersectObject( scene, true );

    for ( let i = 0; i < intersects.length; i ++ ) {

        intersects[ i ].object.material.color.set( 0xff0000 );

    }

    renderer.render( scene, camera );

}

init();

innovate · March 26, 2021, 4:56pm

finally got this working , yep it works ,

i do not know if its me , but should it be this diffifult to find the right package ,
for instance if i want to point it to r125
when i do this

import { GLTFLoader } from 'https://threejs.org/three@0.125.0/examples/jsm/loaders/GLTFLoader.js';

it fails , reckon the file path is incorrect, so how does one know where these packages are stored ?

cheers

Irakli_Kandelaki · March 27, 2021, 1:24pm

The best way is to simply clone the whole ThreeJS repository from GitHub. Use the versions from the repo.
You often mix the ways of loading stuff, e.g you can’t both import stuff as modules from jsm versions and also use js versions in your project and load that as a module. Just to avoid confusion in the future.

innovate · March 29, 2021, 12:31pm

everything works thanks ,it was the import method which was breaking the code

Topic		Replies	Views
Gltf model and raycaster Questions loaders , raycaster , gltf , model	4	646	March 26, 2023
Selecting glTF with raycaster Questions mesh , raycaster , gltf-loader , gltf	5	4935	September 28, 2018
Raycaster working for generated geometry, but not for gltf models Questions loaders , geometry , gltf-loader	3	245	May 24, 2023
(THREE JS) Raycaster doesn't detect intersection with .gltf object Questions raycaster , gltf	1	1738	July 3, 2021
How to target object within GLTF model with raycaster/animation Questions raycaster , animation , gsap	11	1576	July 15, 2022

Move rotate gltf object on mouse move on gtlf object

Related Topics