// Cloned by Tobi Olaoye on 5 Dec 2022 from World "Misc Animation World" by Jeffrey Igala
// Please leave this clone trail here.
// jeffrey igala 20491386 & Oluwatobiloba Olaoye 20442576
// https://github.com/mrdoob/three.js/blob/master/examples/misc_animation_groups.html
AB.loadCSS ( '/uploads/jeffrrey007/main.css' );
AB.newDiv ('container');
const MUSICFILE = '/uploads/jeffrrey007/FrankSinatra-FlyMetotheMoon.mp3';
AB.backgroundMusic ( MUSICFILE );
const SKYBOX_ARRAY = [
"/uploads/starter/dawnmountain-xpos.png",
"/uploads/starter/dawnmountain-xneg.png",
"/uploads/starter/dawnmountain-ypos.png",
"/uploads/starter/dawnmountain-yneg.png",
"/uploads/starter/dawnmountain-zpos.png",
"/uploads/starter/dawnmountain-zneg.png"
]; //
const objectsize = 5; // size of object
const startRadius = 400; // distance from centre we start the camera at
const maxRadius = startRadius * 10; // maximum distance from camera we render things
AB.socketStart();
AB.socketIn = function(data) // takes in oppenent score and builds opponent tower next to user
{
higher2 = data.line;
var boxcolor = "red";
var shape = new THREE.SphereGeometry ( objectsize, objectsize, objectsize );
var material = new THREE.MeshBasicMaterial ( { color: boxcolor.toLowerCase() } );
var theobject = new THREE.Mesh ( shape, material ); // build opennent tower
theobject.position.y = higher2; // Increase tower height each time
theobject.position.x = 50; // put towers side by side
ABWorld.scene.add ( theobject );
};
AB.world.newRun = function() {
ABWorld.init3d ( startRadius, maxRadius);
ABWorld.scene.background = new THREE.CubeTextureLoader().load ( SKYBOX_ARRAY, function() // render background image
{
ABWorld.render();
AB.removeLoading();
AB.runReady = true;
});
}
import * as THREE from '/api/threemodule/libs/three.module.js';
import Stats from '/uploads/threeport/stats.module.js';
let stats, clock;
let scene, camera, renderer, mixer;
init();
animate();
function init() {
scene = new THREE.Scene();
//
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 200, 200 );
camera.lookAt( scene.position );
// all objects of this animation group share a common animation state
const animationGroup = new THREE.AnimationObjectGroup();
//
const geometry = new THREE.BoxGeometry( 8, 8, 8);
const material = new THREE.MeshBasicMaterial( { transparent:9 } );
//
for ( let i = 0; i < 8; i ++ ) {
for ( let j = 0; j < 8; j ++ ) {
const mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 32 - ( 16 * i );
mesh.position.y = 0;
mesh.position.z = 32 - ( 16 * j );
scene.add( mesh );
animationGroup.add( mesh );
}
}
// create some keyframe tracks
const xAxis = new THREE.Vector3( 1, 0, 0 );
const qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
const qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
const quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
const colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
const opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
// create clip
const clip = new THREE.AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
// apply the animation group to the mixer as the root object
mixer = new THREE.AnimationMixer( animationGroup );
const clipAction = mixer.clipAction( clip );
clipAction.play();
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
stats = new Stats();
document.body.appendChild( stats.dom );
//
clock = new THREE.Clock();
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
const delta = clock.getDelta();
if ( mixer ) {
mixer.update( delta );
}
renderer.render( scene, camera );
stats.update();
}
AB.world.newRun = function() {
ABWorld.scene.background = new THREE.CubeTextureLoader().load ( SKYBOX_ARRAY, function() // render background image
{
ABWorld.render();
AB.removeLoading();
AB.runReady = true;
});
}