Animate camera position at a scrolling time

Questions
,
1

I am new to three js. I created a little project for my experience. The primary purpose of the project is to create a cube. Any side of a cube has a different color (like in an image).

download
download1366×651 19.2 KB

In scrolling time (I mean event ) camera changed the position and show the full view of some side of the cube (like in an image).

download (1)
download (1)1366×651 8.68 KB

My question is How can I animate the camera position from one point to another? I try some ways to do that with the GSAP javascript library but it isn’t working currently.

Thanks advance

My code

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import gsap from "gsap";

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
camera.position.set(0, 0, 30);

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement);

const axesHelper = new THREE.AxesHelper(45);
scene.add(axesHelper)

const geometry_1 = new THREE.PlaneGeometry(10, 10);
const material_1 = new THREE.MeshBasicMaterial({ color: 0xFFFFFF, side: THREE.DoubleSide });
const face_1 = new THREE.Mesh(geometry_1, material_1);
face_1.position.set(0, 0, 5);
scene.add(face_1);

const geometry_2 = new THREE.PlaneGeometry(10, 10);
const material_2 = new THREE.MeshBasicMaterial({ color: 0xFF0000, side: THREE.DoubleSide });
const face_2 = new THREE.Mesh(geometry_2, material_2);
face_2.position.set(0, 0, -5);
scene.add(face_2);

const geometry_3 = new THREE.PlaneGeometry(10, 10);
const material_3 = new THREE.MeshBasicMaterial({ color: 0x008000, side: THREE.DoubleSide });
const face_3 = new THREE.Mesh(geometry_3, material_3);
face_3.position.set(-5, 0, 0);
face_3.rotateY(Math.PI / -2);
scene.add(face_3);

const geometry_4 = new THREE.PlaneGeometry(10, 10);
const material_4 = new THREE.MeshBasicMaterial({ color: 0x0000FF, side: THREE.DoubleSide });
const face_4 = new THREE.Mesh(geometry_4, material_4);
face_4.position.set(5, 0, 0);
face_4.rotateY(Math.PI / -2);
scene.add(face_4);

const geometry_5 = new THREE.PlaneGeometry(10, 10);
const material_5 = new THREE.MeshBasicMaterial({ color: 0xFFFF00, side: THREE.DoubleSide });
const face_5 = new THREE.Mesh(geometry_5, material_5);
face_5.position.set(0, 5, 0);
face_5.rotateX(Math.PI / -2);
scene.add(face_5);

const geometry_6 = new THREE.PlaneGeometry(10, 10);
const material_6 = new THREE.MeshBasicMaterial({ color: 0x4B0082, side: THREE.DoubleSide });
const face_6 = new THREE.Mesh(geometry_6, material_6);
face_6.position.set(0, -5, 0);
face_6.rotateX(Math.PI / -2);
scene.add(face_6);

window.addEventListener('scroll', onScroll, false)
function onScroll() {

    if (window.scrollY / 10.0 <= 0) {
        camera.position.set(0, 0, 30);
        gsap.to(camera.position, {
            y:30,
            z:0,
            duration:5
        })
    } if (window.scrollY / 10.0 >= 30) {
        camera.position.set(0, 30, 0);
    } if (window.scrollY / 10.0 >= 60) {
        camera.position.set(30, 0, 0);
    } if (window.scrollY / 10.0 >= 90) {
        camera.position.set(0, 0, -30);
    } if (window.scrollY / 10.0 >= 120) {
        camera.position.set(-30, 0, 0);
    } if (window.scrollY / 10.0 >= 150) {
        camera.position.set(0, -30, 0);
    }

}

function animate() {
    requestAnimationFrame(animate)

    render()
}

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

animate()
2

This example might help.
It is minimal and doesn’t use GSAP.
It uses the HTML Body onscroll event to do various things, as well as change camera properties.
Animate on Scroll : https://sbcode.net/threejs/animate-on-scroll/
image

1 Like
3

Thank you very much for your answer seanwasere . Also, I am your Udemy subscriber.

1 Like