wordpress-plugin/admin/js/threed-garden-admin.js

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

/** 
 * ThreeDGarden - Custom Admin JavaScript 
 * *************************************************************************************** */

const app = Vue.createApp({
	//data: function() {
	data() {
		return {
			plugin: 'ThreeD Garden'
		}
	}
})
console.log("app", app)

const App = app.mount('#webgl')
//const App = app.mount('#app')
console.log("App", App)

// check for WebGL
if ( ! Detector.webgl ) Detector.addGetWebGLMessage()

/** 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 COMMON VARIABLES */
let scene
let plane
let camera
let controls
let gui
	gui = new dat.GUI({ autoPlace: true, closeOnTop: true })
	gui.close()
	gui.domElement.id = "gui"
	let guiFolderRotation 		= gui.addFolder("Rotation + Animation")
	//let guiFolderAnimation 	= guiFolderRotation.addFolder("Animation")
	let guiFolderCameras 		= gui.addFolder("Camera Position")
	let guiFolderLights 		= gui.addFolder("Directional Light")
	let guiFolderAllotments 	= gui.addFolder("Allotments")
	let guiFolderBeds 			= gui.addFolder("Beds")
	let guiFolderPlants 		= gui.addFolder("Plants")
	//let guiFolderInfospots 	= gui.addFolder("Infospots")
	let guiFolderAnnotations 	= gui.addFolder("Annotations")
	let guiFolderPlayer 		= gui.addFolder("Character")
let renderer
let container
let canvas
let player = {}
	player.action = "Idle"
	player.actionTime = Date.now()
let animations = {}
let anims = ["Breathing Idle", "Driving", "Idle", "Left Turn", "Pointing", "Pointing Gesture"]
	anims = [...anims, "Right Turn", "Running", "Talking", "Turn", "Walking", "Walking Backwards"]
let anims2 = ["ascend-stairs", "gather-objects", "look-around", "push-button", "run"]
let tweens = []
let stats

let cellSize = 16
let interactive = false
let levelIndex = 0
let _hints = 0
let score = 0
let debug = false
let debugPhysics = false
let cameraFade = 0.05
let mute = false
let collect = []

let messages = { 
	text: [ 
		"Welcome to your ThreeD Garden",
		"GO GROW!"
	],
	index: 0
}

let params = {
	/** SET MODES */
	modes: Object.freeze({
		NONE:   Symbol("none"),
		PRELOAD: Symbol("preload"),
		INITIALISING:  Symbol("initialising"),
		CREATING_LEVEL: Symbol("creating_level"),
		ACTIVE: Symbol("active"),
		GAMEOVER: Symbol("gameover")
	}),
	/** 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: [], // params.colliders.push(object3D)
	// town.fbx
	environment: {},
	// custom fbx
	farmhouse: {},
}
params.mode = params.modes.NONE
guiFolderRotation.add(params, "ANIMATE").name("Run Animation")

//if (localStorage && ! debug){
	//const levelIndex = Number(localStorage.getItem('levelIndex'))
	//if (levelIndex!=undefined) this.levelIndex = levelIndex
//}


const sfxExt = SFX.supportsAudioType('mp3') ? 'mp3' : 'ogg'
const options = {
	assets:[
		`${params.assetsPath}sfx/gliss.${sfxExt}`,
		`${params.assetsPath}sfx/factory.${sfxExt}`,
		`${params.assetsPath}sfx/button.${sfxExt}`,
		`${params.assetsPath}sfx/door.${sfxExt}`,
		`${params.assetsPath}sfx/fan.${sfxExt}`,
		`${params.assetsPath}fbx/environment.fbx`,
		`${params.assetsPath}fbx/girl-walk.fbx`,
		`${params.assetsPath}fbx/usb.fbx`,
	],
	oncomplete: function(){
		init()
		//animate()
	}
}
anims.forEach( function(anim){ options.assets.push(`${params.assetsPath}fbx/anims2/${anim}.fbx`)})

params.mode = params.modes.PRELOAD

//this.init()
//this.animate()
const preloader = new Preloader(options)

/**
 * init main constructor
 */
window.onload = function(e){ 
	//init()
}
window.garden = this
window.onError = function(error){
	console.error(JSON.stringify(error))
}


document.getElementById("camera-btn").onclick = function(){ switchCamera() }
document.getElementById("briefcase-btn").onclick = function(){ toggleBriefcase() }
document.getElementById("action-btn").onclick = function(){ contextAction() }
document.getElementById("sfx-btn").onclick = function(){ toggleSound() }

let actionBtn = document.getElementById("action-btn")



const loaderFBX = new THREE.FBXLoader()
const loaderGLTF = new THREE.GLTFLoader()
const loaderOBJ = new THREE.OBJLoader()
const loaderTexture = new THREE.TextureLoader()

const clock = new THREE.Clock()

/** POINTER HOVERS + CLICKS */
const raycaster = new THREE.Raycaster()
const pointer = new THREE.Vector2()

/** REST API URLS */
const API_URL_SCENES = `${restURL}scene/?_embed&per_page=100`
const API_URL_ALLOTMENTS = `${restURL}allotment/?_embed&per_page=100`
const API_URL_BEDS = `${restURL}bed/?_embed&per_page=100`
const API_URL_PLANTING_PLANS = `${restURL}planting_plan/?_embed&per_page=100`
const API_URL_PLANTS = `${restURL}plant/?_embed&per_page=100`

let api_urls = [
	API_URL_SCENES,
	API_URL_ALLOTMENTS,
	API_URL_BEDS,
	API_URL_PLANTING_PLANS,
	API_URL_PLANTS
]

/** 
 * BEGIN MAIN
 * *************************************************************************************** */
function init() {

	Promise.allSettled(
		api_urls.map(
			url => fetch(url)
					.then(results => results.json())
					.then(data => {
						let type = data[0].type
						switch (type) {
							case "scene" :
								params.data.scene = [...data]
								break
							case "allotment" :
								params.data.allotment = [...data]
								break
							case "bed" :
								params.data.bed = [...data]
								break
							case "plant" :
								params.data.plant = [...data]
								break
							case "planting_plan" :
								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("params.data------")
			console.log(params.data)
			console.log("-----------------")
			/**
			 * init scene constructor
			 */
			buildScene()
		}
	)

	//throwError()
}

/** 
 * BUILD SCENE
 * *************************************************************************************** */
function buildScene() {

	// console.log("-----------------------")
	// console.log("params.data.scene------")
	// console.log(params.data.scene)
	// console.log(params.data.scene.length)
	// console.log("-----------------------")

	let wpScene = params.data.scene[0]
	sceneID = wpScene.id

	// console.log("-----------------------")
	// console.log("wpScene----------------")
	// console.log(wpScene)
	// console.log("-----------------------")

	/** THREE JS SCENE ******************************************************************* */

	scene = new THREE.Scene()
	
	scene.name = "ThreeD Garden"

	// 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
		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 = loaderTexture.load(
			wpScene.acf.scene_background_image,
			() => {
				const rt = new THREE.WebGLCubeRenderTarget(bgTexture.image.height)
				rt.fromEquirectangularTexture(renderer, bgTexture)
				scene.background = rt
			}
		)
	}
	// load the background color?
	else if ( wpScene.acf.scene_background_color ) {
		scene.background = new THREE.Color(wpScene.acf.scene_background_color)
		//scene.fog = new THREE.Fog(0xFFFFFF, 0, 500)
	}

	/** GEOMETRIES *********************************************************************** */
	
	let plane = getPlane(
		wpScene.acf.scene_plane_width_x, 
		wpScene.acf.scene_plane_length_y, 
		wpScene.acf.scene_plane_background_color
	)
	plane.name = "plane-jane"
	plane.rotation.x = -Math.PI / 2 // -90 degrees in radians
	//plane.position.z = 10
	//plane.rotation.z += 0.002
	guiFolderRotation.add(plane.rotation, "x", -Math.PI, Math.PI).listen()
	guiFolderRotation.add(plane.rotation, "y", -Math.PI, Math.PI).listen()
	guiFolderRotation.add(plane.rotation, "z", -Math.PI, Math.PI).listen()

	/** TEXTURES ************************************************************************* */

	if ( wpScene.acf.scene_plane_texture_image ) {
		plane.material.roughness = 0.0
		//plane.material.map = loaderTexture.load("/wp-content/plugins/threed-garden/admin/media/textures/grasslight-big.jpg")
		plane.material.map = 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 = plane.material.map
		planeTextureMap.wrapS = THREE.RepeatWrapping
		planeTextureMap.wrapT = THREE.RepeatWrapping
		planeTextureMap.repeat.set(4, 4)
	}

	/** LIGHTS *************************************************************************** */

	// let pointLight = getPointLight(0xFFFFFF, 4.0)
	// pointLight.position.set( -20, -60, 20 )
	// //pointLight.intensity = 3.0

	// let spotLight = getSpotLight(0xFFFFFF, 4.0)
	// spotLight.position.set( -20, -60, 20 )
	// //spotLight.intensity = 3.0

	let directionalLight = 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 = 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 = getAmbientLight(0xFFFFFF, 0.1)
	//ambientLight.position.set( -100, -100, 25 )
	
	guiFolderLights.add(helperDirectionalLight, "visible", 0, 20).name("Show Light Helper")
	guiFolderLights.add(directionalLight, "intensity", 0, 20)
	guiFolderLights.add(directionalLight.position, "x", -500, 500)
	guiFolderLights.add(directionalLight.position, "y", -500, 500)
	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
	//plane.add(structure)
	//plane.add(pointLight)
	//plane.add(spotLight)
	plane.add(directionalLight)
	//plane.add(directionalLight2)
	//plane.add(ambientLight)
	scene.add(helperDirectionalLight)
	//scene.add(helperDirectionalLight2)
	scene.add(plane)

	/** CAMERA **************************************************************************** */

	camera = new THREE.PerspectiveCamera(
		55,
		window.innerWidth/window.innerHeight,
		0.1,
		1000
	)
	camera.name = "gardencam1"
	camera.position.set(86, 64, 182)
	//camera.lookAt(new THREE.Vector3(0, 0, 0)) // overridden by OrbitControls.target

	let helperCamera = new THREE.CameraHelper(camera)
	helperCamera.visible = false
	scene.add(helperCamera)

	guiFolderCameras.add(helperCamera, "visible", 0, 20).name("Show Camera Helper")
	guiFolderCameras.add(camera.position, "x", -500, 500).listen()
	guiFolderCameras.add(camera.position, "y", -500, 500).listen()
	guiFolderCameras.add(camera.position, "z", -500, 500).listen()

	/** RENDERER ************************************************************************** */
	
	renderer = new THREE.WebGLRenderer(
		{ 	alpha: true, 
			antialias: true 
		}
	)
	renderer.shadowMap.enabled = true
	renderer.setSize(window.innerWidth - 240, window.innerHeight - 100)

	// utilize javascript prototyping.. add variables to the dom element :)
	renderer.domElement.camera = camera
	renderer.domElement.targetList = plane.children
	
	renderer.domElement.addEventListener("pointermove", onPointerMove, false)
	renderer.domElement.addEventListener("pointerdown", onPointerDown, false)
	
	/** CONTROLS *************************************************************************** */
		controls = new THREE.OrbitControls(camera, renderer.domElement)
		controls.enableDamping = true
		controls.dampingFactor = 0.25
		controls.enableZoom = true
		controls.rotateSpeed = 0.5
		controls.autoRotate = false
		controls.autoRotateSpeed = 0.03
		controls.minDistance = 0.01
		controls.maxDistance = 340
		controls.maxPolarAngle = Math.PI/2 - .04
		controls.target = new THREE.Vector3(0, 0, 0) // where the camera actually points
		//controls.target.set(0, 5, 0) // alternate way of setting target of camera

		renderer.domElement.controls = controls

	/** WEBGL CANVAS *********************************************************************** */

	container = document.querySelector("#webgl")
	container.append(gui.domElement)
	container.append(renderer.domElement)
	canvas = renderer.domElement
	
	/** BUILD ALLOTMENTS ******************************************************************* */

	buildAllotments(
		params.data.allotment, 
		plane, 
		sceneID // the post-to-post relationship <3
	)

	/** FBX ******************************************************************************** */
	
	//loaderFBX.load( `${params.assetsPath}characters/SimplePeople.fbx`, function (object) {
	//loaderFBX.load( `${params.assetsPath}fbx/people/FireFighter.fbx`, function (object) {
	//loaderFBX.load( `${params.assetsPath}fbx/people/Trucker.fbx`, function (object) {
	loaderFBX.load( `${params.assetsPath}characters/SK_Chr_Farmer_Male_01.fbx`, function (object) {

		object.mixer = new THREE.AnimationMixer( object )
		player.mixer = object.mixer
		player.root = object.mixer.getRoot()
			
		object.name = "Gardener"
				
		object.traverse( function ( child ) {
			if ( child.isMesh ) {
				child.castShadow = true
				child.receiveShadow = false		
			}
		} )

		//loaderTexture.load(`${params.assetsPath}images/SimpleFarmer_Farmer_Brown.png`, function(texture) {
		loaderTexture.load(`${params.assetsPath}textures/PolygonFarm_Texture_01_B.png`, function(texture) {
			object.traverse( function ( child ) {
				if ( child.isMesh ){
					child.material.map = texture
				}
			} )
		})

		// console.log("-----------------------")
		// console.log("object----------------")
		// console.log(object)
		// console.log("-----------------------")

		player.object = new THREE.Object3D()
		player.object.add(object)
		//player.object.scale.set(0.022, 0.022, 0.022)
		player.object.scale.set(0.033, 0.033, 0.033)
		player.object.rotation.x = Math.PI/2 // 90 degrees in radians
		//player.mixer.clipAction(object.animations[0]).play()
		//animations.Idle = object.animations[0]
		//setAction("Idle")

		plane.add(player.object)
		guiFolderPlayer.add(player.object, "visible").name("Show Character").listen()

		// console.log("-----------------------")
		// console.log("player.object----------------")
		// console.log(player.object)
		// console.log("-----------------------")

		loadNextAnim(loaderFBX)

	} )


	loadFarmHouse(plane)
	loadChickenCoop(plane)
	//loadHen(plane)
	loadChicken(plane)
	//loadHenGLTF(plane)
	//loadRooster(plane)
	//loadChickenGLTF(plane)
	//loadChickGLTF(plane)
	//loadKitchenSink(plane)
	//loadChickenFree(plane)
	loadRoad(plane)
		

	//createCameras()

	let joystick = new JoyStick({
		onMove: playerControl,
		game: container
	})

	/** ANIMATE + RENDER (continuous rendering) ******************************************** */
	
	let animate = function () {

		const dt = clock.getDelta()
		watchPointer(camera, plane.children)
		controls.update()
		TWEEN.update()

		requestAnimationFrame(animate)

		if ( params.ANIMATE ) {
			// plane.rotation.x += 0.002
			// plane.rotation.y += 0.002
			plane.rotation.z -= 0.0007
		}

		/** PLAYER CHARACTER */
		if ( player.mixer !== undefined ) {
			player.mixer.update(dt)
		}
		
        if ( player.action == "Walking" ) {
			const elapsedTime = Date.now() - player.actionTime
			if ( elapsedTime > 2000 && player.move.forward > 0.7 ){
				setAction("Running")
			}
		}
		
		if ( player.move !== undefined ) {
			movePlayer(dt)
		}
		
		if ( player.cameras != undefined && player.cameras.active != undefined ) {
			camera.position.lerp( player.cameras.active.getWorldPosition(new THREE.Vector3()), 0.05 )
			const pos = player.object.position.clone()
			pos.y += 200
			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
        }
		
		renderer.render(scene, camera)
	}

	animate()

	
	let loadNextAnim = function (loader) {
		let anim = anims.pop()
		// console.log("-----------------------")
		// console.log("anim-------------------")
		// console.log(anim)
		// console.log("-----------------------")
		loader.load( `${params.assetsPath}fbx/anims2/${anim}.fbx`, function(object) {
			// console.log("-----------------------")
			// console.log("object-----------------")
			// console.log(object)
			// console.log("-----------------------")
			animations[anim] = object.animations[0]
			if (anims.length > 0){
				// console.log("-----------------------")
				// console.log("anims.length-----------")
				// console.log(anims.length)
				// console.log("-----------------------")
				// console.log("-----------------------")
				// console.log("getAction()-----------")
				// console.log(getAction())
				// console.log("-----------------------")
				// console.log("player.action----------")
				// console.log(player.action)
				// console.log("-----------------------")
				loadNextAnim(loader)
			} 
			else {
				// console.log("-----------------------")
				// console.log("anims.length = 0-------")
				// console.log(anims.length)
				// console.log("-----------------------")
				anims = []
				setAction("Idle")
				animate()
			}
		})	
	}
	
	//return scene
}

function setAction(name) {
	const action = player.mixer.clipAction( animations[name] )
	action.time = 0
	console.log("-----------------------")
	console.log("animations-----------------")
	console.log(animations)
	console.log("-----------------------")
	player.mixer.stopAllAction()
	player.action = name
	player.actionTime = Date.now()
	// console.log("-----------------------")
	// console.log("player-----------------")
	// console.log(player)
	// console.log("-----------------------")
	
	action.fadeIn(0.5)	
	action.play()
}

function getAction() {
	if (player === undefined || player.action === undefined) {
		return "doesn't exist yet"
	}
	return player.action
}

function toggleAnimation() {
	if ( player.action == "Idle" ) {
		setAction("Pointing Gesture")
	}
	else {
		setAction("Idle")
	}
}

function movePlayer1(dt) {	
	// console.log("-------------------------")
	// console.log("player.move.forward------")
	// console.log(player.move.forward)
	// console.log("-------------------------")
	if ( player.move.forward > 0 ) {
		const speed = ( player.action == "Running" ) ? 24 : 8
		player.object.translateZ( dt * speed )
	}
	else if ( player.move.forward < 0 ) {
		player.object.translateZ( -dt * 2)
	}
	player.object.rotateY( player.move.turn * dt )
}

function movePlayer(dt){
	const pos = player.object.position.clone()
	pos.y += 60
	let dir = new THREE.Vector3()
	player.object.getWorldDirection(dir)
	if (player.move.forward<0) dir.negate()
	let raycaster = new THREE.Raycaster(pos, dir)
	let blocked = false
	const colliders = params.colliders

	// if (colliders!==undefined){ 
	// 	const intersect = raycaster.intersectObjects(colliders)
	// 	if (intersect.length>0){
	// 		if (intersect[0].distance<50) blocked = true
	// 	}
	// }
	
	if (!blocked){
		if (player.move.forward>0){
			const speed = (player.action=="Running") ? 24 : 8
			player.object.translateZ(dt*speed)
		}
		else if ( player.move.forward < 0 ) {
			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) 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) 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 > player.object.position.y){
				//Going up
				player.object.position.y = 0.8 * player.object.position.y + 0.2 * targetY
				player.velocityY = 0
			}else if (targetY < player.object.position.y){
				//Falling
				if (player.velocityY==undefined) player.velocityY = 0
				player.velocityY += dt * gravity
				player.object.position.y -= player.velocityY
				if (player.object.position.y < targetY){
					player.velocityY = 0
					player.object.position.y = targetY
				}
			}
		}else if (player.object.position.y>0){
			if (player.velocityY==undefined) player.velocityY = 0
			player.velocityY += dt * gravity
			player.object.position.y -= player.velocityY
			if (player.object.position.y < 0){
				player.velocityY = 0
				player.object.position.y = 0
			}
		}
	}
	*/
	
	player.object.rotateY(player.move.turn*dt)
}


function playerControl(forward, turn) {
	
	turn = -turn

	if ( forward > 0.2 ) {
        if ( player.action != "Walking" && player.action != "Running" ) {
			setAction("Walking")
		}
	} 
	else if ( forward < -0.2 ) {
        if ( player.action != "Walking Backwards" ) {
			setAction("Walking Backwards")
		}
	} 
	else {
        forward = 0
        if ( Math.abs(turn) > 0.05 ) {
            if ( player.action != "Left Turn" ) {
				setAction("Left Turn")
			}
		} 
		else if ( player.action != "Idle" ) {
            setAction("Idle")
		}
		// else {
		// 	setAction("Idle")
		// }
    }

    // if ( forward == 0 && turn == 0 ) {
    //     player.move = {}
	// } 
	// else {
        player.move = { forward, turn }
    // }
}

function createCameras() {
	const offset = new THREE.Vector3(0, 80, 0)
	const front = new THREE.Object3D()
	front.position.set(112, 100, 600)
	front.parent = player.object
	const back = new THREE.Object3D()
	back.position.set(0, 300, -600)
	back.parent = player.object
	const wide = new THREE.Object3D()
	wide.position.set(178, 139, 1665)
	wide.parent = player.object
	const overhead = new THREE.Object3D()
	overhead.position.set(0, 400, 0)
	overhead.parent = player.object
	const collect = new THREE.Object3D()
	collect.position.set(40, 82, 94)
	collect.parent = player.object
	player.cameras = { front, back, wide, overhead, collect }
	setActiveCamera(player.cameras.back)
}

function setActiveCamera(object) {
	player.cameras.active = object
}


function loadEnvironment(loader) {
	loader.load(`${params.assetsPath}fbx/town.fbx`, function(object){
		params.environment = object
		params.colliders = []
		object.scale.set(0.025, 0.025, 0.025)
		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
				}
			}
		} )
		
		loadNextAnim(loader)
	})
}

function loadFarmHouse(plane) {
	//loaderFBX.load(`${params.assetsPath}fbx/SM_Bld_Farmhouse_01.fbx`, function(object){
	loaderFBX.load(`${params.assetsPath}fbx/Building_Farm_House_02.fbx`, function(object){
	//loaderFBX.load(`${params.assetsPath}fbx/Building_Barn_Big_03.fbx`, function(object){
		params.farmhouse = object
		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)
		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/SimpleFarm.png`, function(texture) {
			object.traverse( function ( child ) {
				if ( child.isMesh ){
					child.material.map = texture
				}
			} )
		})
		
		//loadNextAnim(loader)
	})
}

function loadFarmHouseGLTF(plane) {
	
	// 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()

	} )
}

function loadChickenCoop(plane) {
	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)
	})
}

function loadChicken(plane) {
	
	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()

	} )
}

function loadChicken0(plane) {
	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)
	})
}

function loadChicken1(plane) {
	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)
	})
}

function loadChicken2(plane) {
	loaderFBX.load(`${params.assetsPath}fbx/SA_Animal_Pig.fbx`, function(object) {
	//loaderFBX.load( `${params.assetsPath}fbx/people/Trucker.fbx`, function (object) {
	//loaderFBX.load( `${params.assetsPath}characters/SK_Chr_Farmer_Male_01.fbx`, function (object) {

		console.log("-----------------------")
		console.log("object----------------")
		console.log(object)
		console.log("-----------------------")

		// object.mixer = new THREE.AnimationMixer( object )
		// mixers.push( object.mixer )
		// var action = object.mixer.clipAction( object.animations[ 0 ] )
		// action.play()
		// scene.add( object )

/*
		object.mixer = new THREE.AnimationMixer( object )
		mixers.push( object.mixer )
		var action = object.mixer.clipAction( object.animations[ 0 ] )
		action.play()

		object.name = "Chicken"
				
		object.traverse( function ( child ) {
			if ( child.isMesh ) {
				child.castShadow = true
				child.receiveShadow = false		
			}
		} )


		loaderTexture.load(`${params.assetsPath}textures/SimpleAnimalsFarm.png`, function(texture) {
		//loaderTexture.load(`${params.assetsPath}images/SimpleScarecrow.png`, function(texture) {
		//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
				}
			} )
		})

		plane.add( object )
		
		console.log("-----------------------")
		console.log("object----------------")
		console.log(object)
		console.log("-----------------------")
*/		
		/*
		player.mixer = object.mixer
		player.root = object.mixer.getRoot()
			
		object.name = "Chicken"
				
		object.traverse( function ( child ) {
			if ( child.isMesh ) {
				child.castShadow = true
				child.receiveShadow = false		
			}
		} )


		loaderTexture.load(`${params.assetsPath}textures/SimpleAnimalsFarm.png`, function(texture) {
		//loaderTexture.load(`${params.assetsPath}images/SimpleScarecrow.png`, function(texture) {
		//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("-----------------------")

		player.object = new THREE.Object3D()
		player.object.add(object)
		player.object.scale.set(0.022, 0.022, 0.022)
		player.object.rotation.x = Math.PI/2 // 90 degrees in radians
		player.mixer.clipAction(object.animations[0]).play()
		animations.Idle = object.animations[0]
		//setAction("Idle")
		scene.add(player.object)
		guiFolderPlayer.add(player.object, "visible").name("Show Chicken").listen()

		console.log("-----------------------")
		console.log("player.object----------------")
		console.log(player.object)
		console.log("-----------------------")


		//animate()
		// OR
		loadNextAnim(loaderFBX)
		// OR
		//loadEnvironment(loaderFBX)
		*/
	} )
}

function loadChickenGLTF(plane) {
	
	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)

	} )
}

function loadChickGLTF(plane) {
	
	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()

	} )
}

function loadHen(plane) {
	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)
	})
}

function loadHenGLTF(plane) {
	
	// 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()

	} )
}

function loadKitchenSink(plane) {
	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)
	})
}

function loadChickenFree(plane) {
	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)
	})
}

function loadRooster(plane) {
	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)
	})
}

function loadRoad(plane) {

	let i
	let count = 8
	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 ************************************************************
 */
function buildAllotments(postObject, plane, sceneID) {

	// 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 = 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 = 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 = 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 = 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, "depth", 0, allotment.parameters.z)
		
		// console.log("-------------------------")
		// console.log("allotment----------------")
		// console.log(structure)
		// console.log("-------