javascript – Render Screen is Dificult-ThrowExceptions

Exception or error:

So I’m trying to learn how to use THREE.js to make browser games, however when I try to use the code to import a model the screen renders black. I’m using Brackets to code and run it and I haven’t had an issue until now.

Heres the code

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

scene.background = new THREE.Color(0xdddddd);

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

var loader = new THREE.GLTFLoader();

loader.load('CabbageBase.glb', function(gltf) {

  scene.add(gltf.scene);

}, undefined, function(error) {

  console.error(error);

});

camera.position.z = 5;

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

  /*cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;*/

  renderer.render(scene, camera);
};

animate();
body {
  background: linear-gradient(#e4e0ba, #f7d9aa);
  margin: 0px;
  overflow: hidden;
}

canvas {
  display: block;
}
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="GLTFLoader.js"></script>
How to solve:

I don’t see anything wrong with the code except for the URLs.

You need to use a specific version of three.js by either downloading it or using a versioned CDN. All of the loaders, controls, and the examples require a specific version. Never link to threejs.org, always either download your own version or use a CDN. For example jsdeliver.

https://www.jsdelivr.com/package/npm/three

So for the three.js library the URL is

https://cdn.jsdelivr.net/npm/three@0.113.2/build/three.min.js

and for the version compatible GLTFLoader the URL is

https://cdn.jsdelivr.net/npm/three@0.113.2/examples/js/loaders/GLTFLoader.js

After that you need a model. I pointed to one on the three.js site (which is also bad since there is no guarantee it will stay their or stay compatible but for models we have less choices, normally you’d use your own model)

And with that the code works as is.

Note: For three.js you also generally need to run a local server which is covered in the docs

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

scene.background = new THREE.Color(0xdddddd);

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

var loader = new THREE.GLTFLoader();

loader.load('https://threejs.org/examples/models/gltf/Horse.glb', function(gltf) {

  scene.add(gltf.scene);

}, undefined, function(error) {

  console.error(error);

});

camera.position.z = 5;

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

  /*cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;*/

  renderer.render(scene, camera);
};

animate();
body {
  background: linear-gradient(#e4e0ba, #f7d9aa);
  margin: 0px;
  overflow: hidden;
}

canvas {
  display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.113.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.113.2/examples/js/loaders/GLTFLoader.js"></script>

Leave a Reply

Your email address will not be published. Required fields are marked *