Can not get tween.js to work

Questions
1

So I am new to three and tween and I thought I would play around with tweening the camera but for some reason I get
TWEEN is not defined
at animate

Does anyone know why? here is my code:

<script type="text/javascript" src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script type="text/javascript" src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>


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

import {
    RGBELoader
}
from './js/RGBELoader.js';
import {
    OrbitControls
}
from './js/OrbitControls.js';
import {
    GLTFLoader
}
from './js/GLTFLoader.js';
import {
    RoughnessMipmapper
}
from './js/RoughnessMipmapper.js';
var container, controls;
var camera, scene, renderergl, mixer, clock;
var raycaster, mouse;

init();
animate();

function init() {
    container = document.createElement('div');
    container.className = "experience-div";
    $('body').prepend(container);
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(-10, 90, 8.7);
    scene = new THREE.Scene();
    clock = new THREE.Clock();
    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();
    new RGBELoader().setDataType(THREE.UnsignedByteType).load('royal_esplanade_1k.hdr', function(texture) {
        var envMap = pmremGenerator.fromEquirectangular(texture).texture;
        scene.environment = envMap;
        texture.dispose();
        pmremGenerator.dispose();
        var roughnessMipmapper = new RoughnessMipmapper(renderergl);
        var loader = new GLTFLoader();
        loader.load('untitled.gltf', function(gltf) {
            gltf.scene.traverse(function(child) {
                if (child.isMesh) {
                    roughnessMipmapper.generateMipmaps(child.material);
                }
            });
            gltf.scene.scale.set(.030, .030, .030);
            gltf.scene.position.set(0, -4, 0);
            gltf.scene.rotation.set(0, -70, 0);
            scene.add(gltf.scene);
            roughnessMipmapper.dispose();
            mixer = new THREE.AnimationMixer(gltf.scene);
            gltf.animations.forEach((clip) => {
                mixer.clipAction(clip).play();
            });
        });
    });
    renderergl = new THREE.WebGLRenderer({
        antialias: true
    });
    renderergl.setPixelRatio(window.devicePixelRatio);
    renderergl.setSize(window.innerWidth, window.innerHeight);
    renderergl.toneMapping = THREE.ACESFilmicToneMapping;
    renderergl.toneMappingExposure = 0.8;
    renderergl.outputEncoding = THREE.sRGBEncoding;
    container.appendChild(renderergl.domElement);
    $('.experience-div canvas').attr('id', 'canvas');
    var pmremGenerator = new THREE.PMREMGenerator(renderergl);
    pmremGenerator.compileEquirectangularShader();
    controls = new OrbitControls(camera, renderergl.domElement);
    controls.enableKeys = false;
    controls.target.set(0, -0.5, 0);
    controls.enableZoom = false;
    controls.enableDamping = true;
    controls.maxPolarAngle = 1.9;
    controls.minPolarAngle = 1.3;
    controls.dampingFactor = 0.095;
    controls.rotateSpeed = 0.35;
    controls.minDistance = 2;
    controls.maxDistance = 10;
    controls.update();
    window.addEventListener('resize', onWindowResize, false);
    renderergl.domElement.addEventListener('click', onClick, false);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderergl.setSize(window.innerWidth, window.innerHeight);
}

function onClick() {

    event.preventDefault();

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

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(scene.children, true);

    if (intersects.length > 0) {
        console.log("position");
        console.log(camera.position);
        console.log("rotation");
        console.log(camera.rotation);

        controls.enabled = false;
        var duration = 2500;
        var position = new THREE.Vector3().copy(camera.position);
        var targetPosition = new THREE.Vector3(0, -4, 0);

       var tween = new TWEEN.Tween(position)
            .to(targetPosition, duration)
            .easing(TWEEN.Easing.Back.InOut)
            .onUpdate(function() {
                camera.position.copy(position);
                camera.lookAt(controls.target);
            })
            .onComplete(function() {
                camera.position.copy(targetPosition);
                camera.lookAt(controls.target);
                controls.enabled = true;
            })
            .start();
        controls.target.set(0, .5, 0);




        var clickedID = intersects[0].object.uuid;
        var clickedName = intersects[0].object.name;
        console.log('You clicked: ' + clickedName);
        console.log('UUID: ' + clickedID);
    }

}

function animate() {

    TWEEN.update();
    requestAnimationFrame(animate);

    var delta = clock.getDelta();
    if (mixer) mixer.update(delta);
    renderergl.render(scene, camera);
    controls.update();
    testa();
}

Live link:

Codepen:

You’ll have to remove TWEEN.update(); from animate() for anything to load

2

You are using the wrong tween.js library. Try it with this import statement:

import TWEEN from 'https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@18.5.0/dist/tween.esm.js';

You want to use this project and not this.

1 Like
3

Oh my mistake ! Thank you !

4

I am trying to load tween from .js without module into a project. but it says ‘Uncaught ReferenceError: TWEEN is not defined’… kindly advice
i am using non module into the project

5

following script worked for me

$('.angel button').on('click', function(){            
    var xAxis = $(this).data('x');
    var yAxis = $(this).data('y');
    var zAxis = $(this).data('z');          
    tween = new TWEEN.Tween(camera.position).to({x: xAxis, y: yAxis, z: zAxis}, 500).start();
});