I'm trying to use the Tween.js library. However, when my javascript's code runs I receive a reference error in the degub console which states that TWEEN is not defined. My code is the following
function armTween(){
var position = {x: -20, y: squareSize*11, z : 10};
var target = {x: -10, y: -1.75, z: -10};
var tween = new TWEEN.Tween(position)
.to(target, 500)
.easing(TWEEN.Easing.Elastic.InOut).
onUpdate(function(){
console.log("onUpdate");
lowerArm.position.x = position.x;
lowerArm.position.y = position.y;
lowerArm.position.z = position.z;
});
tween.start();
Also, My index.html file contains the import statement for Tween.js
<!DOCTYPE html>
<html>
<head>
<title>3D Checkers</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="boardContainer" class="boardContainer"></div>
<script src="js/three/three.js"></script>
<script src="js/three/Projector.js"></script>
<script src="js/three/OrbitControls.js"></script>
<script src="js/Game.js"></script>
<script src="js/BoardController.js"></script>
<script src="js/main.js"></script>
<script src="js/tween/Tween.js"></script>
</body>
I can't figure out how this reference error can be solved. Can anyone help me?
You need to include
tween.jsbefore the script you call it from.You always want to include your libraries and resource scripts before your behaviour scripts.