So i found some code and implemented it to my own needs, i have also added Physics with cannon-es, but anything is posible.
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import * as CANNON from 'cannon-es'
class Floor{
constructor(game, world){
this.assetsPath = game.assetsPath;
//this.loadingBar = game.loadingBar;
this.game = game;
this.scene = game.scene;
this.init(world);
this.tmpPos = new THREE.Vector3();
}
/*
get position(){
if (this.plane!==undefined) this.plane.getWorldPosition(this.tmpPos);
return this.tmpPos;
}
set visible(mode){
this.plane.visible = mode;
}
*/
init(world){
const textureLoader = new THREE.TextureLoader()
const texturePlane = textureLoader.load(
'./AiCourse Models/Texturas/grass.jpg',
() =>
{
console.log('loading finished')
},
() =>
{
console.log('loading progressing')
},
() =>
{
console.log('loading error')
}
)
const geometry = new THREE.PlaneGeometry(1000,1000,400)
const material = new THREE.MeshBasicMaterial({map: texturePlane})
const floor = new THREE.Mesh( geometry, material )
floor.receiveShadow = true
floor.rotation.x = - Math.PI * 0.5
this.scene.add(floor)
const floorBody = new CANNON.Body()
const floorShape = new CANNON.Plane()
floorBody.mass = 0
floorBody.addShape(floorShape)
floorBody.quaternion.setFromAxisAngle(new CANNON.Vec3(- 1, 0, 0), Math.PI * 0.5)
world.addBody(floorBody)
}
update(time){
world.step(1 / 60, deltaTime, 3)
}
}
export { Floor };
This way i pass game data to any class/component i wish, i was attempting to do it in a similar way. Hope this helps someone