Rotate GLTF Object Based on the Position of mouse

Questions
, ,
1

Hey Guys,
I am trying to rotate a GLTF object based on the location of the Mouse.
The rotation code is based of this tutorial (Getting Started with THREE.JS in 2021! - YouTube) minute 43.

I am trying to apply it on the gltf but it’s not working.

Here’s my code for the whole thing:

import './style.css'

import * as THREE from 'three'  

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'

import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'

import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'

import * as dat from 'dat.gui'

/**

 *  Loaders

 */

 const gltfLoader = new GLTFLoader()

// Debug

const gui = new dat.GUI()

// Canvas

const canvas = document.querySelector('canvas.webgl')

// Scene

const scene = new THREE.Scene()

//Model

let model

gltfLoader.load(

    

    '/models/Monkey/MonkeyToThreeJs.gltf',

    (gltf) =>

    {

        model = gltf.scene

        console.log(gltf)

        scene.add(model)

    }

)

// Objects

const geometry = new THREE.TorusGeometry( .7, .2, 16, 100 );

// Materials

const material = new THREE.MeshBasicMaterial()

material.color = new THREE.Color(0xff0000)

// Mesh

const sphere = new THREE.Mesh(geometry,material)

scene.add(sphere)

/**

 * Sizes

 */

const sizes = {

    width: window.innerWidth,

    height: window.innerHeight

}

window.addEventListener('resize', () =>

{

    // Update sizes

    sizes.width = window.innerWidth

    sizes.height = window.innerHeight

    // Update camera

    camera.aspect = sizes.width / sizes.height

    camera.updateProjectionMatrix()

    // Update renderer

    renderer.setSize(sizes.width, sizes.height)

    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

})

/**

 * Camera

 */

// Base camera

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)

camera.position.x = 0

camera.position.y = 0

camera.position.z = 2

scene.add(camera)

/**

 * Renderer

 */

const renderer = new THREE.WebGLRenderer({

    canvas: canvas,

    antialias: true

})

renderer.setSize(sizes.width, sizes.height)

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**

 * Post processing

 */

 const effectComposer = new EffectComposer(renderer)

 effectComposer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

 effectComposer.setSize(sizes.width, sizes.height)

 const renderPass = new RenderPass(scene, camera)

effectComposer.addPass(renderPass)

const unrealBloomPass = new UnrealBloomPass()

effectComposer.addPass(unrealBloomPass)

unrealBloomPass.strength = 0.3

unrealBloomPass.radius = 1

unrealBloomPass.threshold = 0.6

gui.add(unrealBloomPass, 'enabled')

gui.add(unrealBloomPass, 'strength').min(0).max(2).step(0.001)

gui.add(unrealBloomPass, 'radius').min(0).max(2).step(0.001)

gui.add(unrealBloomPass, 'threshold').min(0).max(1).step(0.001)

/**

 * Animate

 */

const clock = new THREE.Clock()

/**

 * Movment

 */

document.addEventListener('mousemove', onDocumentMouseMove)

let mouseX = 0

let mouseY = 0

let targetX = 0

let targetY = 0

const windowX = window.innerWidth / 2

const windowY = window.innerHeight / 2

function onDocumentMouseMove (event)  {

    mouseX = (event.clientX - windowX)

    mouseY = (event.clientY - windowY)

  

}

const tick = () =>

{

    // Movement Update

    targetX = mouseX * 0.001

    targetY = mouseY * 0.001

    const elapsedTime = clock.getElapsedTime()

    // Update objects

    //sphere.rotation.y = .03 * elapsedTime

    sphere.rotation.y += (.5 * (targetX - sphere.rotation.y)) * .1

    sphere.rotation.x += (.5 * (targetY - sphere.rotation.x)) * .1

    // Update Orbital Controls

     //controls.update()

    // Render

    //renderer.render(scene, camera)

    effectComposer.render()

    // Call tick again on the next frame

    window.requestAnimationFrame(tick)

}

tick()
2
  1. Please use code formatting - that code without it isn’t very readable :’)
  2. Could you explain a bit more what you mean by “it’s not working”? Which part doesn’t work? Are you getting any specific errors? Did you try to pin-point the issue :thinking: ?
3

Maybe like this, only head: Interactive 3D Character with Three.js | Codrops