ThreeJS Texture load problem on glb
by Colin Brogan
HTML
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<a href="#" class="colors red">RED</a>
<script>
var glb_url = "https://cdn.shopify.com/s/files/1/0509/5430/5691/t/2/assets/lounge_2101.glb";
var velvet_texture_url = "https://cdn.shopify.com/s/files/1/0509/5430/5691/t/2/assets/velvet-sheen_texture.jpg";
// Our Javascript will go here.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 50, window.innerWidth / (window.innerHeight - 100), 1, 7000 );
camera.position.set( 0, 1000, 1500);
camera.scale.set(1,1,1);
// Load Lights
var ambientLight = new THREE.AmbientLight( 0xcccccc );
this.scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1000, 1000 ).normalize();
this.scene.add( directionalLight );
const renderer = new THREE.WebGLRenderer();
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setSize( window.innerWidth, window.innerHeight - 100 );
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
const boxWidth = 500;
const boxHeight = 500;
const boxDepth = 500;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const material = new THREE.MeshStandardMaterial({});
var cube = new THREE.Mesh(geometry, material);
cube.position.set(800,250,0);
scene.add(cube);
const loader = new THREE.GLTFLoader();
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.update();
// Load a glTF resource
loader.load(
// resource URL
glb_url,
// called when...