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

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?

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

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

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; = new THREE.PerspectiveCamera(fov, aspect, zNear, zFar);, 0, 100);

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

      this.renderer.physicallyCorrectLights = true;

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

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

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

      const loader = new GLTFLoader();
        (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;

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

      // if (this.model) {
      //   this.model.rotation.x += 0.01;
      //   this.model.rotation.y += 0.01;
      // }
  mounted() {
    window.addEventListener("resize", this.resize());

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!

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:

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:

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!

Try removing the scene.background property.