123

gifuitvnluan · Mar 18, 2021 · 75e692a · 75e692a
1 parent c7e77ff
commit 75e692a
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+
+  <!-- **************
+  Created using a tutorial from Redstapler
+  GLTF 3D Model from Shaw Pen https://codepen.io/shshaw/pen/yPPOEg
+  ************** -->
+  <script>console.clear();</script>
+
+
+    <script src="https://unpkg.com/[email protected]/build/three.js"></script>
+    <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
+    <script src="https://codepen.io/navin_moorthy/pen/aboQoVX"></script>
+    <script src="./main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.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( './Bee.glb', function ( data ) {
+    var object = data.scene;
+     object.position.set(00, -10, -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 );
+
+/*////////////////////////////////////////*/
diff --git a/style.css b/style.css
@@ -0,0 +1,16 @@
+@charset "utf-8";
+
+/* CSS Document */
+
+
+/* **************
+Created using a tutorial from Redstapler
+GLTF 3D Model from Shaw Pen https://codepen.io/shshaw/pen/yPPOEg
+************** */
+
+body {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}