Model .gltf without texture

Stanley407 · November 3, 2023, 6:55pm

Hello,

I have a problem with textures; it means they don’t appear by themselves. Everything seems to be in the right place on the server (in the ‘textures’ folder), and the console doesn’t list any errors.
Other way, when I tried load them using ‘THREE.TextureLoader()’, the textures aren’t properly aligned.

My .js

<div data-theme-toc="true">
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.157.0/three.module.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js';

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

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1, 1);


const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("model-container").appendChild(renderer.domElement);

window.addEventListener('resize', () => {
    const newWidth = window.innerWidth;
    const newHeight = window.innerHeight;
    camera.aspect = newWidth / newHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(newWidth, newHeight);
});

let model;
let pivot;


const pointLight = new THREE.PointLight(0xffffff, 100);
pointLight.position.set(0, 9, 25);
scene.add(pointLight);

const loader = new GLTFLoader();
loader.load('../scene.gltf', (gltf) => {
const model = gltf.scene;

// Assuming the model's material contains embedded textures
// Access the material and assign it to the model
const material = model.material;
model.traverse((object) => {
    if (object.isMesh) {
	const material = new THREE.MeshStandardMaterial;

        object.material = material;
    }
});

    // Create a pivot point
    pivot = new THREE.Object3D();
    pivot.add(model);
    scene.add(pivot);

    // Set up OrbitControls
    const controls = new OrbitControls(camera, renderer.domElement);

    // Start the rotation after the model is loaded
    animate();
});

function animate() {
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

// Start the animation loop
animate();
</div>

mjurczyk · November 3, 2023, 7:29pm

Multiple instances of Three.js being imported is in 99.9% cases not a good sign (it’s likely not causing the error here, but it can cause others.)
Did you check the Network panel in devtools? Click on each texture request and check whether the returned response is the proper, binary image, not an XML / JSON error.

donmccurdy · November 3, 2023, 7:40pm

If you’re doing this, you need to set texture.flipY = false and assign .colorSpace, see three.js docs.

Stanley407 · November 3, 2023, 10:04pm

Lawrence3DPK · November 3, 2023, 10:28pm

Stanley407:

const loader = new GLTFLoader();
loader.load('../scene.gltf', (gltf) => {
const model = gltf.scene;

// Assuming the model's material contains embedded textures
// Access the material and assign it to the model
const material = model.material;
model.traverse((object) => {
    if (object.isMesh) {
	const material = new THREE.MeshStandardMaterial;

        object.material = material;
    }
});

this doesn’t look right, with the line const material = model.material; model is associated with the gltf.scene which is a scene object, you’re also overwriting the materials of meshes in the scene with new THREE.MeshStandardMaterial without reasigning the material.map to the new material… this is pretty messy and unnecessary if the gltf model already has materials, they are likely already imported as MeshStandardMaterial and you could omit the whole traverse method but if you need to do this try…

const loader = new GLTFLoader();
loader.load('../scene.gltf', (gltf) => {
const model = gltf.scene;
model.traverse((object) => {
    if (object.isMesh) {
      const map = object.material && object.material.map ? object.material.map : null
      const material = new THREE.MeshStandardMaterial;
      material.map = map
      object.material = material;
    }
});

also as @mjurczyk mentioned you’ll want to sync your three versions…

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.157.0/three.module.js';

import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js'; import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js';

import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.157.0/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.157.0/examples/jsm/controls/OrbitControls.js';

Stanley407 · November 3, 2023, 11:02pm

Now is way better.

Anyway, textures should load automatically, which wouldn’t be so tedious. Thanks a lot.

Lawrence3DPK · November 4, 2023, 1:23am

Yes they will do if they are embedded, you are overwriting the material that has the texture assigned with new MeshStandardMaterial so you’re effectively loading the textures twice, once with the model and then again with the texture loader…

Stanley407 · November 4, 2023, 11:35am

Thanks it helps.

I’m sorry for the messy code - assisted by ChatGPT.

I don’t know if I should start a new topic, but now I have a problem with casting shadows by the model.

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

// Create scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
scene.fog = new THREE.Fog(0xdddddd, 1, 100);

// Create camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 1, 1);

// Create renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // Enable shadow mapping
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

// Handle window resizing
window.addEventListener('resize', () => {
    const newWidth = window.innerWidth;
    const newHeight = window.innerHeight;
    camera.aspect = newWidth / newHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(newWidth, newHeight);
});

// Initialize variables
let model;
let pivot;

// Add directional light for shadows
const directionalLight = new THREE.DirectionalLight(0xffffff, 6.5);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 1024; // Set the shadow map size
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.bias = -0.001; // Adjust the shadow bias
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 100;
directionalLight.shadow.camera.left = -50;
directionalLight.shadow.camera.right = 50;
directionalLight.shadow.camera.top = 50;
directionalLight.shadow.camera.bottom = -50;
directionalLight.position.set(20, 10, 100); // Adjust the light position
scene.add(directionalLight);

const helper = new THREE.DirectionalLightHelper(directionalLight, 100);
scene.add(helper);

// Create ground that receives shadows
const groundGeometry = new THREE.PlaneGeometry(100, 100);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa });
const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
groundMesh.position.set(0, -0.15, 0);
groundMesh.rotation.x = -Math.PI / 2;
groundMesh.receiveShadow = true; // Enable shadow receiving
scene.add(groundMesh);

// Load model with shadows
const loader = new GLTFLoader();
loader.load('../scene.gltf', (gltf) => {
    model = gltf.scene;
    model.traverse((object) => {
        if (object.isMesh) {
            object.receiveShadow = true; // Objects receive shadows
            object.castShadow = true; // Objects cast shadows
            const map = object.material && object.material.map ? object.material.map : null;
            const material = new THREE.MeshStandardMaterial();
            material.map = map;
            material.roughnessMap = object.material.roughnessMap;
            material.normalMap = object.material.normalMap;

            // Ensure emissive map is assigned correctly, and it's not overwritten
            if (object.material.emissiveMap) {
                material.emissiveMap = object.material.emissiveMap;
                material.emissiveIntensity = 0.5; // Adjust this value as needed
                material.emissive.set(0xffffff); // White color
            }
            object.material = material;
        }
    });

    // Create a pivot point
    pivot = new THREE.Object3D();
    pivot.add(model);
    scene.add(pivot);

    // Set up OrbitControls
    const controls = new OrbitControls(camera, renderer.domElement);

    // Start the rotation after the model is loaded
    animate();
});

function animate() {
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

// Start the animation loop
animate();

It’s still messy soory. Thanks in advance

Topic		Replies	Views
GLTF Model not loading texture? Questions textures , shaders , gltf-loader	5	1639	February 16, 2022
Gltf model renders all black Questions gltf-loader	2	3215	November 3, 2021
Three.js : texture and html Questions textures	4	418	February 1, 2024
Texture Not Displaying After Loading it unto gltf model Questions textures , gltf-loader	26	404	June 27, 2024
Textures map incorrectly to gltf object Questions textures	2	2728	December 12, 2019

Model .gltf without texture

Related topics