CODEWITHSUNDEEP
javascriptoopthree.js
ManonTheresa
ManonTheresa

Reputation: 25

OOP Three.JS not working, some elements aren't called in console

I am having difficulty with making my Three.js OOP. The original script works and shows three y-rotational planes. When I check in my console it seems to appear that some objects aren't called even though I created them. Please tell me what I'm doing wrong.

I have been trying to figure out the issue with the console log of my live server and I think the problem is in the classes card or mesh, but when I adjust something it gives me more errors.

For so far I have made this:

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) {
            //console.log("hi, i am working");
            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();

        // bg moet onder scene
        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
        }

The console doesn't give any errors, except for a missing favicon.

Upvotes: 0

Views: 338

Answers (1)

Brakebein
Brakebein

Reputation: 2237

There are some mistake when calling new THREE.Mesh(...). First, in your Mesh class, this.geometry and this.material is nowhere defined. In this code, you are calling new THREE.Mesh with both undefined.

var meshA = new Mesh(meshA, geometryA, materialA, cardA);

class Mesh {
  constructor(addMesh, geometry, material, linkCard) {
    this.addMesh = new THREE.Mesh(this.geometry, this.material);
    linkCard.cardMesh(this.addMesh);
  }
}

Second, with geometryA and materialA, you are passing instances of your custom Plane and Material classes to the constructor. Calling the THREE.Mesh constructor with these instances will fail, because THREE.Mesh accepts only TRHEE.BufferGeometry and THREE.Material. You would need to pass the according properties, in this case geometryFront and material:

new THREE.Mesh(geometry.geometryFront, material.material);

In general, I find your code very weird. I don't understand why you pass the variable into the constructor? The variable at this point is still undefined and it is nowhere used within the constructor method.

var meshA = new Mesh(meshA, ...

Upvotes: 2

Related Questions