CODEWITHSUNDEEP
javascript
BellVirtual
BellVirtual

Reputation: 66

Cant load textures in threejs on plane

Any time i try loading textures with the following code i get no errors and a black screen

here is the javascript the file name is 3d_stuff.js

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, 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( 16, 16);

const texture = new THREE.TextureLoader().load( '/vaporwater.jpg' );
const material = new THREE.MeshBasicMaterial( { map: texture} );
//const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );

camera.position.z = 3   ;
camera.position.y = -1
camera.rotation.x = -30

function animate() {
    renderer.render( scene, camera );
};

animate();

here is the index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="three.js"></script>
        <script src="3d_stuff.js"></script>

    </body>
</html>

Does anyone know what might have gone wrong

Im running the server on ubuntu using the python3 -m http.server command by the way

Upvotes: 0

Views: 137

Answers (1)

seriously
seriously

Reputation: 1377

Actually, try this first :

Note: the js script import is type module

import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';

let camera, scene, renderer;
let geometry, material;

init();

function init() {
  camera = new THREE.PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    0.01,
    10
  );
  camera.position.z = 1;

  scene = new THREE.Scene();

  //get texture add path to image
  const textureLoader = new THREE.TextureLoader();
  const texture = textureLoader.load('https://picsum.photos/200/300');
  texture.encoding = THREE.sRGBEncoding;

  const geometry = new THREE.PlaneGeometry(1, 1);
  const material = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.DoubleSide
  });
  const plane = new THREE.Mesh(geometry, material);
  scene.add(plane);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setAnimationLoop(animation);
  document.body.appendChild(renderer.domElement);
}

function animation(time) {
  renderer.render(scene, camera);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>My first three.js app</title>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <!--note that the script tag is of type module-->
  <script src="./3d_stuff.js" type="module">
  </script>
</body>

</html>

Upvotes: 1

Related Questions