0

I'm trying to load a 3D model on the screen but the screen is black, and sometimes I receive an error depending on the way I try to implement my code.

Here is my HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>T1 CG</title>
</head>
<body>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</body>
<script src="./lib/threejs/build/three.min.js"></script>
<script src="./lib/threejs/examples/js/loaders/GLTFLoader.js"></script>
<script src="./poke.js"></script>
</html>

Here is my javascript file:

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

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

var geometry = new THREE.BoxGeometry(1, 1, 1);

var loader = new THREE.GLTFLoader();

loader.load('./assets/Squirtle/Squirtle.gltf', function(gltf) {
    scene.add( gltf );
});

When I try to run like that, I receive the following error: THREE.Object3D.add: object not an instance of THREE.Object3D. But when I try to do something like scene.add(gltf.scene), I don't receive any error but the screen turns black and nothing happens.

Hope that somebody can help me, I'll appreciate it!

Thanks in advance.

danibrum
  • 459
  • 8
  • 21

1 Answers1

0

Have you tried adding any lights to your scene? Most materials need to be illuminated in order to be visible. You can try a simple AmbientLight:

var light = new THREE.AmbientLight( 0x404040 );
scene.add( light );

Also make sure your camera is positioned a little far from the origin, otherwise the loaded .gltf and the camera will both be occupying the same spot. For instance, if the object is 2 units wide, you could place your camera 5 units away:

camera.position.z = 5;
M -
  • 26,908
  • 11
  • 49
  • 81
  • Yeah, I read a little bit more about three.js and found about lights, now I've got a gray screen, but my model isn't showing yet. The gltf I was using was with some problems, so I got another one, but it still isn't loading... – danibrum Dec 09 '19 at 23:02
  • Try setting up your scene with a simple cube. Once the cube, camera, and lighting are all working, then you should import more complex `.gltf` files. Otherwise it's hard to tell which step of the process is the one that's failing. – M - Dec 09 '19 at 23:05