GLTF model not being added or visible

Questions
1

i am fairly new to three.js and am stuck here i looked through the forum and i wasnt able to find a solution. There’s this weird thing, i added a cube just for my reference and for some reasons i got 2 cubes instead of one and the margin of the pages changes with the scale of the model if i decrease the scale the scrollable area increases and yet i dont see the model itself.

import './App.css';
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

function App() {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xeeeeee);
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();

  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const controls = new OrbitControls(camera, renderer.domElement);
  const loader = new GLTFLoader();
  const geometry = new THREE.BoxGeometry(0.9,0.9,0.9);
  const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  const light = new THREE.PointLight(0xffffff, 1, 100);
  light.position.set(0, 20, 20);
  scene.add(light);

  const AmbientLight = new THREE.AmbientLight(0xffffff, 100);
  scene.add(AmbientLight);
  
  camera.position.z = 5;

  loader.load( 'public/model.gltf', function ( gltf ) {

    gltf.scene.traverse(function (child) {
      if (child.isMesh) {
        const newMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
        child.material = newMaterial;
      }});
  gltf.scene.scale.set(0.0001,0.0001,0.0001);
  gltf.scene.position.set(0,0,2);

	scene.add( gltf.scene );

  }, undefined, function ( error ) {

	console.error( error );

  } );

  function animate() {
    requestAnimationFrame(animate);
  
    controls.update();

    renderer.render(scene, camera);
  }
  animate();


  return (

    <div className="App">
      
    </div>
  );
}

export default App;

this would be my react code and i will attach some ss as well

image
image1920×908 4.3 KB

the two cubes
image
image1217×885 29.4 KB

empty console
image
image1211×852 51.2 KB

the network does show the model.gltf file
image
image938×511 11.7 KB

please tell me if i need to add some other ss as well! /

Thank you for your time~

2

i forgot to mention but the number of the cubes also changed by tempering the scale and mesh material of the model

3

The issue you are facing is the incorrect path of your gltf model. Considering your model in the public folder you don’t need to mention public in the path instead you would do loader.load( 'model.gltf', function ( gltf ) { so no public/.

Now the reason why you are seeing 2 cubes or should I say two scenes is because in the main.jsx file the <App/> component would be placed inside of <StrictMode> component something like this:

<StrictMode>
      <App />
<StrictMode />

Just comment out StrictMode and you are good to go.

Also since you are new and working in React I would suggest you to look at React-Three-Fiber which is far more compatible with React.

4

thanks man it worked but i am not seeing any textures. It was .blend model which i downloaded online and then converted to a gltf file but i dont see the textures in the website. I do see them if i view it in online gltf viewer.

do i import the gltf file or the zip folder that i got after converting

5

image
image1885×923 118 KB

this is how it appears in online viewer
image
image1893×876 6.16 KB

what i see in my website

6

image
image1894×884 19.3 KB

this is how it appears if i convert the file to a .glb file (if it makes a difference)

7

There are 2 things you have to do in order to get the correct material.

  1. Decrease the light intensity of both PointLight and AmbientLight, light intensity is a sensitive value cranking it up to 100 is like putting the object in front of the brightest light in the world. You wouldn’t even identify the objects colour in front of that high intensity lights. Try to start with 1

  2. The issue with the texture is that the .gltf model of yours already has its textures and material stored in its file. As you observed that when the .gltf file uploaded onto a viewer its showing its original material, because the viewer is fetching the textures and materials stored in the file. When you are loading the .gltf model using the GLTFLoader you are replacing the actual models material with a material of your own.

gltf.scene.traverse(function (child) {
      if (child.isMesh) {
        const newMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
        child.material = newMaterial;
      }});

This is overriding the actual material of the model with the material you have described here. So remove this line and you are good to go.

What is happening when you are changing the material? Well the actual model material can consist of properties like roughness, shininess etc. So when you are creating your own material you didn’t apply these properties instead you only applied a single hex colour for the material, which made the model to only have a single colour and not the other properties.