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...