Is there any way to limit rotation of GLTFLoader without influencing onmousemove function?

Questions
, ,
1

Hi everyone,
I’m justing getting started with three.js and practicing on the cube.

I would like to ask for help for my problem. Basically, it has two things:

  1. Cube has to rotate following mouse’s movement
  2. Cube only rotate horizontally and vertically in limited angles

Currently, I can limit the angle of rotation but the cube is not following the mouse. A similar thing is that when I’m able to make cube rotating on mousemove, then the angles are not limited.
#For onmouse event: i used LookAt on an Object3D
#For rotating angle limit: i used OrbitControls

Could you help me review the code below:

//SCENE
let scene = new THREE.Scene();

//CAMERA
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 
1000);
camera.position.set(7, 3.5, 7)
 const myCanvas = document.querySelector(".myCanvas");
 //RENDER
 const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: myCanvas, alpha: true, 
physicallyCorrectLights: true });

//LOADER
let base = new THREE.Object3D();
const gltf = new GLTFLoader().setPath('/assets/images/work/2022_s2w_pic/3d/');
gltf.load('scene.gltf', function (gltf) {
    const model = gltf.scene;
    model.scale.setScalar(3);
    model.traverse(function (object) {
        if (object.isMesh) {
            object.castShadow = true;
            object.geometry.center();
        }
    })
    base.add(model);
    render();
}, undefined, function (error) {
    console.error(error);
})

//CONTROLS
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
controls.minDistance = 2;
controls.maxDistance = 10;
controls.target.set(0, 0, 0);
controls.enableZoom = false;
controls.maxPolarAngle = Math.PI * 0.44;
controls.minPolarAngle = Math.PI * 0.30;
controls.minAzimuthAngle = Math.PI * 0.18;
controls.maxAzimuthAngle = Math.PI * 0.33;
controls.enablePan = false;
controls.update();

//MOUSE
let mouse = new THREE.Vector2();
let plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), -2);
let raycaster = new THREE.Raycaster();
let pointOfIntersection = new THREE.Vector3();

scene.add(base);

myCanvas.addEventListener(‘mousemove’, onMouseMove, false);

function animate() {
requestAnimationFrame(animate);
raycaster.setFromCamera(mouse, camera);
controls.update();
renderer.render(scene, camera);
}

function onMouseMove(event) {
// calculate mouse position in normalized device coordinates
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.ray.intersectPlane(plane, pointOfIntersection);
base.lookAt(pointOfIntersection);
}

function render() {
    renderer.render(scene, camera);
}

animate();
2

But is there any specific question or issue you have :eyes:?

(Also - please format the code using the formatting block :pray:)

1 Like
3

Hi @mjurczyk
Thanks for being here to help me

I just deleted Orbit Controls and applied the code in the page Mousemove Event
Now I updated some parts of the code which look like this:

//CAMERA “what I wanna do is the side of cube to face the camera”
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1,
1000);
camera.position.x = 9;
camera.position.z = 9;
camera.position.y = 6;
camera.lookAt(new THREE.Vector3(0, 0, 0));

const windowHalfX = window.innerWidth / 2;
const windowHalfY = window.innerHeight / 2;

let myModel;

const gltf = new GLTFLoader().setPath('/assets/images/work/2022_s2w_pic/3d/');
gltf.load('scene.gltf',
    function (gltf) {
        myModel = gltf.scene;
        myModel.scale.setScalar(7);
        myModel.traverse(function (obj) {
            if (obj.isMesh) {
                obj.castShadow = true;
                obj.geometry.center();
            }
        })

        scene.add(myModel);
    },
    undefined, function (error) {
        console.error(error);
    })
function onDocumentMouseMove(event) {
    mouseX = (event.clientX - windowHalfX);
    mouseY = (event.clientY - windowHalfY);
}

function animate() {
targetX = mouseX * 0.0005;
targetY = mouseY * 0.0005;

    if (myModel) {
        myModel.rotation.set(targetY, targetX, myModel.rotation.z);
    }

    render()
    requestAnimationFrame(animate);
}

function render() {
renderer.render(scene, camera);
}

I am able to make the cube model follow the cursor and the side of cube face the camera and but what I wanna do is it has rotate on its center. I’m just trying to do as same as the cube model in this page Cube Effect Sample.

@mjurczyk Please help me with this issue ! Thank you so much !

4

I have made a similiar model to my source on codepen
The model looks like slanting when I move the cursor up and down

Cube Sample