CODEWITHSUNDEEP
javascripthtmlthree.js
Christopher Babcock
Christopher Babcock

Reputation: 11

Render Screen is Dificult

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>

Upvotes: 1

Views: 41

Answers (1)

user128511
user128511

Reputation:

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/[email protected]/build/three.min.js

and for the version compatible GLTFLoader the URL is

https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>

Upvotes: 1

Related Questions