Currently, I am in the process of restructuring a JavaScript file that utilizes the THREE.js library to create a truck visualization based on input parameters from a form. Although the code was functioning properly, I aim to enhance it with additional visualizations, hence my decision to clean it up beforehand. To accomplish this, I constructed an object within the scene.js file as shown below:
import * as THREE from "three";
import jQuery from 'jquery';
window.$ = jQuery;
const sceneObject = {
renderer: new THREE.WebGLRenderer(),
backgroundColor: new THREE.Color(255, 255, 255),
scene: {},
camera: {},
center: {
x: 100,
y: -200,
z: -500
},
cameraRadius: 770,
angle1: 3*Math.PI/4,
angle2: 0,
prepare: function(width, height,divId = 'placeForRenderer'){
this.prepareScene();
this.prepareCamera();
},
prepareScene: function(width, height, divId){
this.scene = new THREE.Scene();
this.scene.background = this.backgroundColor;
this.renderer.setSize(width, height);
$('#'+divId).append(this.renderer.domElement);
},
prepareCamera: function(){
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 2000);
this.camera.position.set(this.center.x + this.cameraRadius * Math.cos(this.angle1), this.center.y + this.cameraRadius * Math.sin(this.angle2), this.center.z + this.cameraRadius * Math.sin(this.angle1));
this.camera.lookAt(this.center.x, this.center.y, this.center.z);
},
addObject: function(object){
if(typeof(this.objectsArray) == 'undefined') {
this.objectsArray = [];
}
this.objectsArray.push(object);
console.log(this.objectsArray);
},
show: function(){
console.log(this.objectsArray);
this.objectsArray.forEach((object) => {
object.addToScene(this.scene);
});
this.renderer.render(this.scene, this.camera);
}
};
export default sceneObject;
In another file named all.js, I invoke the function that readies the scene, add an object (which will eventually be kept in separate files — currently only one is added for testing purposes), and finally call the rendering function. This calling sequence serves primarily for testing purposes but also aligns with regular practice when modifying drawing parameters:
import sceneObject from './scene'
import * as THREE from "three";
sceneObject.prepare(500, 300);
sceneObject.addObject({
addToScene: function(scene){
const geometry = new THREE.BoxGeometry(200, 200, 200);
const mesh = new THREE.Mesh(
geometry,
new THREE.MeshBasicMaterial({transparent: true, opacity: 0.0})
);
const borders_geo = new THREE.EdgesGeometry(geometry);
const color = new THREE.Color(0xEB7F46);
const mat = new THREE.LineBasicMaterial({color: color});
let borders = new THREE.LineSegments(borders_geo, mat);
borders.renderOrder = 1;
mesh.add(borders)
scene.add(mesh);
mesh.position.set(100, -200, -500);
}
});
sceneObject.show();
export default sceneObject;
Lastly, there is the admin.js file which is included in the appropriate HTML document. Here are the lines of code found in it:
import jQuery from 'jquery';
import scene from './functions/common/all.js';
window.$ = jQuery;
$(document).ready(()=>{
$("#car-length-input").on('change', scene.show);
$("#car-width-input").on('change', scene.show);
$("#car-height-input").on('change', scene.show);
$("#car-dmc-input").on('change', scene.show);
})
The issue I encountered involves calling the show function in admin.js, resulting in the objects array within the scene becoming undefined: https://i.sstatic.net/XImHJG9c.png I have combed through various resources online in search of a solution, however, so far, none have proven fruitful.
I attempted placing objectsArray both inside the function (as currently done) and at the top of the object as a parameter. I also inserted console.log statements at different points in the code to monitor varying values in distinct files. Ultimately, my objective is to utilize the addObject function to include specific objects in the scene and present them using the show function across different files.