ss

main.js

@@ -62,7 +62,7 @@ loader.crossOrigin = true;
 // https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/ladybug.gltf
 // https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf
 // https://static.radulescu.me/codepen/sword/scene.gltf
-loader.load( './demo.glb', function ( data ) {
+loader.load( './Bee.glb', function ( data ) {
     var object = data.scene;
      object.position.set(00, -10, -0);
     // object.scale.set(0.5,0.5,0.5);
@@ -89,4 +89,4 @@ window.addEventListener( 'resize', function () {
   renderer.setSize( window.innerWidth, window.innerHeight );
 }, false );
 
-/*////////////////////////////////////////*/
+/*////////////////////////////////////////*/

main2.js

@@ -0,0 +1,92 @@
+// Created using a tutorial from Redstapler
+// GLTF 3D Model from Shaw Pen https://codepen.io/shshaw/pen/yPPOEg
+
+// Three JS needs mainly below three things
+
+/* //////////////////////////////////////// */
+
+// SCENE
+var scene = new THREE.Scene();
+scene.background = new THREE.Color(0x000000);
+
+/* //////////////////////////////////////// */
+
+// CAMERA
+var camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 800 );
+camera.position.set(5,5,5);
+
+/* ////////////////////////////////////////// */
+
+// RENDERER
+var renderer = new THREE.WebGLRenderer( { antialias: true } );
+renderer.setSize( window.innerWidth, window.innerHeight );
+
+// Append canvas to the body
+document.body.appendChild( renderer.domElement);
+
+/* ////////////////////////////////////////// */
+
+// Camera Rotation Control
+var controls = new THREE.OrbitControls( camera );
+
+controls.rotateSpeed = 0.3;
+controls.zoomSpeed = 0.9;
+
+controls.minDistance = 3;
+controls.maxDistance = 20;
+
+controls.minPolarAngle = 0; // radians
+controls.maxPolarAngle = Math.PI /2; // radians
+
+controls.enableDamping = true;
+controls.dampingFactor = 0.05;
+
+
+/* /////////////////////////////////////////////// */
+
+// Point Light
+var light = new THREE.PointLight( 0xffffcc, 20, 200 );
+light.position.set( 0, 0, -0 );
+scene.add( light );
+
+var light2 = new THREE.AmbientLight( 0x20202A, 20, 100 );
+light2.position.set( 0, -0, 0 );
+scene.add( light2 );
+
+/* ////////////////////////////////////////// */
+
+// GLTF Loader to Load and manipulate 3D Models
+var loader = new THREE.GLTFLoader();
+
+loader.crossOrigin = true;
+// https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/ladybug.gltf
+// https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf
+// https://static.radulescu.me/codepen/sword/scene.gltf
+loader.load( './baymax.glb', function ( data ) {
+    var object = data.scene;
+     object.position.set(0, -0, 0);
+    // object.scale.set(0.5,0.5,0.5);
+    scene.add( object );
+});
+
+/* //////////////////////////////////////// */
+
+// Render animation on every rendering phase
+function render () {
+  requestAnimationFrame( render ); 
+  renderer.render( scene, camera ); // Render Scene and Camera
+  controls.update(); // For Orbit Controller
+}
+
+render();
+
+/*////////////////////////////////////////*/
+
+// Update Camera Aspect Ratio and Renderer ScreenSize on Window resize
+window.addEventListener( 'resize', function () {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize( window.innerWidth, window.innerHeight );
+}, false );
+
+/*////////////////////////////////////////*/