Not able to see model after loading gltf from blender

Questions
1

HI,
I am new to both blender and three.js. I created a table model in blender(2.8) and exported it in gltf 2.0.
I got a table.glb file. I have not used much textures in my drawing.
I checked my model in https://gltf-viewer.donmccurdy.com/ and it renders well.
I have camera, lights. Dunno what is the problem.
I have other custom geometry and that shows up fine in the browser. However, my table is not showing up.

Here is my code:

<title>My first three.js app</title>

<style>

  body {

    margin: 0;

  }

  canvas {

    background-color: chocolate;

    display: block;

  }

</style>

<script src="./node_modules/three/build/three.js"></script>

<script type="module">

  import * as THREE from "./node_modules/three/build/three.module.js";

  import { GLTFLoader } from "./node_modules/three/examples/jsm/loaders/GLTFLoader.js";

  var scene = new THREE.Scene();

  scene.background = new THREE.Color("chocolate");

  var camera = new THREE.PerspectiveCamera(

    75,

    window.innerWidth / window.innerHeight,

    0.1,

    1000

  );

  var light = new THREE.AmbientLight(0xffffff, 0.5);

  scene.add(light);

  var light2 = new THREE.PointLight(0xffffff, 0.5);

  scene.add(light2);

  var renderer = new THREE.WebGLRenderer();

  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  var box = new THREE.BoxGeometry();

  var sphere = new THREE.SphereGeometry(0.2);

  var cylinder = new THREE.CylinderGeometry(0.2, 0.2, 1, 32);

  var material = new THREE.MeshBasicMaterial({ color: 0xffffff });

  var paper = new THREE.Mesh(box, material);

  var lens = new THREE.Mesh(sphere, material);

  var candle = new THREE.Mesh(cylinder, material);

  const loader = new GLTFLoader();

  loader.load("images/designs/table.glb", handle_load);

  var mesh;

  function handle_load(gltf) {

    mesh = gltf.scene.children[0];

    mesh.material = new THREE.MeshLambertMaterial();

    mesh.position.x = -1;

    mesh.position.y = 0.5;

    mesh.position.z = 0;

    mesh.scale.x = 1;

    mesh.scale.y = 2;

    mesh.scale.z = 0.01;

    scene.add(mesh);

  }

  camera.position.set(1, 1, 20);

  lens.position.y = 0.5;

  paper.scale.x = 1;

  paper.scale.y = 2;

  paper.scale.z = 0.01;

  paper.rotation.x = 0;

  paper.rotation.y = 0;

  lens.position.x = -1;

  lens.scale.x = -0.5;

  candle.radiusTop = 0.2;

  candle.radiusBottom = 0.2;

  candle.height = 5;

  candle.position.x = -2;

  scene.add(paper);

  scene.add(lens);

  //scene.add(candle);

  //cube.rotation.z += 1;

  //var animate = function () {

  //requestAnimationFrame(animate);

  //cube.rotation.x += 0.01;

  //cube.rotation.y += 0.01;

  renderer.render(scene, camera);

  //};

  //animate();

</script>
2

There are a couple of issues in your code:

  • You render your scene only once right at the beginning. However, it takes a bit until the glTF is added to your scene. For now, it’s better to go for an animation loop.
  • It’s recommended to add the entire glTF asset to your scene, not just child objects. It should be scene.add( gltf.scene ).
  • Also, don’t overwrite the material with an instance of MeshLambertMaterial. Doing this means you loose all assigned textures and other material properties.
3

Thankyou Mugen for your quick response.
Atlast, after many modifications, I got my code working and model is rendered in 3.js.
Both GLTF and obj/mtl have been rendered properly… Yeyyy!!
Some learnings:

  1. Adding entire gltf rather than children helped
  2. Study sample code on Three.js website
  3. most important. The directory/file paths in examples are all relative. So using same directory structure as in example helped. I got so fedup that I placed by html in three/examples and changed paths according to the example and that helped.
  4. GLTF looks more better than obj/mtl.
1 Like