wordpress-plugin
Version:
Boilerplate WordPress Plugin structure to support development of JavaScript frameworks: React, Vue, Vanilla, TypeScript, supporting Vite, NextJS, Nuxt, Gatsby, and JSX/TSX Components (like MUI), CSS (like Tailwind + Unity), data APIs (like REST and GraphQ
1,523 lines (1,307 loc) • 98.3 kB
JavaScript
/**
* ThreeDGarden - Custom Admin JavaScript
* *************************************************************************************** */
/** init main constructor */
window.onload = function(e){
let garden = new Game();
window.garden = garden;
}
/** main class */
class Game {
constructor () {
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
const game = this;
console.log("-----------------------");
console.log("game-----------------");
console.log(game);
console.log("-----------------------");
/** PARAMETERS FROM PHP */
const pluginName = postdata.plugin_name;
const pluginVersion = postdata.plugin_version;
const pluginURL = postdata.plugin_url;
const themeURI = postdata.theme_uri;
const restURL = postdata.rest_url;
const worldID = postdata.world_id;
console.log("-----------------------");
console.log("pluginName-------------");
console.log(pluginName, pluginVersion);
console.log("-----------------------");
/** INSTANTIATE GAME MODES */
this.modes = Object.freeze({
NONE: Symbol("none"),
PRELOAD: Symbol("preload"),
INITIALISING: Symbol("initialising"),
CREATING_LEVEL: Symbol("creating_level"),
ACTIVE: Symbol("active"),
GAMEOVER: Symbol("gameover")
});
this.mode = this.modes.NONE;
/** INSTANTIATE COMMON VARIABLES */
this.scene;
this.plane;
this.camera;
this.renderer;
this.container;
this.canvas;
this.controls;
this.gui = new dat.GUI({ autoPlace: true, closeOnTop: true });
this.gui.close();
this.gui.domElement.id = "gui";
this.guiFolderRotation = this.gui.addFolder("Rotation + Animation");
//this.guiFolderAnimation = this.guiFolderRotation.addFolder("Animation");
this.guiFolderCameras = this.gui.addFolder("Camera Position");
this.guiFolderLights = this.gui.addFolder("Directional Light");
this.guiFolderAllotments = this.gui.addFolder("Allotments");
this.guiFolderBeds = this.gui.addFolder("Beds");
this.guiFolderPlants = this.gui.addFolder("Plants");
//this.guiFolderInfospots = this.gui.addFolder("Infospots");
this.guiFolderAnnotations = this.gui.addFolder("Annotations");
this.guiFolderPlayer = this.gui.addFolder("Character");
this.player = {};
this.player.action = "Idle";
this.player.actionTime = Date.now();
this.animations = {};
this.anims = ["Driving", "Pointing", "Pointing Gesture", "Running", "Talking", "Turn", "Walking", "Walking Backwards"];
this.anims2 = ["ascend-stairs", "gather-objects", "look-around", "push-button", "run"];
this.tweens = [];
this.stats;
const sfxExt = SFX.supportsAudioType('mp3') ? 'mp3' : 'ogg';
this.cellSize = 16;
this.interactive = false;
this.levelIndex = 0;
this._hints = 0;
this.score = 0;
this.debug = false;
this.debugPhysics = false;
this.cameraFade = 0.05;
this.mute = false;
this.collect = [];
this.messages = {
text: [
"Welcome to your ThreeD Garden",
"GO GROW!"
],
index: 0
}
/** GAME CLOCK "dt" DELTA */
this.clock = new THREE.Clock();
/** LOADERS */
this.loaderFBX = new THREE.FBXLoader();
this.loaderGLTF = new THREE.GLTFLoader();
this.loaderOBJ = new THREE.OBJLoader();
this.loaderTexture = new THREE.TextureLoader();
/** POINTER HOVERS + CLICKS */
this.raycaster = new THREE.Raycaster();
this.pointer = new THREE.Vector2();
this.params = {
/** turn on/off animation */
ANIMATE: false,
/** where multimedia files located */
assetsPath: `${pluginURL}assets/`,
/** all the data from rest api calls to be stored here */
data: {
world: [{id: worldID}],
scene: [],
allotment: [],
bed: [],
plant: [],
planting_plan: []
},
/** POINTER HOVERS + CLICKS */
intersectedObject1: null,
intersectedObject2: null,
/** PLAYER COLLISION INTO OBJECTS */
colliders: [], // this.params.colliders.push(object3D);
// town.fbx
environment: {},
// custom fbx
farmhouse: {},
};
this.guiFolderRotation.add(this.params, "ANIMATE").name("Run Animation");
if (localStorage && !this.debug){
//const levelIndex = Number(localStorage.getItem('levelIndex'));
//if (levelIndex!=undefined) this.levelIndex = levelIndex;
}
/** REST API URLS */
this.API_URL_SCENES = `${restURL}scene/?_embed&per_page=100`;
this.API_URL_ALLOTMENTS = `${restURL}allotment/?_embed&per_page=100`;
this.API_URL_BEDS = `${restURL}bed/?_embed&per_page=100`;
this.API_URL_PLANTING_PLANS = `${restURL}planting_plan/?_embed&per_page=100`;
this.API_URL_PLANTS = `${restURL}plant/?_embed&per_page=100`;
this.api_urls = [
this.API_URL_SCENES,
this.API_URL_ALLOTMENTS,
this.API_URL_BEDS,
this.API_URL_PLANTING_PLANS,
this.API_URL_PLANTS
];
const options = {
assets:[
`${this.params.assetsPath}sfx/gliss.${sfxExt}`,
`${this.params.assetsPath}sfx/factory.${sfxExt}`,
`${this.params.assetsPath}sfx/button.${sfxExt}`,
`${this.params.assetsPath}sfx/door.${sfxExt}`,
`${this.params.assetsPath}sfx/fan.${sfxExt}`,
`${this.params.assetsPath}fbx/environment.fbx`,
`${this.params.assetsPath}fbx/girl-walk.fbx`,
`${this.params.assetsPath}fbx/usb.fbx`,
],
oncomplete: function(){
this.init();
this.animate();
}
}
this.anims.forEach( function(anim){ options.assets.push(`${game.params.assetsPath}fbx/anims2/${anim}.fbx`)});
this.mode = this.modes.PRELOAD;
document.getElementById("camera-btn").onclick = function(){ this.switchCamera(); };
document.getElementById("briefcase-btn").onclick = function(){ this.toggleBriefcase(); };
document.getElementById("action-btn").onclick = function(){ this.contextAction(); };
document.getElementById("sfx-btn").onclick = function(){ this.toggleSound(); };
this.actionBtn = document.getElementById("action-btn");
//const preloader = new Preloader(options);
this.init();
//this.animate();
window.onError = function(error){
console.error(JSON.stringify(error));
}
}
/**
* BEGIN MAIN
* *************************************************************************************** */
init() {
Promise.allSettled(
this.api_urls.map(
url => fetch(url)
.then(results => results.json())
.then(data => {
let type = data[0].type;
switch (type) {
case "scene" :
this.params.data.scene = [...data];
break;
case "allotment" :
this.params.data.allotment = [...data];
break;
case "bed" :
this.params.data.bed = [...data];
break;
case "plant" :
this.params.data.plant = [...data];
break;
case "planting_plan" :
this.params.data.planting_plan = [...data];
break;
default :
break;
}
// console.log("-----------------");
// console.log(data);
// console.log("-----------------");
})
)
)
.then(results => { // (*)
//console.log(results);
results.forEach((result, num) => {
if (result.status == "fulfilled") {
//alert(`${urls[num]}: ${result.value.status}`);
//console.log(result);
}
if (result.status == "rejected") {
//alert(`${urls[num]}: ${result.reason}`);
console.log(result);
}
})
console.log("-----------------");
console.log("this.params.data------");
console.log(this.params.data);
console.log("-----------------");
/**
* init scene constructor
*/
this.buildScene();
}
)
//.catch(() => { return null });
//throwError();
}
/**
* BUILD SCENE
* *************************************************************************************** */
buildScene() {
let game = this;
// console.log("-----------------------");
// console.log("this.params.data.scene------");
// console.log(this.params.data.scene);
// console.log(this.params.data.scene.length);
// console.log("-----------------------");
let wpScene = this.params.data.scene[0];
this.sceneID = wpScene.id;
// console.log("-----------------------");
// console.log("wpScene----------------");
// console.log(wpScene);
// console.log("-----------------------");
/** THREE JS SCENE ******************************************************************* */
this.scene = new THREE.Scene();
// load the 3D cube map?
if ( wpScene.acf.scene_background_image_px ) {
let cubeMapURLs = [
wpScene.acf.scene_background_image_px,
wpScene.acf.scene_background_image_nx,
wpScene.acf.scene_background_image_py,
wpScene.acf.scene_background_image_ny,
wpScene.acf.scene_background_image_pz,
wpScene.acf.scene_background_image_nz
];
let reflectionCube = new THREE.CubeTextureLoader().load(cubeMapURLs);
reflectionCube.format = THREE.RGBFormat;
this.scene.background = reflectionCube;
}
// load the 2D background image?
else if ( wpScene.acf.scene_background_image ) {
// let bgTexture = loaderTexture.load(wpScene.acf.scene_background_image);
// scene.background = bgTexture;
let bgTexture = this.loaderTexture.load(
wpScene.acf.scene_background_image,
() => {
const rt = new THREE.WebGLCubeRenderTarget(bgTexture.image.height);
rt.fromEquirectangularTexture(this.renderer, bgTexture);
this.scene.background = rt;
}
);
}
// load the background color?
else if ( wpScene.acf.scene_background_color ) {
this.scene.background = new THREE.Color(wpScene.acf.scene_background_color);
//scene.fog = new THREE.Fog(0xFFFFFF, 0, 500);
}
/** GEOMETRIES *********************************************************************** */
this.plane = this.getPlane(
wpScene.acf.scene_plane_width_x,
wpScene.acf.scene_plane_length_y,
wpScene.acf.scene_plane_background_color
);
this.plane.name = "plane-jane";
this.plane.rotation.x = -Math.PI / 2; // -90 degrees in radians
//this.plane.position.z = 10;
//this.plane.rotation.z += 0.002;
this.guiFolderRotation.add(this.plane.rotation, "x", -Math.PI, Math.PI).listen();
this.guiFolderRotation.add(this.plane.rotation, "y", -Math.PI, Math.PI).listen();
this.guiFolderRotation.add(this.plane.rotation, "z", -Math.PI, Math.PI).listen();
/** TEXTURES ************************************************************************* */
if ( wpScene.acf.scene_plane_texture_image ) {
this.plane.material.roughness = 0.0;
//plane.material.map = loaderTexture.load("/wp-content/plugins/threed-garden/admin/media/textures/grasslight-big.jpg");
this.plane.material.map = this.loaderTexture.load(wpScene.acf.scene_plane_texture_image);
// plane.material.bumpMap = loaderTexture.load("/wp-content/plugins/threed-garden/admin/media/textures/grasslight-big-nm.jpg");
// plane.material.bumpMap = loaderTexture.load(wpScene.acf.scene_plane_texture_image);
// plane.material.bumpScale = 0.01;
let planeTextureMap = this.plane.material.map;
planeTextureMap.wrapS = THREE.RepeatWrapping;
planeTextureMap.wrapT = THREE.RepeatWrapping;
planeTextureMap.repeat.set(4, 4);
}
/** LIGHTS *************************************************************************** */
// let pointLight = this.getPointLight(0xFFFFFF, 4.0);
// pointLight.position.set( -20, -60, 20 );
// //pointLight.intensity = 3.0;
// let spotLight = this.getSpotLight(0xFFFFFF, 4.0);
// spotLight.position.set( -20, -60, 20 );
// //spotLight.intensity = 3.0;
let directionalLight = this.getDirectionalLight(0xFFFFFF, 2.1);
directionalLight.position.set( -90, -120, 120 );
//directionalLight.intensity = 2.4;
let helperDirectionalLight = new THREE.CameraHelper(directionalLight.shadow.camera);
helperDirectionalLight.visible = false;
// let directionalLight2 = this.getDirectionalLight(0xFFFFFF, 1.0);
// directionalLight2.castShadow = false;
// directionalLight2.position.set( 90, 120, 120 );
// //directionalLight2.intensity = 1.4;
// let helperDirectionalLight2 = new THREE.CameraHelper(directionalLight2.shadow.camera);
// helperDirectionalLight2.visible = true;
//let ambientLight = this.getAmbientLight(0xFFFFFF, 0.1);
//ambientLight.position.set( -100, -100, 25 );
this.guiFolderLights.add(helperDirectionalLight, "visible", 0, 20).name("Show Light Helper");
this.guiFolderLights.add(directionalLight, "intensity", 0, 20);
this.guiFolderLights.add(directionalLight.position, "x", -500, 500);
this.guiFolderLights.add(directionalLight.position, "y", -500, 500);
this.guiFolderLights.add(directionalLight.position, "z", -500, 500);
// guiFolderLights.add(helperDirectionalLight2, "visible", 0, 20).name("Show Light 2 Helper");
// guiFolderLights.add(directionalLight2, "intensity", 0, 20);
// guiFolderLights.add(directionalLight2.position, "x", -500, 500);
// guiFolderLights.add(directionalLight2.position, "y", -500, 500);
// guiFolderLights.add(directionalLight2.position, "z", -500, 500);
/** SCENE ***************************************************************************** */
// add objects to scene
//this.plane.add(structure);
//this.plane.add(pointLight);
//this.plane.add(spotLight);
this.plane.add(directionalLight);
//this.plane.add(directionalLight2);
//this.plane.add(ambientLight);
this.scene.add(helperDirectionalLight);
//this.scene.add(helperDirectionalLight2);
this.scene.add(this.plane);
/** CAMERA **************************************************************************** */
this.camera = new THREE.PerspectiveCamera(
55,
window.innerWidth / window.innerHeight,
0.01,
10000
);
this.camera.name = "garden-cam";
this.camera.position.set(86, 64, 182);
//this.camera.lookAt(new THREE.Vector3(0, 0, 0)); // overridden by OrbitControls.target
let helperCamera = new THREE.CameraHelper(this.camera);
helperCamera.visible = false;
this.scene.add(helperCamera);
this.guiFolderCameras.add(helperCamera, "visible", 0, 20).name("Show Camera Helper");
this.guiFolderCameras.add(this.camera.position, "x", -500, 500).listen();
this.guiFolderCameras.add(this.camera.position, "y", -500, 500).listen();
this.guiFolderCameras.add(this.camera.position, "z", -500, 500).listen();
/** RENDERER ************************************************************************** */
this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
this.renderer.shadowMap.enabled = true;
this.renderer.setSize(window.innerWidth - 240, window.innerHeight - 100);
/** POINTER HOVERS + CLICKS */
this.renderer.domElement.addEventListener("pointermove", function(){ game.onPointerMove(game.pointer); }, false);
this.renderer.domElement.addEventListener("pointerdown", function(){ game.onPointerDown(game.pointer); }, false);
/** CONTROLS *************************************************************************** */
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.25;
this.controls.enableZoom = true;
this.controls.rotateSpeed = 0.5;
this.controls.autoRotate = false;
this.controls.autoRotateSpeed = 0.03;
this.controls.minDistance = 0.01;
this.controls.maxDistance = 340;
this.controls.maxPolarAngle = Math.PI/2 - .04;
this.controls.target = new THREE.Vector3(0, 0, 0); // where the camera actually points
//this.controls.target.set(0, 5, 0); // alternate way of setting target of camera
/** utilize javascript prototyping.. add variables to the dom element :) *************** */
this.renderer.domElement.camera = this.camera;
this.renderer.domElement.targetList = this.plane.children;
this.renderer.domElement.controls = this.controls;
/** WEBGL CANVAS *********************************************************************** */
this.container = document.querySelector("#webgl");
this.container.append(this.gui.domElement);
this.container.append(this.renderer.domElement);
this.canvas = this.renderer.domElement;
/** FBX ******************************************************************************** */
//this.loaderFBX.load( `${this.params.assetsPath}characters/SimplePeople.fbx`, function (object) {
//this.loaderFBX.load( `${this.params.assetsPath}fbx/people/FireFighter.fbx`, function (object) {
this.loaderFBX.load( `${this.params.assetsPath}fbx/people/Trucker.fbx`, function (object) {
//this.loaderFBX.load( `${this.params.assetsPath}characters/SK_Chr_Farmer_Male_01.fbx`, function (object) {
object.mixer = new THREE.AnimationMixer( object );
this.player.mixer = object.mixer;
this.player.root = object.mixer.getRoot();
object.name = "Gardener";
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = false;
}
} );
this.loaderTexture.load(`${params.assetsPath}images/SimpleFarmer_Farmer_Brown.png`, function(texture) {
//loaderTexture.load(`${params.assetsPath}textures/PolygonFarm_Texture_01_A.png`, function(texture) {
object.traverse( function ( child ) {
if ( child.isMesh ){
child.material.map = texture;
}
} );
});
// console.log("-----------------------");
// console.log("object----------------");
// console.log(object);
// console.log("-----------------------");
this.player.object = new THREE.Object3D();
this.player.object.add(object);
this.player.object.scale.set(0.022, 0.022, 0.022);
this.player.object.rotation.x = Math.PI/2; // 90 degrees in radians
this.player.mixer.clipAction(object.animations[0]).play();
this.animations.Idle = object.animations[0];
//this.setAction("Idle");
this.plane.add(this.player.object);
this.guiFolderPlayer.add(this.player.object, "visible").name("Show Character").listen();
// console.log("-----------------------");
// console.log("this.player.object----------------");
// console.log(this.player.object);
// console.log("-----------------------");
this.loadNextAnim(this.loaderFBX);
} );
//this.createCameras();
this.joystick = new JoyStick({
onMove: this.playerControl,
game: this.container
});
this.loadFarmHouse();
//this.loadChickenCoop();
//this.loadHen();
//this.loadChicken();
//this.loadHenGLTF();
//this.loadRooster();
//this.loadChickenGLTF();
//this.loadChickGLTF();
//this.loadKitchenSink();
//this.loadChickenFree();
//this.loadRoad();
/** BUILD ALLOTMENTS ******************************************************************* */
this.buildAllotments(
this.params.data.allotment,
this.plane,
this.sceneID // the post-to-post relationship <3
);
this.animate();
//return this.scene;
}
/** ANIMATE + RENDER (continuous rendering) ******************************************** */
animate() {
const game = this;
const dt = this.clock.getDelta();
this.watchPointer(this.camera, this.plane.children);
this.controls.update();
TWEEN.update();
//requestAnimationFrame(this.animate);
requestAnimationFrame( function(){ game.animate(); } );
if ( this.params.ANIMATE ) {
// this.plane.rotation.x += 0.002;
// this.plane.rotation.y += 0.002;
this.plane.rotation.z -= 0.0007;
}
/** PLAYER CHARACTER */
if ( this.player.mixer !== undefined ) {
this.player.mixer.update(dt);
}
if ( this.player.action == "Walking" ) {
const elapsedTime = Date.now() - this.player.actionTime;
if ( elapsedTime > 2000 && this.player.move.forward > 0.7 ){
this.setAction("Running");
}
}
if ( this.player.move !== undefined ) {
this.movePlayer(dt);
}
if ( this.player.cameras != undefined && this.player.cameras.active != undefined ) {
this.camera.position.lerp( this.player.cameras.active.getWorldPosition(new THREE.Vector3()), 0.05 );
const pos = this.player.object.position.clone();
pos.y += 200;
this.camera.lookAt(pos);
}
//if (directionalLight != undefined){
// directionalLight.position.x = player.object.position.x;
// directionalLight.position.y = player.object.position.y + 200;
// directionalLight.position.z = player.object.position.z + 100;
// directionalLight.target = player.object;
//}
this.renderer.render(this.scene, this.camera);
};
loadNextAnim(loader) {
let anim = this.anims.pop();
// console.log("-----------------------");
// console.log("anim-------------------");
// console.log(anim);
// console.log("-----------------------");
loader.load( `${this.params.assetsPath}fbx/anims2/${anim}.fbx`, function(object) {
// console.log("-----------------------");
// console.log("object-----------------");
// console.log(object);
// console.log("-----------------------");
this.animations[anim] = object.animations[0];
if (this.anims.length > 0){
// console.log("-----------------------");
// console.log("this.anims.length-----------");
// console.log(this.anims.length);
// console.log("-----------------------");
// console.log("-----------------------");
// console.log("this.getAction()-----------");
// console.log(this.getAction());
// console.log("-----------------------");
// console.log("this.player.action----------");
// console.log(this.player.action);
// console.log("-----------------------");
this.loadNextAnim(loader);
}
else {
// console.log("-----------------------");
// console.log("this.anims.length = 0-------");
// console.log(this.anims.length);
// console.log("-----------------------");
this.anims = [];
this.setAction("Idle");
this.animate();
}
});
}
setAction(name) {
const action = this.player.mixer.clipAction( animations[name] );
action.time = 0;
// console.log("-----------------------");
// console.log("action-----------------");
// console.log(action);
// console.log("-----------------------");
this.player.mixer.stopAllAction();
this.player.action = name;
this.player.actionTime = Date.now();
// console.log("-----------------------");
// console.log("this.player-----------------");
// console.log(this.player);
// console.log("-----------------------");
action.fadeIn(0.5);
action.play();
}
getAction() {
if (this.player === undefined || this.player.action === undefined) {
return "doesn't exist yet";
}
return this.player.action;
}
toggleAnimation() {
if ( this.player.action == "Idle" ) {
this.setAction("Pointing Gesture");
}
else {
this.setAction("Idle");
}
}
movePlayer1(dt) {
// console.log("-------------------------");
// console.log("this.player.move.forward------");
// console.log(this.player.move.forward);
// console.log("-------------------------");
if ( this.player.move.forward > 0 ) {
const speed = ( this.player.action == "Running" ) ? 24 : 8;
this.player.object.translateZ( dt * speed );
}
else if ( this.player.move.forward < 0 ) {
this.player.object.translateZ( -dt * 2);
}
this.player.object.rotateY( this.player.move.turn * dt );
}
movePlayer(dt){
const pos = this.player.object.position.clone();
pos.y += 60;
let dir = new THREE.Vector3();
this.player.object.getWorldDirection(dir);
if (this.player.move.forward < 0) dir.negate();
let raycaster = new THREE.Raycaster(pos, dir);
let blocked = false;
const colliders = this.params.colliders;
// if (colliders!==undefined){
// const intersect = raycaster.intersectObjects(colliders);
// if (intersect.length>0){
// if (intersect[0].distance<50) blocked = true;
// }
// }
if (!blocked){
if ( this.player.move.forward > 0 ){
const speed = (this.player.action == "Running") ? 24 : 8;
this.player.object.translateZ(dt*speed);
}
else if ( this.player.move.forward < 0 ) {
this.player.object.translateZ(-dt*2);
}
}
/*
if (colliders!==undefined){
//cast left
dir.set(-1,0,0);
dir.applyMatrix4(player.object.matrix);
dir.normalize();
raycaster = new THREE.Raycaster(pos, dir);
let intersect = raycaster.intersectObjects(colliders);
if (intersect.length>0){
if (intersect[0].distance<50) this.player.object.translateX(100-intersect[0].distance);
}
//cast right
dir.set(1,0,0);
dir.applyMatrix4(player.object.matrix);
dir.normalize();
raycaster = new THREE.Raycaster(pos, dir);
intersect = raycaster.intersectObjects(colliders);
if (intersect.length>0){
if (intersect[0].distance<50) this.player.object.translateX(intersect[0].distance-100);
}
//cast down
dir.set(0,-1,0);
pos.y += 200;
raycaster = new THREE.Raycaster(pos, dir);
const gravity = 30;
intersect = raycaster.intersectObjects(colliders);
if (intersect.length>0){
const targetY = pos.y - intersect[0].distance;
if (targetY > this.player.object.position.y){
//Going up
this.player.object.position.y = 0.8 * this.player.object.position.y + 0.2 * targetY;
this.player.velocityY = 0;
}else if (targetY < this.player.object.position.y){
//Falling
if (this.player.velocityY==undefined) this.player.velocityY = 0;
this.player.velocityY += dt * gravity;
this.player.object.position.y -= this.player.velocityY;
if (this.player.object.position.y < targetY){
this.player.velocityY = 0;
this.player.object.position.y = targetY;
}
}
}else if (this.player.object.position.y>0){
if (this.player.velocityY==undefined) this.player.velocityY = 0;
this.player.velocityY += dt * gravity;
this.player.object.position.y -= this.player.velocityY;
if (this.player.object.position.y < 0){
this.player.velocityY = 0;
this.player.object.position.y = 0;
}
}
}
*/
this.player.object.rotateY(this.player.move.turn*dt);
}
playerControl(forward, turn) {
turn = -turn;
if ( forward > 0.2 ) {
if ( this.player.action != "Walking" && this.player.action != "Running" ) {
this.setAction("Walking");
}
}
else if ( forward < -0.2 ) {
if ( this.player.action != "Walking Backwards" ) {
this.setAction("Walking Backwards");
}
}
else {
forward = 0;
if ( Math.abs(turn) > 0.05 ) {
if ( this.player.action != "Turn" ) {
this.setAction("Turn");
}
}
else if ( this.player.action != "Idle" ) {
this.setAction("Idle");
}
// else {
// this.setAction("Idle");
// }
}
// if ( forward == 0 && turn == 0 ) {
// this.player.move = {};
// }
// else {
this.player.move = { forward, turn };
// }
}
createCameras() {
const offset = new THREE.Vector3(0, 80, 0);
const front = new THREE.Object3D();
front.position.set(112, 100, 600);
front.parent = this.player.object;
const back = new THREE.Object3D();
back.position.set(0, 300, -600);
back.parent = this.player.object;
const wide = new THREE.Object3D();
wide.position.set(178, 139, 1665);
wide.parent = this.player.object;
const overhead = new THREE.Object3D();
overhead.position.set(0, 400, 0);
overhead.parent = this.player.object;
const collect = new THREE.Object3D();
collect.position.set(40, 82, 94);
collect.parent = this.player.object;
this.player.cameras = { front, back, wide, overhead, collect };
this.setActiveCamera(player.cameras.back);
}
setActiveCamera(object) {
this.player.cameras.active = object;
}
loadEnvironment(loader) {
loader.load(`${this.params.assetsPath}fbx/town.fbx`, function(object){
this.params.environment = object;
this.params.colliders = [];
object.scale.set(0.025, 0.025, 0.025);
this.scene.add(object);
object.traverse( function ( child ) {
if ( child.isMesh ) {
if (child.name.startsWith("proxy")){
this.params.colliders.push(child);
child.material.visible = false;
}else{
child.castShadow = true;
child.receiveShadow = true;
}
}
} );
})
}
loadFarmHouse() {
let game = this;
//this.loaderFBX.load(`${this.params.assetsPath}fbx/SM_Bld_Farmhouse_01.fbx`, function(object){
this.loaderFBX.load(`${this.params.assetsPath}fbx/Building_Farm_House_02.fbx`, function(object){
//this.loaderFBX.load(`${this.params.assetsPath}fbx/Building_Barn_Big_03.fbx`, function(object){
this.params.farmhouse = object;
this.params.colliders = [];
object.rotation.y = 270 * (Math.PI/180); // 90 degrees in radians
object.position.set(0, 0, 100);
//object.scale.set(0.025, 0.025, 0.025);
object.scale.set(2.2, 2.2, 2.2);
this.scene.add(object);
object.traverse( function ( child ) {
if ( child.isMesh ) {
if (child.name.startsWith("proxy")){
this.params.colliders.push(child);
child.material.visible = false;
}else{
child.castShadow = true;
child.receiveShadow = true;
}
}
} );
//this.loaderTexture.load(`${this.params.assetsPath}textures/PolygonFarm_Texture_01_A.png`, function(texture) {
this.loaderTexture.load(`${this.params.assetsPath}textures/SimpleFarm.png`, function(texture) {
object.traverse( function ( child ) {
if ( child.isMesh ){
child.material.map = texture;
}
} );
});
})
}
loadFarmHouseGLTF() {
// loaderFBX.load( `${params.assetsPath}fbx/Building_Farm_House_02.fbx`, function (object) {
loaderGLTF.load( `${params.assetsPath}gltf/Residential House.glb`, function (object) {
let model = object.scene;
model.name = "Farm House";
model.position.set(0, 0, 100);
model.scale.set(20, 20, 20);
model.traverse( function ( child ) {
if ( child.isMesh ) child.castShadow = true;
} );
scene.add(model);
helper = new THREE.SkeletonHelper(model);
helper.material.linewidth = 5;
helper.visible = true;
scene.add(helper);
console.log("-----------------------");
console.log("loadFarmHouse object----------------");
console.log(object);
console.log("-----------------------");
console.log("-----------------------");
console.log("loadFarmHouse model----------------");
console.log(model);
console.log("-----------------------");
guiFolderPlayer.add(model, "visible").name("Show House").listen();
} );
}
loadChickenCoop() {
loaderFBX.load(`${params.assetsPath}fbx/Prop_Chicken_Coop_02.fbx`, function(object){
params.farmhouse = object;
params.colliders = [];
object.rotation.y = 90 * (Math.PI/180); // 90 degrees in radians
object.position.set(80, 0, -10);
object.scale.set(2.2, 2.2, 2.2);
scene.add(object);
object.traverse( function ( child ) {
if ( child.isMesh ) {
if (child.name.startsWith("proxy")){
params.colliders.push(child);
child.material.visible = false;
}else{
child.castShadow = true;
child.receiveShadow = true;
}
}
} );
loaderTexture.load(`${params.assetsPath}textures/SimpleFarm.png`, function(texture) {
object.traverse( function ( child ) {
if ( child.isMesh ){
child.material.map = texture;
}
} );
});
//loadNextAnim(loader);
})
}
loadChicken() {
loaderGLTF.load( `${params.assetsPath}gltf/Chicken.glb`, function (object) {
let model = object.scene;
model.name = "Chicken GLB";
model.position.set(-3, 0, 0);
//model.rotation.y = 90 * (Math.PI/180); // 90 degrees in radians
model.scale.set(4, 4, 4);
model.traverse( function ( child ) {
if ( child.isMesh ) child.castShadow = true;
} );
scene.add(model);
// helper = new THREE.SkeletonHelper(model);
// helper.material.linewidth = 5;
// helper.visible = true;
// scene.add(helper);
console.log("-----------------------");
console.log("loadChicken object----------------");
console.log(object);
console.log("-----------------------");
console.log("-----------------------");
console.log("loadChicken model----------------");
console.log(model);
console.log("-----------------------");
//guiFolderPlayer.add(model, "visible").name("Show Chicken").listen();
} );
}
loadChicken0() {
loaderFBX.load(`${params.assetsPath}fbx/Chicken.fbx`, function(object){
console.log("-----------------------");
console.log("BIRD----------------");
console.log(object);
console.log("-----------------------");
//params.farmhouse = object;
//params.colliders = [];
//object.rotation.y = 90 * (Math.PI/180); // 90 degrees in radians
object.position.set(0, 0, 0);
//object.scale.set(2.2, 2.2, 2.2);
scene.add(object);
object.traverse( function ( child ) {
if ( child.isMesh ) {
// if (child.name.startsWith("proxy")){
// params.colliders.push(child);
// child.material.visible = false;
// }else{
child.castShadow = true;
child.receiveShadow = true;
//}
}
} );
// loaderTexture.load(`${params.assetsPath}textures/SimpleAnimalsFarm.png`, function(texture) {
// object.traverse( function ( child ) {
// if ( child.isMesh ){
// child.material.map = texture;
// }
// } );
// });
//loadNextAnim(loader);
})
}
loadChicken1() {
loaderFBX.load(`${params.assetsPath}fbx/SA_Animal_Birds.fbx`, function(object){
console.log("-----------------------");
console.log("BIRD----------------");
console.log(object);
console.log("-----------------------");
//params.farmhouse = object;
//params.colliders = [];
//object.rotation.y = 90 * (Math.PI/180); // 90 degrees in radians
object.position.set(0, 0, 0);
//object.scale.set(2.2, 2.2, 2.2);
scene.add(object);
object.traverse( function ( child ) {
if ( child.isMesh ) {
// if (child.name.startsWith("proxy")){
// params.colliders.push(child);
// child.material.visible = false;
// }else{
child.castShadow = true;
child.receiveShadow = true;
//}
}
} );
loaderTexture.load(`${params.assetsPath}textures/SimpleAnimalsFarm.png`, function(texture) {
object.traverse( function ( child ) {
if ( child.isMesh ){
child.material.map = texture;
}
} );
});
//loadNextAnim(loader);
})
}
loadChickenGLTF() {
loaderGLTF.load( `${params.assetsPath}gltf/Animals.glb`, function (object) {
console.log("-----------------------");
console.log("Animals object----------------");
console.log(object);
console.log("-----------------------");
object.mixer = new THREE.AnimationMixer( object.scene );
player.mixer = object.mixer;
player.root = object.mixer.getRoot();
object.name = "Chicken Dance";
object.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = false;
}
} );
player.object = new THREE.Object3D();
player.object.add(object.scene);
player.object.position.set(0, 0, 10);
player.object.scale.set(4, 4, 4);
player.object.rotation.x = Math.PI/2; // 90 degrees in radians
player.mixer.timeScale = 0.5;
player.mixer.clipAction(object.animations[2]).play();
//animations.Idle = object.animations[0];
//setAction("Idle");
plane.add(player.object);
//guiFolderPlayer.add(player.object, "visible").name("Show Character").listen();
//animate();
// OR
//loadNextAnim(loaderFBX);
// OR
//loadEnvironment(loaderFBX);
} );
}
loadChickGLTF() {
loaderGLTF.load( `${params.assetsPath}gltf/Chick.glb`, function (object) {
let model = object.scene;
model.name = "Chick GLB";
model.position.set(3, 0, 0);
//model.rotation.y = 90 * (Math.PI/180); // 90 degrees in radians
model.scale.set(2, 2, 2);
model.traverse( function ( child ) {
if ( child.isMesh ) child.castShadow = true;
} );
scene.add(model);
// helper = new THREE.SkeletonHelper(model);
// helper.material.linewidth = 5;
// helper.visible = true;
// scene.add(helper);
console.log("-----------------------");
console.log("loadChickGLTF object----------------");
console.log(object);
console.log("-----------------------");
console.log("-----------------------");
console.log("loadChickGLTF model----------------");
console.log(model);
console.log("-----------------------");
//guiFolderPlayer.add(model, "visible").name("Show Chicken").listen();
} );
}
loadHen() {
loaderFBX.load(`${params.assetsPath}Hen&Chicken_FBX/Hen_HP.fbx`, function(object){
params.farmhouse = object;
params.colliders = [];
//object.rotation.y = 270 * (Math.PI/180); // 90 degrees in radians
object.position.set(3, 0, 0);
object.scale.set(0.05, 0.05, 0.05);
object.traverse( function ( child ) {
if ( child.isMesh ) {
if (child.name.startsWith("proxy")){
params.colliders.push(child);
child.material.visible = false;
}else{
child.castShadow = true;
child.receiveShadow = true;
}
}
} );
loaderTexture.load(`${params.assetsPath}Hen&Chicken_FBX/Textures/Hen&Chicken_A.png`, function(texture) {
object.traverse( function ( child ) {
if ( child.isMesh ){
child.material.map = texture;
console.log("-----------------------");
console.log("loadHen child----------------");
console.log(child);
console.log(child.geometry.attributes.uv);
console.log("-----------------------");
}
} );
});
console.log("-----------------------");
console.log("loadHen object----------------");
console.log(object);
console.log("-----------------------");
scene.add(object);
//loadNextAnim(loader);
})
}
loadHenGLTF() {
// loaderFBX.load( `${params.assetsPath}fbx/Building_Farm_House_02.fbx`, function (object) {
loaderGLTF.load( `${params.assetsPath}gltf/Hen_HP.glb`, function (object) {
let model = object.scene;
//model.name = "Hen";
//model.position.set(10, 0, 0);
//model.scale.set(0.2, 0.2, 0.2);
model.traverse( function ( child ) {
if ( child.isMesh ) child.castShadow = true;
} );
scene.add(model);
// helper = new THREE.SkeletonHelper(model);
// helper.material.linewidth = 5;
// helper.visible = true;
// scene.add(helper);
console.log("-----------------------");
console.log("loadHenGLTF object----------------");
console.log(object);
console.log("-----------------------");
console.log("-----------------------");
console.log("loadHenGLTF model----------------");
console.log(model);
console.log("-----------------------");
//guiFolderPlayer.add(model, "visible").name("Show Hen GLTF").listen();
} );
}
loadKitchenSink() {
loaderFBX.load(`${params.assetsPath}fbx/Prop_KitchenSink_Black.fbx`, function(object){
params.farmhouse = object;
params.colliders = [];
object.rotation.y = 270 * (Math.PI/180); // 90 degrees in radians
object.position.set(0, 0, 10);
//object.scale.set(0.025, 0.025, 0.025);
object.scale.set(2.2, 2.2, 2.2);
scene.add(object);
object.traverse( function ( child ) {
if ( child.isMesh ) {
if (child.name.startsWith("proxy")){
params.colliders.push(child);
child.material.visible = false;
}else{
child.castShadow = true;
child.receiveShadow = true;
}
}
} );
//loaderTexture.load(`${params.assetsPath}textures/PolygonFarm_Texture_01_A.png`, function(texture) {
loaderTexture.load(`${params.assetsPath}textures/SimpleInteriorsHouses.png`, function(texture) {
object.traverse( function ( child ) {
if ( child.isMesh ){
child.material.map = texture;
}
} );
});
//loadNextAnim(loader);
})
}
loadChickenFree() {
loaderOBJ.load(`${params.assetsPath}obj/chicken_01.obj`, function(object){
// params.farmhouse = object;
// params.colliders = [];
//object.rotation.y = 270 * (Math.PI/180); // 90 degrees in radians
//object.position.set(0, 0, 10);
//object.scale.set(0.025, 0.025, 0.025);
//object.scale.set(2.2, 2.2, 2.2);
scene.add(object);
// object.traverse( function ( child ) {
// if ( child.isMesh ) {
// if (child.name.startsWith("proxy")){
// params.colliders.push(child);
// child.material.visible = false;
// }else{
// child.castShadow = true;
// child.receiveShadow = true;
// }
// }
// } );
// //loaderTexture.load(`${params.assetsPath}textures/PolygonFarm_Texture_01_A.png`, function(texture) {
// loaderTexture.load(`${params.assetsPath}textures/SimpleInteriorsHouses.png`, function(texture) {
// object.traverse( function ( child ) {
// if ( child.isMesh ){
// child.material.map = texture;
// }
// } );
// });
//loadNextAnim(loader);
})
}
loadRooster() {
loaderFBX.load(`${params.assetsPath}fbx/rooster_1.0.1.fbx`, function(object){
// params.farmhouse = object;
// params.colliders = [];
//object.rotation.y = 270 * (Math.PI/180); // 90 degrees in radians
object.position.set(0, 0, 10);
object.scale.set(0.025, 0.025, 0.025);
//object.scale.set(2.2, 2.2, 2.2);
scene.add(object);
// object.traverse( function ( child ) {
// if ( child.isMesh ) {
// if (child.name.startsWith("proxy")){
// params.colliders.push(child);
// child.material.visible = false;
// }else{
// child.castShadow = true;
// child.receiveShadow = true;
// }
// }
// } );
// //loaderTexture.load(`${params.assetsPath}textures/PolygonFarm_Texture_01_A.png`, function(texture) {
// loaderTexture.load(`${params.assetsPath}textures/SimpleInteriorsHouses.png`, function(texture) {
// object.traverse( function ( child ) {
// if ( child.isMesh ){
// child.material.map = texture;
// }
// } );
// });
//loadNextAnim(loader);
})
}
loadRoad() {
let i;
let count = 9;
let startX = -45;
let offsetX = 0;
let startZ = -138;
let offsetZ = 20;
// ROAD A
for ( i = 1; i <= count; i++ ) {
loaderFBX.load(`${params.assetsPath}fbx/SM_Env_Road_Gravel_Straight_01.fbx`, function(object){
// console.log("-----------------------");
// console.log("ROAD----------------");
// console.log(object);
// console.log("-----------------------");
//params.farmhouse = object;
//params.colliders = [];
//object.rotation.y = 90 * (Math.PI/180); // 90 degrees in radians
object.position.set(startX, 0, startZ);
startX = startX + offsetX;
startZ = startZ + offsetZ;
object.scale.set(0.02, 0.01, 0.02);
object.traverse( function ( child ) {
if ( child.isMesh ) {
// if (child.name.startsWith("proxy")){
// params.colliders.push(child);
// child.material.visible = false;
// }else{
child.castShadow = true;
child.receiveShadow = true;
//}
}
} );
loaderTexture.load(`${params.assetsPath}textures/PolygonFarm_Texture_03_A.png`, function(texture) {
object.traverse( function ( child ) {
if ( child.isMesh ){
//child.material.color.setHex(0x000000);
child.material.transparent = true;
child.material.opacity = 0.7;
//child.material.depthWrite = true;
child.material.map = texture;
}
} );
});
scene.add(object);
console.log("-----------------------");
console.log("ROAD----------------");
console.log(object);
console.log("-----------------------");
//loadNextAnim(loader);
});
}
// ROAD T
for ( i = 1; i <= 1; i++ ) {
loaderFBX.load(`${params.assetsPath}fbx/SM_Env_Road_Gravel_T_Section_01.fbx`, function(object){
console.log("-----------------------");
console.log("ROAD T----------------");
console.log(startX, startZ);
console.log("-----------------------");
//params.farmhouse = object;
//params.colliders = [];
//object.rotation.y = 90 * (Math.PI/180); // 90 degrees in radians
object.position.set(startX, 0, startZ);
startX = startX + offsetX;
startZ = startZ + offsetZ;
object.scale.set(0.02, 0.01, 0.02);
object.traverse( function ( child ) {
if ( child.isMesh ) {
// if (child.name.startsWith("proxy")){
// params.colliders.push(child);
// child.material.visible = false;
// }else{
child.castShadow = true;
child.receiveShadow = true;
//}
}
} );
loaderTexture.load(`${params.assetsPath}textures/PolygonFarm_Texture_03_A.png`, function(texture) {
object.traverse( function ( child ) {
if ( child.isMesh ){
//child.material.color.setHex(0x000000);
child.material.transparent = true;
child.material.opacity = 0.7;
//child.material.depthWrite = true;
child.material.map = texture;
}
} );
});
scene.add(object);
console.log("-----------------------");
console.log("ROAD T----------------");
console.log(object);
console.log("-----------------------");
//loadNextAnim(loader);
});
}
}
/**
* BUILD "ALLOTMENTS" FROM REST API POST OBJECT ************************************************************
*/
buildAllotments(postObject, plane, sceneID) {
let game = this;
// console.log("-------------------------");
// console.log("postObject ALLOTMENTS----");
// console.log(postObject);
// console.log("-------------------------");
var filteredPostObject = postObject.filter(function (obj) {
return obj.acf.allotment_scene == sceneID;
});
// console.log("filteredPostObject-------");
// console.log(filteredPostObject);
// console.log("-------------------------");
filteredPostObject.forEach( function(key) {
// console.log("-------------------------");
// console.log("key.id (postObject)------");
// console.log(key.id);
// console.log(key);
// console.log("-------------------------");
// BUILD ALLOTMENT OBJECT GROUP
let allotment = {};
allotment.parameters = {};
allotment.position = {};
allotment.images = {};
allotment.parameters.x = parseInt(key.acf.allotment_width);
allotment.parameters.y = parseInt(key.acf.allotment_length);
allotment.parameters.z = parseInt(key.acf.allotment_height); // 0
allotment.position.x = parseInt(key.acf.allotment_position_x);
allotment.position.y = parseInt(key.acf.allotment_position_y);
allotment.position.z = parseInt(key.acf.allotment_position_z);
allotment.images.texture = key.acf.allotment_texture_image;
allotment.images.featured = game.getFeaturedImage(key);
allotment.shape = key.acf.allotment_shape;
allotment.color = key.acf.allotment_color;
allotment.title = key.title.rendered;
allotment.postID = key.id;
allotment.description = key.content.rendered;
allotment.link = key.link;
// console.log("-------------------------");
// console.log("allotment----------------");
// console.log(allotment);
// console.log("-------------------------");
let structure = game.getGeometry(
allotment.shape,
allotment.parameters.x,
allotment.parameters.y,
allotment.parameters.z,
allotment.color
);
structure.name = allotment.title;
structure.userData.type = "structure";
structure.userData.postID = allotment.postID;
structure.userData.description = allotment.description;
structure.userData.annotation = allotment.title;
structure.userData.link = allotment.link;
structure.position.x = allotment.position.x;
structure.position.y = allotment.position.y;
structure.position.z = (structure.geometry.parameters.depth / 2) + allotment.position.z; // - 10 for gap between plane
structure.material.roughness = 0.9;
if (allotment.images.texture != null && allotment.images.texture != false) {
structure.material.map = game.loaderTexture.load(allotment.images.texture);
for (let i = 0; i < structure.material.length; i++) {
// hightlight object
//structure.material[i].color.set(0xff0000);
structure.material[i].map = game.loaderTexture.load(allotment.images.texture);
//structure.faces[i].materialIndex = 1;
//console.log(intersects[i]);
// structure.material[i].bumpMap = loaderTexture.load(allotment.images.texture);
// structure.material[i].bumpScale = 0.05;
let structureTextureMap = structure.material[i].map;
structureTextureMap.wrapS = THREE.RepeatWrapping;
structureTextureMap.wrapT = THREE.RepeatWrapping;
structureTextureMap.repeat.set(4, 4);
}
}
plane.add(structure);
//params.colliders.push(structure);
//guiFolderAllotments.add(structure.geometry.parameters, "dep