1)- The tops of the trees are removed instead of shaking for the duration.
2)- function shakeTreeUpdate(update) {
var top = treeTops(treasureTreeNumber);
top.position.x = 50 * Math.sin(update.shake);
}
3)- tween.onUpdate(shakeTreeUpdate);
how is the function: shakeTreeUpdate referenced here passed the update parameter?
tween knows the shake object
Thank you,
Douglas
Is there anything in the JavaScript console?
I think there might be something in the JavaScript console about this – maybe take a closer look at the second line 
Great question! When you call tween.onUpdate(shakeTreeUpdate), you are telling Tween to call the function named shakeTreeUpdate() over and over again. The way that Tween calls the function over and over is by passing the update parameter each time. It’s pretty cool 
Hopefully that helps. If you have any other questions, don’t hesitate to ask!
-Chris
thank you for your reply Chris
sent a screen shot of the truncated tree top and console
No errors in the console
Tween.onUpdate passes a parameter to the function
Thanks for the screenshot – that helps. I think you’ll have to share your entire project here. Either use the “Share” feature in 3DE or copy & paste it in a reply as described in the welcome post.
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script src="Tween.js"></script>
<script src="scoreboard.js"></script>
<script src="sounds.js"></script>
Sorry, I need all of the code in the project, not just the first 5 lines. In 3DE, type Ctrl A or ⌘ A depending on what kind of computer you have. Then copy it all with Ctrl C or ⌘ C. Then paste everything here in between tripple backticks like you’ve done.
Sorry this is taking a bit – we’ll get it figured out though!
-Chris
Chris,
I keep getting notices that my emails sent containing code were rejected
so I put the shaking tree code on github
https://github.com/douglasv/Three.js-Tutotial
Thank you,
Douglas
my browser empties the cache on exit
Hrm… this works for me when I paste it into 3DE. I had to change the <script> tags to point to code collections on code3dgames.com, but aside from that, I didn’t make any changes to the code from GitHub.
My guess is that you might be using a version of Three.js that’s not on code3dgames.com. Is that possible?
Here’s the code that I just tried in 3DE:
<body></body>
<script src="/three.min.js"></script>
<script src="/controls/OrbitControls.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 rightHand = new THREE.Mesh(hand, cover);
rightHand.position.set(-150, 0, 0);
avatar.add(rightHand);
var leftHand = new THREE.Mesh(hand, cover);
leftHand.position.set(150, 0, 0);
avatar.add(leftHand);
var foot = new THREE.SphereGeometry(50);
var rightFoot = new THREE.Mesh(foot, cover);
rightFoot.position.set(75, -125, 0);
avatar.add(rightFoot);
var leftFoot = new THREE.Mesh(foot, cover);
leftFoot.position.set(-75, -125, 0);
avatar.add(leftFoot);
marker.add(camera);
var notAllowed = [];
var treeTops = [];
function makeTreeAt(x, z){
var trunk = new THREE.Mesh( new THREE.CylinderGeometry(50, 50, 200), new THREE.MeshBasicMaterial({color: 'sienna'}) );
var top = new THREE.Mesh( new THREE.SphereGeometry(150), new THREE.MeshBasicMaterial({color: 'forestgreen'}) );
top.position.y = 175;
trunk.add(top);
var boundary = new THREE.Mesh(
new THREE.CircleGeometry(300),
new THREE.MeshNormalMaterial()
);
boundary.position.y = -100;
boundary.rotation.x = -Math.PI/2;
trunk.add(boundary);
notAllowed.push(boundary);
treeTops.push(top);
trunk.position.set(x, -75, z);
scene.add(trunk);
}
makeTreeAt( 500, 0 );
makeTreeAt( -500, 0 );
makeTreeAt( 750, -1000 );
makeTreeAt( -750, -1000 );
var treasureTreeNumber;
function updateTreasureTreeNumber(){
var rand = Math.random() * treeTops.length;
treasureTreeNumber = Math.floor(rand);
}
function shakeTreasureTree(){
updateTreasureTreeNumber();
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();
var scoreboard = new Scoreboard();
scoreboard.countdown(45);
scoreboard.score();
scoreboard.help(
' Arrow keys to move. ' +
' Space bar to jump for fruit. ' +
' Watch for shaking trees with fruit. ' +
' Get near the tree and jump before the fruit is gone! '
);
scoreboard.onTimeExpired(timeExpired);
function timeExpired(){
scoreboard.message("Game Over!");
}
// 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}, 750);
tween.start();
}
function walk(){
if (!isWalking()) return;
var speed = 10;
var size = 100;
var time = clock.getElapsedTime();
var position = Math.sin(speed * time) * size;
rightHand.position.z = position;
leftHand.position.z = -position;
rightFoot.position.z = -position;
leftFoot.position.z = position;
}
function isWalking(){
if (isMovingRight) return true;
if (isMovingLeft) return true;
if (isMovingForward) return true;
if (isMovingBack) return true;
return false;
}
function acrobatics(){
if (isCartwheeling){
avatar.rotation.z = avatar.rotation.z + 0.05;
}
if (isFlipping){
avatar.rotation.x = avatar.rotation.x + 0.05;
}
}
function jump(){
if (avatar.position.y > 0) return;
checkForTreasure();
animateJump();
}
function checkForTreasure(){
var top = treeTops[treasureTreeNumber];
}
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;
}
document.addEventListener('keydown', sendKeyDown);
function sendKeyDown(event) {
//alert(event.code);
var code = event.code;
if (code == 'Space') jump();
if(code == 'ArrowLeft'){
marker.position.x = marker.position.x - 5;
isMovingLeft = true;
}
if(code == 'ArrowRight'){
marker.position.x = marker.position.x + 5;
isMovingRight = true;
}
if(code == 'ArrowUp'){
marker.position.z = marker.position.z - 5;
isMovingForward = true;
}
if(code == 'ArrowDown'){
marker.position.z = marker.position.z + 5;
isMovingBack = true;
}
if(code == 'KeyC') isCartwheeling = !isCartwheeling;
if(code == 'KeyF') isFlipping = !isFlipping;
if (isColliding()){
if (isMovingLeft) marker.position.x = marker.position.x + 5;
if (isMovingRight) marker.position.x = marker.position.x - 5;
if (isMovingForward) marker.position.z = marker.position.z + 5;
if (isMovingBack) marker.position.z = marker.position.z - 5;
}
}
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;
}
document.addEventListener('keyup', stopFlipping);
function stopFlipping(event){
var code = event.code;
if(code == 'KeyF'){isFlipping = false;}
}
document.addEventListener('keyup', stopCartwheeling);
function stopCartwheeling(event){
var code = event.code;
if(code == 'KeyC'){isCartwheeling = false;}
}
</script>
P.S. To get the code in here, I used the instructions from the intro post using three backticks. That should always work for getting code in here:
Explain how your code is misbehaving...
```
// Paste your code here
````
Include any more information that you like here...