Chrome texture not displaying on GLTF model in code, but works perfectly in GLTF viewer?

Questions
, ,
1

I have successfully loaded a GLTF object (a basic wine bottle) that will overlay over text.

My issue is that I am unable to render the ‘chrome’ texture on the supplied model as well cast any shadows off of the model, as the bottle only renders in black?

Render
Render1500×1203 139 KB

I have tested and it works correctly in both GLTF viewer and Babylon.js (see below):

Render-In-Babylon-Viewer
Render-In-Babylon-Viewer1500×1593 372 KB

Here is the code (implemented in Vue.js) and link to model below:

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      cube: null,
      loader: null,
      model: null,
      controls: null,
    };
  },
  methods: {
    init() {
      // Set container
      this.container = this.$refs.sceneContainer;

      // Create scene
      this.scene = new THREE.Scene();

      // Create camera
      const fov = 25;
      const aspect = 1;
      const zNear = 1;
      const zFar = 100;
      this.camera = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);
      this.camera.position.set(0, 0, 100);

      // Create renderer
      this.renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true,
      });
      this.renderer.setClearColor(0x000000, 0);
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.outputEncoding = THREE.sRGBEncoding; 
      // this.renderer.gammaFactor = 2.2;  // Depreceated
      // this.renderer.gammaOutput = true; // Depreceated
      this.container.appendChild(this.renderer.domElement);

      this.renderer.physicallyCorrectLights = true;

      // Controls
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      
      // Lights
      var hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
      this.scene.add(hemiLight);

      var dirLight = new THREE.DirectionalLight(0xffffff);
      this.scene.add(dirLight);

      // Texture
      // var textureLoader = new THREE.TextureLoader();
      // var texture = textureLoader.load("/model/env.jpg");
      // texture.flipY = false;


      const loader = new GLTFLoader();
      loader.load(
        "/model/196N_Non-HomePage-Animation_3D-Bottle_Colour.gltf",
        (glTF) => {
          console.log("glTF: ", glTF);
        
          this.model = glTF.scene;

          // Add texture to model
          this.model.traverse(function (child) {
            if (child instanceof THREE.Mesh) child.material.envMap = texture;
          });

          this.scene.add(this.model);
        },
        (xhr) => {
          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        (error) => {
          console.error(error);
        }
      );
    },
    resize() {
      var factor = 1; // percentage of the screen
      var w = window.innerWidth * factor;
      var h = window.innerHeight * factor;
      this.renderer.setSize(w, h);
      this.camera.aspect = w / h;
      this.camera.updateProjectionMatrix();
    },
    animate() {
      requestAnimationFrame(this.animate);

      // if (this.model) {
      //   this.model.rotation.x += 0.01;
      //   this.model.rotation.y += 0.01;
      // }
      this.renderer.render(this.scene, this.camera);
    },
  },
  mounted() {
    this.init();
    this.animate();
    window.addEventListener("resize", this.resize());
  },
};
</script>

GTLF Model:

This answer to a similar question describes that I should potentially be using an environment map on the model within the GLTF loader or play with the lighting but I am unsure how to do this? Am I right in thinking the chrome texture is actually embedded in the file or do I need to link to a static file?

Any help would be greatly appreciated!

2

Reflections require an environment map — it’s usually loaded separately from the model, so you can choose what scene your model reflects. For an example, inspect the code on this page:

The texture loaded in that example can be found here: https://github.com/mrdoob/three.js/tree/dev/examples/textures/equirectangular

3

Hi Don

Thank you!

Massive help, I’ve managed to load one of the example .hdr textures and am rendering the correct reflections :slight_smile:

Bottle
Bottle2000×1125 480 KB

The goal is to have the bottle floating on the website without the background texture. Is it possible to render the reflections on the bottle without having the actual ‘texture’ image appear in the background of the canvas?

Thanks again!

4

Try removing the scene.background property.