dav-leon · HeshamShawqy · Jan 21, 2022 · Jan 21, 2022 · Jan 21, 2022 · Jan 21, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Duplicate_Animate_Example/Box.3dm b/Duplicate_Animate_Example/Box.3dm
diff --git a/Duplicate_Animate_Example/Box.3dm.rhl b/Duplicate_Animate_Example/Box.3dm.rhl
@@ -0,0 +1,3 @@
+Dell
+DESKTOP-CK033JL
+Friday, January 21, 2022
diff --git a/Duplicate_Animate_Example/Rhino_Logo.3dm b/Duplicate_Animate_Example/Rhino_Logo.3dm
diff --git a/Duplicate_Animate_Example/function.js b/Duplicate_Animate_Example/function.js
@@ -0,0 +1,76 @@
+// Import libraries
+import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.module.js'
+import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/controls/OrbitControls.js'
+import { Rhino3dmLoader } from 'https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/loaders/3DMLoader.js'
+
+// declare variables to store scene, camera, and renderer
+let scene, camera, renderer
+const model = 'Box.3dm'
+
+// call functions
+init()
+animate()
+
+// function to setup the scene, camera, renderer, and load 3d model
+function init () {
+
+    // Rhino models are z-up, so set this as the default
+    THREE.Object3D.DefaultUp = new THREE.Vector3( 0, 0, 1 )
+
+    // create a scene and a camera
+    scene = new THREE.Scene()
+    scene.background = new THREE.Color(1,1,1)
+    camera = new THREE.PerspectiveCamera( 85, window.innerWidth / window.innerHeight, 0.1, 1000 )
+    camera.position.y = - 60
+    camera.position.x = -30
+
+    // create the renderer and add it to the html
+    renderer = new THREE.WebGLRenderer( { antialias: true } )
+    renderer.setSize( window.innerWidth, window.innerHeight )
+    document.body.appendChild( renderer.domElement )
+
+    // add some controls to orbit the camera
+    const controls = new OrbitControls( camera, renderer.domElement )
+
+    // add a directional light
+    const directionalLight = new THREE.DirectionalLight( 0xffffff )
+    directionalLight.intensity = 2
+    scene.add( directionalLight )
+
+    // load the model
+    const loader = new Rhino3dmLoader()
+    loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/rhino3dm@0.13.0/' )
+
+loader.load( model, function ( object ) {
+        var copy = object.clone();
+        copy.position.x = 40 
+        scene.add( object, copy )
+
+        const animateGeometry = () => {
+            requestAnimationFrame (animateGeometry)
+            object.rotation.y += 0.01
+            renderer.render( scene, camera )
+
+
+        }
+        animateGeometry()
+
+        return object;
+    } )
+}
+
+
+console.log(object)
+
+
+fun
+// function to continuously render the scene
+function animate() {
+
+    requestAnimationFrame( animate )
+    renderer.render( scene, camera )
+
+}
+
+
+
diff --git a/Duplicate_Animate_Example/index.html b/Duplicate_Animate_Example/index.html
@@ -0,0 +1,35 @@
+<!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>
+    <style>
+        body { margin: 0; }
+
+        /* CSS for a spinning animation */ 
+        #loader {
+            border: 5px solid #f3f3f3; /* Light grey */
+            border-top: 5px solid #3d3d3d; /* Grey */
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+    </style>
+
+</head>
+<body>
+    <script type="module" src="./function.js"></script>
+</body>
+</html>
diff --git a/Random_Clones/Box.3dm b/Random_Clones/Box.3dm
diff --git a/Random_Clones/Box.3dm.rhl b/Random_Clones/Box.3dm.rhl
@@ -0,0 +1,3 @@
+Dell
+DESKTOP-CK033JL
+Friday, January 21, 2022
diff --git a/Random_Clones/Rhino_Logo.3dm b/Random_Clones/Rhino_Logo.3dm
diff --git a/Random_Clones/function.js b/Random_Clones/function.js
@@ -0,0 +1,72 @@
+// Import libraries
+import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.module.js'
+import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/controls/OrbitControls.js'
+import { Rhino3dmLoader } from 'https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/loaders/3DMLoader.js'
+
+// declare variables to store scene, camera, and renderer
+let scene, camera, renderer
+const model = 'Box.3dm'
+
+// call functions
+init()
+animate()
+
+// function to setup the scene, camera, renderer, and load 3d model
+function init () {
+
+    // Rhino models are z-up, so set this as the default
+    THREE.Object3D.DefaultUp = new THREE.Vector3( 0, 0, 1 )
+
+    // create a scene and a camera
+    scene = new THREE.Scene()
+    scene.background = new THREE.Color(1,1,1)
+    camera = new THREE.PerspectiveCamera( 85, window.innerWidth / window.innerHeight, 0.1, 1000 )
+    camera.position.y = - 60
+    camera.position.x = -30
+
+    // create the renderer and add it to the html
+    renderer = new THREE.WebGLRenderer( { antialias: true } )
+    renderer.setSize( window.innerWidth, window.innerHeight )
+    document.body.appendChild( renderer.domElement )
+
+    // add some controls to orbit the camera
+    const controls = new OrbitControls( camera, renderer.domElement )
+
+    // add a directional light
+    const directionalLight = new THREE.DirectionalLight( 0xffffff )
+    directionalLight.intensity = 2
+    scene.add( directionalLight )
+
+    // load the model
+    const loader = new Rhino3dmLoader()
+    loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/rhino3dm@0.13.0/' )
+
+loader.load( model, function ( object ) {
+    for (var i = 0;i<100;i++){
+        var box = object.clone();
+        box.position.x = ( Math.random() - 0.5) * 200;
+        box.position.y = ( Math.random() - 0.5) * 200;
+        box.position.z = ( Math.random() - 0.5) * 200;
+
+        scene.add(box);
+
+    }
+
+    } )
+}
+
+
+console.log(object)
+
+
+fun
+// function to continuously render the scene
+function animate() {
+
+    requestAnimationFrame( animate )
+    renderer.render( scene, camera )
+
+}
+
+
+
diff --git a/Random_Clones/index.html b/Random_Clones/index.html
@@ -0,0 +1,35 @@
+<!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>
+    <style>
+        body { margin: 0; }
+
+        /* CSS for a spinning animation */ 
+        #loader {
+            border: 5px solid #f3f3f3; /* Light grey */
+            border-top: 5px solid #3d3d3d; /* Grey */
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+    </style>
+
+</head>
+<body>
+    <script type="module" src="./function.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -7,9 +7,8 @@
     <body>
         <h1>S1 - Lecture 2</h1>
         <ul>
-            <li><a href="./example1/">Example 1</a> – Introduction to three.js</li>
-            <li><a href="./example2/">Example 2</a> – Introduction to rhino3dm.js and 3DMLoader for three.js</li>
-            <li><a href="./example3/">Example 3</a> - Extends example 2 by adding a mouse click event.</li>
+            <li><a href="./Duplicate_Animate_Example/">Clone-Animate</a> – Introduction to three.js</li>
+            <li><a href="./Random_Clones/">Random-Clones</a> – Introduction to three.js</li>
         </ul>
     </body>
 </html>