Non-Appearing GLTF

by realhunts

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/src/loaders/ObjectLoader.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

var camera, scene, renderer, container;
var geometry, material, cube;
var edges, line;
var controls;
var skybox;
var x, y, z, yinterv;
var object;
init();
animate();

function init() {
  //Scene and setup

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  container = document.createElement('div');
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  renderer.shadowMap.enabled = true;
  container.appendChild(renderer.domElement);
  document.body.appendChild(container);
  document.body.appendChild(renderer.domElement);
  var ambientLight = new THREE.AmbientLight(0xcccccc, 1);
  scene.add(ambientLight);

  // Orbit Controls


  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.target.set(0, 0, 0);
  controls.update();


  // Textures and Geometries

  var textureLoader = new THREE.TextureLoader();
  var texture1 = textureLoader.load("TestObjects/textures/test_height_map_earth.jpg");
  var material1 = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    map: texture1
  });

  geometry = new THREE.SphereGeometry(THREE.Math.randFloat(20, 90), 32, 32);
  material = new THREE.MeshNormalMaterial();
  var spherical = new THREE.Mesh(geometry, material1);
  spherical.position.z = -400;
  spherical.position.x = 100;
  scene.add(spherical);
  var material2 = new THREE.MeshBasicMaterial(0xffffff);


  //Material and Object Loaders      http://localhost:8000/TestObjects/scene.gltf

  //Works as long as file is in the server folder as well (in this case, the python folder)

  var loader = new THREE.GLTFLoader();
  loader.load(
    'http://localhost:8000/TestObjects/scene.gltf',
    function(gltf) {
      gltf.scene.scale.set(0.02, 0.02, 0.02);
      gltf.scene.position.x = 0
     ...