I have some Questions

[BlackFire]

Hey i’ve another thing. Now the avatar can’t boost anymore into tree’s, so I would like to write a Tween what “teleports” the into the sky(so like the golden Fruit) and the avatar should appear at the new position. How can I do that?

Code:

//<body></body>
<script src="/three.js"></script>
<script src="/tween.js"></script>
<script src="/scoreboard.js"></script>
<script src="/sounds.js"></script>
<script>
  // The "scene" is where stuff in our game will happen:
  var scene = new THREE.Scene();
  var flat = {flatShading: true};
  var light = new THREE.AmbientLight('white', 0.8);
  scene.add(light);

  // The "camera" is what sees the stuff:
  var aspectRatio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  // The "renderer" draws what the camera sees onto the screen:
  var renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
  var marker = new THREE.Object3D();
  scene.add(marker);
  
  var body = new THREE.SphereGeometry(100);
  var cover = new THREE.MeshNormalMaterial();
  var avatar = new THREE.Mesh(body,cover);
  marker.add(avatar);
  
  var hand = new THREE.SphereGeometry(50);
  
  var lhand = new THREE.Mesh(hand,cover);
  lhand.position.set(150,0,0);
  avatar.add(lhand);
  
  var rhand = new THREE.Mesh(hand,cover);
  rhand.position.set(-150,0,0);
  avatar.add(rhand);
  
  var foot = new THREE.SphereGeometry(50);
  
  var rfoot = new THREE.Mesh(foot,cover);
rfoot.position.set(-75,-125,0);
avatar.add(rfoot);

var lfoot = new THREE.Mesh(foot,cover);
lfoot.position.set(75,-125,0);
avatar.add(lfoot);
marker.add(camera);

var scoreboard = new Scoreboard();
scoreboard.countdown(45);
scoreboard.score();
scoreboard.help(
  'Pfeiltasten zum Bewegen. '+
  'Leertaste zum Springen nach dem Obst. '+
  'Achte auf wackelnde Bäume mit Obst. '+
  'Gehe zum Baum und springe, bevor das Obst verschwunden ist!'
  );
  
  scoreboard.onTimeExpired(timeExpired);
  function timeExpired() {
    scoreboard.message('Das Spiel ist aus!');
    removeAvatar();
    timeExpiredsuper();
  }
  
 scoreboard.onTimeExpired(timeExpired);
  function timeExpiredsuper() {
    if (scoreboard.score < 300) return; 
    if (scoreboard.score > 300) scoreboard.message('Das Spiel ist aus!'+
    '    Du bist klasse!');
  }

 var scoreboard2 = new Scoreboard({location: 'bottomright'});
scoreboard2.score(3);
scoreboard2.countdown(1);
scoreboard2.message('Drücke B um in die Richtung zu boosten, in die du gehst zu boosten.');
scoreboard2.help(
  'Dies ist der Prototyp 1.1 der Boost Funktion! Booste mit B in die Richtung in die du gehst. Dies kannst du 3 mal machen wärend eines Spiels. Es gibt einen 5-Sekündigen Cooldown.');

function boost() {
  if (scoreboard2.getTimeRemaining() > 0) return;
  if (scoreboard2.getScore() == 0) return;
  if (!isWalking()) return;
  scoreboard2.countdown(5);
  if (isMovingRight) marker.position.x = marker.position.x + 300;
  if (isMovingLeft) marker.position.x = marker.position.x - 300;
  if (isMovingForward) marker.position.z = marker.position.z - 300;
  if (isMovingBack) marker.position.z = marker.position.z + 300;
  scoreboard2.subtractPoints(1);
  
  
}

var notAllowed = [];
var TreeTops = [];

function makeTreeAt (x,z) {
  var stamm = new THREE.CylinderGeometry(50,50,200);
  var rinde = new THREE.MeshBasicMaterial({color: 'sienna'});
  
  var krone = new THREE.SphereGeometry(150);
  var blatt = new THREE.MeshBasicMaterial({color: 'forestgreen'});
  
  var shape = new THREE.CircleGeometry(300);
  var cover = new THREE.MeshNormalMaterial();
    
  var trunk = new THREE.Mesh(stamm,rinde);
  
    var top = new THREE.Mesh(krone, blatt);
      top.position.y = 175;
      trunk.add(top);
      
      trunk.position.set(x, -75 , z);
      scene.add(trunk);
      
      var boundary = new THREE.Mesh(shape,cover);
    boundary.position.y = -100;
    boundary.rotation.x = -Math.PI/2;
      trunk.add(boundary);
      
      notAllowed.push(boundary);
      TreeTops.push(top);
}
makeTreeAt( 500, 0);
makeTreeAt(-500, 0);
makeTreeAt(750, -1000);
makeTreeAt(-750,-1000);
makeTreeAt(1000, -2000);
makeTreeAt(-1000, -2000);

var treasureTreeNumber;
function updateTreasureTreeNumber() {
  var rand = Math.random() * TreeTops.length;
  treasureTreeNumber = Math.floor(rand);
}

function shakeTreasureTree() {
  updateTreasureTreeNumber();
  if (scoreboard.getTimeRemaining() == 0) return;
  
  var tween = new TWEEN.Tween({shake: 0});
  tween.to({shake: 20 * 2 * Math.PI}, 8*1000);
  tween.onUpdate(shakeTreeUpdate);
  tween.onComplete(shakeTreeComplete);
  tween.start();
}

function shakeTreeUpdate(update) {
  var top = TreeTops[treasureTreeNumber];
  top.position.x = 50 * Math.sin(update.shake);
}

function shakeTreeComplete() {
  var top = TreeTops[treasureTreeNumber];
  top.position.x = 0;
  setTimeout(shakeTreasureTree, 2*1000);
}

shakeTreasureTree();
  // Now, animate what the camera sees on the screen:
  var clock = new THREE.Clock();
  var isCartwheeling = false;
  var isFlipping = false;
  var isMovingRight = false;
  var isMovingLeft = false;
  var isMovingForward = false;
  var isMovingBack = false;
  var direction;
  var lastDirection;
  
  function animate() {
    requestAnimationFrame(animate);
    TWEEN.update();
    turn();
    walk();
    acrobatics();
  renderer.render(scene,camera);
  }
  animate();
  
  function turn() {
    if (isMovingRight) direction = Math.PI/2;
    if (isMovingLeft) direction = -Math.PI/2;
    if (isMovingForward) direction = Math.PI;
    if (isMovingBack) direction = 0;
    if (!isWalking()) direction = 0;
    
   if (direction == lastDirection) return;
   lastDirection = direction;
   var tween = new TWEEN.Tween(avatar.rotation);
   tween.to({y: direction}, 1000);
   tween.start();
  }
  
  function acrobatics() {
    if (isCartwheeling) {
  avatar.rotation.z = avatar.rotation.z + 0.05;
    } 
    if (isFlipping) {
      avatar.rotation.x = avatar.rotation.x + 0.05;
    }
  }
  
  function walk() {
    if (!isWalking()) return;
    
    var speed = 10;
    var size = 100;
    var time = clock.getElapsedTime();
    var position = Math.sin(speed*time)*size;
    rhand.position.z = position;
    lhand.position.z = -position;
    rfoot.position.z = -position;
    lfoot.position.z = position;
  }
  
  function isWalking() {
    if (isMovingRight) return true;
    if (isMovingLeft) return true;
    if (isMovingForward) return true;
    if (isMovingBack) return true;
    return false;
  }
  function isColliding() {
    var vector = new THREE.Vector3(0,-1,0);
    var raycaster = new THREE.Raycaster(marker.position, vector);
    
    var intersects = raycaster.intersectObjects(notAllowed);
    if (intersects.length > 0) return true;
    
    return false;
  }
  
  function isColliding2() {
    var vector = new THREE.Vector3(0,-1,0);
    var raycaster = new THREE.Raycaster(marker.position, vector);
    
    var intersects = raycaster.intersectObjects(notAllowed);
    if (intersects.length > 0) return true;
    
    return false;
  }
  
  function jump() {
  if (avatar.position.y > 0) return;
  checkForTreasure();
  animateJump();
  }
  
  function checkForTreasure() {
    var top = TreeTops[treasureTreeNumber];
    var tree = top.parent;
    var p1 = tree.position;
    var p2  = marker.position;
    var xDiff = p1.x - p2.x;
    var zDiff = p1.z - p2.z;
    var distance = Math.sqrt(xDiff*xDiff + zDiff*zDiff);
    if (distance < 500) scorePoints();
    if (distance > 1000) subtractPoints();
  }
  
  function scorePoints() {
    if (scoreboard.getTimeRemaining() == 0) return;
    scoreboard.addPoints(10);
    Sounds.bubble.play();
    animateFruit();
  }
  
  function subtractPoints() {
    if (scoreboard.getTimeRemaining() == 0) return;
    scoreboard.subtractPoints(5);
    Sounds.scratch.play();
    animateMinus();
  }
  
  var fruit;
  function animateFruit() {
    if (fruit) return;
    
    fruit = new THREE.Mesh(
      new THREE.CylinderGeometry(25,25,5,25),
      new THREE.MeshBasicMaterial({color: 'gold'})
      );
      marker.add(fruit);
      
      var tween = new TWEEN.Tween({height: 200, spin: 0});
      tween.to({height: 350, spin: 2 * Math.PI}, 500);
      tween.onUpdate(animateFruitUpdate);
      tween.onComplete(animateFruitComplete);
      tween.start();
  }
  
  function animateFruitUpdate(update) {
    fruit.position.y = update.height;
    fruit.rotation.x = update.spin;
  }
  
  function animateFruitComplete() {
    marker.remove(fruit);
    fruit = undefined;
  }
  
    var Minus;
   function animateMinus() {
     Minus = new THREE.Mesh(
       new THREE.CubeGeometry(30,10,10), 
       new THREE.MeshBasicMaterial({color: 'red'}));
       marker.add(Minus);
       
       var tween = new TWEEN.Tween({height: 200});
       tween.to({height: 350}, 500);
       tween.onUpdate(animateMinusUpdate);
       tween.onComplete(animateMinusComplete);
       tween.start();
   } 
   
   function animateMinusUpdate(update) {
     Minus.position.y = update.height;
   }
   
   function animateMinusComplete() {
     marker.remove(Minus);
     Minus = undefined;
   }
  
  function animateJump() {
    var tween = new TWEEN.Tween({jump: 0});
    tween.to({jump: Math.PI}, 400);
    tween.onUpdate(animateJumpUpdate);
    tween.onComplete(animateJumpComplete);
    tween.start();
  }
  
  function animateJumpUpdate(update) {
    avatar.position.y = 100 * Math.sin(update.jump);
  }
  
  function animateJumpComplete() {
    avatar.position.y = 0;
  }  
  
  function removeAvatar() {
    marker.remove(avatar);
  }
  
  document.addEventListener('keydown', sendKeyDown);
  function sendKeyDown(event) {
  var code = event.code;
  if (code == 'ArrowLeft') { 
  marker.position.x = marker.position.x - 10;
  isMovingLeft = true;
  }
  if (code == 'ArrowRight') {
   marker.position.x = marker.position.x + 10;
  isMovingRight = true; 
  }
  if (code == 'ArrowUp') {
  marker.position.z = marker.position.z - 10;
  isMovingForward = true;
  }
  if (code == 'ArrowDown')  {
  marker.position.z = marker.position.z + 10;
  isMovingBack = true;
  }
  if (code == 'KeyB') {
    boost();
  }
  
  if (code == 'KeyC') isCartwheeling = !isCartwheeling;
  if (code == 'KeyF') isFlipping = !isFlipping;
  if (code == 'Space') jump();
  
  if (isColliding()) {
  if (isMovingLeft) marker.position.x = marker.position.x + 10;
  if (isMovingRight) marker.position.x = marker.position.x - 10;
  if (isMovingForward) marker.position.z = marker.position.z + 10;
  if (isMovingBack) marker.position.z = marker.position.z - 10;
  }
  
  if (isColliding2()) {
  if (isMovingLeft) {
  marker.position.x = marker.position.x + 300;
  scoreboard2.addPoints(1);
  scoreboard2.countdown(1);
  }
  if (isMovingRight) {
  marker.position.x = marker.position.x - 300;
  scoreboard2.addPoints(1);
  scoreboard2.countdown(1);
  }
  if (isMovingForward) { marker.position.z = marker.position.z + 300;
  scoreboard2.addPoints(1);
  scoreboard2.countdown(1);
  }
  if (isMovingBack) { marker.position.z = marker.position.z - 300;
  scoreboard2.addPoints(1);
  scoreboard2.countdown(1);
  }
  }
  };
  
  document.addEventListener('keyup',sendKeyUp);
  function sendKeyUp(event) {
    var code = event.code;
    if (code == 'ArrowLeft') isMovingLeft = false;
    if (code == 'ArrowRight') isMovingRight = false;
    if (code == 'ArrowUp') isMovingForward = false;
    if (code == 'ArrowDown') isMovingBack = false;
  }
</script>

Thanks…