thara/GLTFLoader_example.html

## GLTFLoader_example.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>GLTFLoader example</title>
    <style>
      body { margin: 0; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id="webgl-output">
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js" integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg==" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
    <script>
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
      const webGLRenderer = new THREE.WebGLRenderer();
      webGLRenderer.setSize(window.innerWidth, window.innerHeight);
      webGLRenderer.shadowMapEnabled = true;

      camera.position.x = 150;
      camera.position.y = 150;
      camera.position.z = 150;
      camera.lookAt(new THREE.Vector3(0, 20, 0));

      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(150, 150, 150);
      spotLight.intensity = 2;
      scene.add(spotLight);

      document.getElementById("webgl-output").appendChild(webGLRenderer.domElement);

      const loader = new THREE.GLTFLoader();
      // https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/Buggy/glTF-Binary/Buggy.glb
      loader.load("buggy.glb",
        function(gltf) {
          scene.add(gltf.scene);
        },
        function(xhr) {
          console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },
        function(err) {
          console.log('an error occurred');
        }
      );

      render();

      function render() {
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>GLTFLoader example</title>
	<style>
	body { margin: 0; overflow: hidden;}
	</style>
	</head>
	<body>
	<div id="webgl-output">
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js" integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg==" crossorigin="anonymous"></script>
	<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
	<script>
	const scene = new THREE.Scene();
	const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
	const webGLRenderer = new THREE.WebGLRenderer();
	webGLRenderer.setSize(window.innerWidth, window.innerHeight);
	webGLRenderer.shadowMapEnabled = true;

	camera.position.x = 150;
	camera.position.y = 150;
	camera.position.z = 150;
	camera.lookAt(new THREE.Vector3(0, 20, 0));

	var spotLight = new THREE.SpotLight(0xffffff);
	spotLight.position.set(150, 150, 150);
	spotLight.intensity = 2;
	scene.add(spotLight);

	document.getElementById("webgl-output").appendChild(webGLRenderer.domElement);

	const loader = new THREE.GLTFLoader();
	// https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/Buggy/glTF-Binary/Buggy.glb
	loader.load("buggy.glb",
	function(gltf) {
	scene.add(gltf.scene);
	},
	function(xhr) {
	console.log((xhr.loaded / xhr.total * 100) + '% loaded');
	},
	function(err) {
	console.log('an error occurred');
	}
	);

	render();

	function render() {
	requestAnimationFrame(render);
	webGLRenderer.render(scene, camera);
	}
	</script>
	</body>
	</html>