CODEWITHSUNDEEP
javascriptthree.js
ManonTheresa
ManonTheresa

Reputation: 25

Image Texture on Plane is not loading/working Three.JS

I have a question. I've been trying all day to load an texture to my plane. Everytime I add the link I want to add it doesn't work or poof my plane is gone again. Please help me with Three.JS, so I can avoid this error; Error code

Here's my full code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script src="THREE/build/three.js"></script>
    <script>
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        40,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      const geometry = new THREE.PlaneGeometry(10, 12, 32); // width, height, depth
      var texture = new THREE.TextureLoader().load(
        "https://threejs.org/examples/textures/uv_grid_opengl.jpg", color = 0xeba6fb,
      );

      const material = new THREE.MeshBasicMaterial({
        color: 0xeba6f5,
        side: THREE.DoubleSide,
      });
      const plane = new THREE.Mesh(geometry, material, texture);
      scene.add(plane);

      camera.position.z = 40;

      const animate = function () {
        requestAnimationFrame(animate);

        // plane.rotation.x += 0.005;
        plane.rotation.y += 0.005;
        //plane.rotation.z += 0.005;

        renderer.render(scene, camera);
      };

      animate();
    </script>
  </body>
</html>

Upvotes: 1

Views: 1134

Answers (1)

prisoner849
prisoner849

Reputation: 17586

I've fixed your code, see the comments:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  40,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(10, 12); // width, height, no depth for plane
var texture = new THREE.TextureLoader().load(
  "https://threejs.org/examples/textures/uv_grid_opengl.jpg"
); // remove color = ...

const material = new THREE.MeshBasicMaterial({
  color: 0xeba6f5,
  side: THREE.DoubleSide,
  map: texture // texture as a map for material
});
const plane = new THREE.Mesh(geometry, material); // mesh takes just two parameters
scene.add(plane);

camera.position.z = 40;

const animate = function() {
  requestAnimationFrame(animate);

  plane.rotation.y += 0.005;

  renderer.render(scene, camera);
};

animate();
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

Upvotes: 4

Related Questions