Hello all
I am new to three.js ,and i am trying to learn it by doing my own project.
I am having problem with changing the geometry of my model. Which is not loaded in “main.js”, but from another js file called “player.js”. And “rotation.set” is not working for me. Hope someone could help me!
Here is my “player.js”:
class Player extends THREE.Object3D {
constructor(sce) {
super();
const loader = new THREE.GLTFLoader();
loader.load('./asset/Abel.glb',(abel)=>{
abel.scene.position.y = -1;
abel.scene.scale.set(1,1,1);
sce.add(abel.scene);
} );
}
}```
And here is the lines I trying to rotate this model in "main.js":
this.player = new Player(this.scene2);
//******not working */
this.player.position.set(0,0,0);```
Looking for your help! Thank you!
Ops, the code I post is “position.set”. But anyway, both “position.set” and “rotation.set” are not working
Please define in more detail what you mean with “does not work”.
Do you see any runtime errors in the browser console?
Thanks for replying.
There is no Error in browser console… It just not changing the position of object when I do “this.player.position.set(0,2,3)” in main.js, but the position do change when I do “abel.scene.position.y = -1” in player.js. Here is all codes from my main.js file:
class Game {
constructor() {
//renderer setting
this.renderer = new THREE.WebGLRenderer();
this.renderer.setPixelRatio( window.devicePixelRatio*0.2)
this.renderer.setSize(window.innerWidth, window.innerHeight);
//camera setting
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
document.body.appendChild(this.renderer.domElement);
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
//scene1 for environment
this.scene1 = new THREE.Scene();
this.scene1.background = new THREE.Color(0xa8def0);
//scene2 for player
this.scene2 = new THREE.Scene();
this.player = new Player(this.scene2);
//******not working */
this.player.position.set(0,2,3);
const light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 100, 20);
const ambient = new THREE.AmbientLight(0xfff777);
// Dat Gui****
const gui = new dat.GUI();
gui.add(this.player.rotation, 'y', 0, Math.PI).name('Rotate');
this.scene2.add(light);
this.scene2.add(ambient);
this.camera.position.z = 4;
this.animate();
}
animate() {
const game = this;
requestAnimationFrame(function(){game.animate()});
this.renderer.autoClear = true;
this.renderer.render(this.scene1, this.camera);
this.renderer.autoClear = false;
this.renderer.render(this.scene2, this.camera);
}
}
Try adding this.player
to the scene. Not just the model itself (meaning abel.scene
).
Thank you for your advice, but I tried it and still not working
here is the part I edit in main.js:
this.player = new Player(this.scene2);
this.scene2.add(this.player);
//******not working */
this.player.position.set(0,2,3);