I have some problem with my code. I'm using three.js and trying to initialize the components. Objects that are initialized do not display on the screen like axis, cube. Please indicate where the error may be.
function gameInit(axlesHelper) {
(axlesHelper) ? gameComponent.setAxlesHelper() : null ;
gameComponent.setAambientLight();
gameComponent.setDirectionalLight();
gameComponent.setCameraPosition();
gameComponent.renderer();
}
var gameComponent = {
scene : new THREE.Scene(),
axesHelper : new THREE.AxesHelper( 10 ),
ambientLight : new THREE.AmbientLight(0xffffff, 0,6),
directionalLight : new THREE.DirectionalLight(0xffffff, 1),
aspect : window.innerWidth / window.innerHeight,
width : 10,
height : this.width / this.aspect,
camera : new THREE.OrthographicCamera(
this.width * -2, // left
this.width * 2, // right
this.height * 2, // top
this.height * -2, // bottom
0, // near plane
10000 // far plane
),
render : new THREE.WebGLRenderer({antialias : true}),
setAxlesHelper : function() {
console.log('wywołano axlesHelper');
this.scene.add( this.axesHelper );
},
.
.
.
renderer : function(){
console.log('wywołano renderer');
this.render.setSize(window.innerWidth, window.innerHeight);
this.render.render(this.scene, this.camera);
document.body.appendChild(this.render.domElement);
},
rendererUpdate : function(){
console.log('wywołano renderer update');
this.render.render(this.scene, this.camera);
}
}
gameInit(true);
height : this.width / this.aspect,
camera : new THREE.OrthographicCamera(
this.width * -2, // left
this.width * 2, // right
this.height * 2, // top
this.height * -2, // bottom
0, // near plane
10000 // far plane
),
This code is not valid. Accessing properties via this results in undefined. Hence, you camera holds NaN values which breaks the rendering. Try it like so:
function gameInit(axlesHelper) {
(axlesHelper) ? gameComponent.setAxlesHelper(): null;
gameComponent.renderer();
}
const width = 10;
const height = width / ( window.innerWidth / window.innerHeight );
var gameComponent = {
scene: new THREE.Scene(),
axesHelper: new THREE.AxesHelper(10),
ambientLight: new THREE.AmbientLight(0xffffff, 0, 6),
directionalLight: new THREE.DirectionalLight(0xffffff, 1),
camera: new THREE.OrthographicCamera(
width * -2, // left
width * 2, // right
height * 2, // top
height * -2, // bottom
0, // near plane
10000 // far plane
),
render: new THREE.WebGLRenderer({
antialias: true
}),
setAxlesHelper: function() {
this.scene.add(this.axesHelper);
},
renderer: function() {
this.render.setSize(window.innerWidth, window.innerHeight);
this.render.render(this.scene, this.camera);
document.body.appendChild(this.render.domElement);
},
rendererUpdate: function() {
console.log('wywołano renderer update');
this.render.render(this.scene, this.camera);
}
}
gameInit(true);
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.136.0/build/three.min.js"></script>