CODEWITHSUNDEEP
javascriptthree.js
Razort4x
Razort4x

Reputation: 3406

Three JS not rendering anything at all. It’s all a black screen

I’ve went through similar questions on this site, and I have seen all the things that are recommended. Like, camera positioning (not inside the mesh), calling the render function, setting the (ambient) light. Each and every thing I’ve found so far in the forum I’ve tried, but nothing is working.

Can anyone please look at this fiddle and guide me as to what I am doing wrong?

https://jsfiddle.net/4mxybs5h/1/

// HTML
  <main>
  <div id="threeContainer">
    hi
    <canvas #canvas id="canvas"></canvas>
  </div>
</main>

// JS
//this.animate(null);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
boxGeometry = new THREE.BoxGeometry(2, 2, 2);
material = new THREE.MeshBasicMaterial({color: 0xff0000});
mesh = new THREE.Mesh( boxGeometry, material );
  canva = document.getElementById("canvas");
     renderer = new THREE.WebGLRenderer({antialias: true, canvas: canva });

startScene();
animate();

function startScene() {

  //let scene = new THREE.Scene();
  //let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  
  let light = new THREE.AmbientLight( 0xffaaff ); 
 

    scene.add( mesh );
    light.position.set(10,10,10)
    scene.add( light );
    camera.position.set(500, 500, 500);
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    
    //this.renderer.setClearColor('#E5E5E5')
    renderer.setClearColor(0xEEEEEE);
    //this.renderer.setSize(window.innerWidth, window.innerHeight)
    //this.renderer.render(this.scene, this.camera)
    //this.renderer.setAnimationLoop(this.animate.bind(this))
    //document.body.appendChild(this.renderer.domElement)

    // window.addEventListener('resize', () => {
    //   this.renderer.setSize(window.innerWidth, window.innerHeight)
    //   this.camera.aspect = window.innerWidth / innerHeight
    //   this.camera.updateProjectionMatrix();
    // })
} 

function animate() {
 camera.aspect = window.innerWidth / innerHeight
    camera.updateProjectionMatrix();
    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    //this.mesh.rotation.y += 1;
    //document.body.appendChild(this.renderer.domElement)

    renderer.render(scene, camera);
}

I feel like it must be something small or obvious, but I am not able to be figure out. Any help is appreciated.

Upvotes: 0

Views: 848

Answers (1)

0stone0
0stone0

Reputation: 43972

You're not seeing anything because you're setting the camera way off.

Inside the startScene function, change the following:

// From
camera.position.set(500, 500, 500);

// TO
camera.position.set(0, 0, 5);

Applying the above gives:

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
boxGeometry = new THREE.BoxGeometry(2, 2, 2);
material = new THREE.MeshBasicMaterial({color: 0xff0000});
mesh = new THREE.Mesh( boxGeometry, material );
canva = document.getElementById("canvas");
renderer = new THREE.WebGLRenderer({antialias: true, canvas: canva });

startScene();
animate();

function startScene() {
    let light = new THREE.AmbientLight( 0xffaaff ); 

    scene.add( mesh );
    light.position.set(10,10,10)
    scene.add( light );
    camera.position.set(0, 0, 5);
    mesh.castShadow = true;
    mesh.receiveShadow = true;

    renderer.setClearColor(0xEEEEEE);
} 

function animate() {
    camera.aspect = window.innerWidth / innerHeight
    camera.updateProjectionMatrix();
    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;

    renderer.render(scene, camera);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<main>
  <div id="threeContainer">
    <canvas #canvas id="canvas"></canvas>
  </div>
</main>

Upvotes: 2

Related Questions