I've run into some issues while trying to implement OOP in my Three.js project. The original script displays three y-rotational planes, but it seems like some objects I've created aren't being called when I check the console. Can someone please help me identify where I may have gone wrong?
I've been troubleshooting using the console log on my live server, and it seems like the problem might be related to the classes card or mesh. However, every time I make adjustments, more errors seem to pop up.
So far, here's what I have:
var renderer, scene, camera;
var speed = 0.03; // speed for rotation
class Plane {
constructor(geometryFront) {
this.geometryFront = new THREE.PlaneGeometry(90, 110, 1, 1);
}
applyMatrix() {
this.geometryFront.applyMatrix(
new THREE.Matrix4().makeRotationY(Math.PI)
);
}
}
class Material {
constructor(material, imgMaterial) {
this.material = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(imgMaterial),
});
}
}
class Card {
constructor(addCard, xCard, yCard, zCard) {
this.addCard = new THREE.Object3D();
scene.add(this.addCard);
this.addCard.position.set(xCard, yCard, zCard);
this.addCard.rotation.y += speed;
}
cardMesh(addMesh) {
this.addCard.add(addMesh);
}
}
class Mesh {
constructor(addMesh, geometry, material, linkCard) {
this.addMesh = new THREE.Mesh(this.geometry, this.material);
linkCard.cardMesh(this.addMesh);
}
}
preSet();
cardAssets();
animate();
function preSet() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
// setting background
const loaderBG = new THREE.TextureLoader();
const bgTexture = loaderBG.load("temp-bg.jpeg");
scene.background = bgTexture;
// camera
camera = new THREE.PerspectiveCamera(
40,
window.innerWidth / window.innerHeight,
1,
10000
);
camera.position.z = 300;
camera.lookAt(scene.position);
}
function cardAssets() {
var geometryA = new Plane(geometryA);
var geometryB = new Plane(geometryB);
geometryB.applyMatrix();
var materialA = new Material(materialA, "a-crime-to-design.jpg");
var materialB = new Material(materialB, "bg-crime.jpg");
var cardA = new Card(cardA, -120, 0, 0);
var cardB = new Card(cardB, -120, 0, 0);
var meshA = new Mesh(meshA, geometryA, materialA, cardA);
var meshB = new Mesh(meshB, geometryB, materialB, cardB);
} // end cardAssets
function animate() {
requestAnimationFrame(animate); //asking animation frames
renderer.render(scene, camera); //rendering
}
Other than a missing favicon, the console isn't showing any errors.