Add a Line Field

chrisbamborough · Jan 10, 2025 · ad4e42d · ad4e42d
1 parent d117ad2
commit ad4e42d
Show file tree

Hide file tree

Showing 10 changed files with 687 additions and 147 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/02_LineField/index.html b/02_LineField/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="data:;base64,=">
+    <title>rhino3dm: Create Objects</title>
+    <style>
+        body {
+            margin: 0;
+        }
+
+        #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%;
+            z-index: 2;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="loader"></div>
+    <button id="downloadButton" disabled>Download</button>
+
+    <!-- Import maps polyfill -->
+    <!-- Remove this when import maps will be widely supported -->
+    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/[email protected]/build/three.module.js",
+                "three/examples/jsm/controls/OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
+                "rhino3dm":"https://unpkg.com/[email protected]/rhino3dm.module.js"
+            }
+        }
+    </script>
+
+    <script type="module" src="script.js"></script>
+</body>
+
+</html>
diff --git a/02_LineField/script.js b/02_LineField/script.js
@@ -0,0 +1,115 @@
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import rhino3dm from "rhino3dm";
+
+const downloadButton = document.getElementById("downloadButton");
+downloadButton.onclick = download;
+
+let rhino, doc;
+rhino3dm().then(async (m) => {
+  console.log("Loaded rhino3dm.");
+  rhino = m; // global
+  init();
+  create();
+});
+
+function create() {
+  doc = new rhino.File3dm();
+  const loader = new THREE.BufferGeometryLoader();
+
+  // Define the field size and spacing
+  const fieldSize = 10;
+  const spacing = 10;
+
+  // Create a field of lines
+  for (let x = 0; x < fieldSize; x++) {
+    for (let y = 0; y < fieldSize; y++) {
+      const ptA = [x * spacing, y * spacing, 0];
+      const ptB = [x * spacing, y * spacing, 10];
+
+      const line = new rhino.LineCurve(ptA, ptB);
+
+      const lineGeometry = new THREE.BufferGeometry();
+      const lineVertices = new Float32Array(
+        line.line.from.concat(line.line.to)
+      );
+      lineGeometry.setAttribute(
+        "position",
+        new THREE.BufferAttribute(lineVertices, 3)
+      );
+      const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });
+      const lineObject = new THREE.Line(lineGeometry, lineMaterial);
+      scene.add(lineObject);
+      doc.objects().add(line.toNurbsCurve(), null);
+    }
+  }
+
+  // Hide the spinner
+  document.getElementById("loader").style.display = "none";
+
+  // Enable download button
+  downloadButton.disabled = false;
+
+  console.log(scene);
+}
+
+// download button handler
+function download() {
+  const options = new rhino.File3dmWriteOptions();
+  options.version = 7;
+  let buffer = doc.toByteArray(options);
+  saveByteArray("rhinoObjectTypes" + options.version + ".3dm", buffer);
+}
+
+function saveByteArray(fileName, byte) {
+  let blob = new Blob([byte], { type: "application/octect-stream" });
+  let link = document.createElement("a");
+  link.href = window.URL.createObjectURL(blob);
+  link.download = fileName;
+  link.click();
+}
+
+// BOILERPLATE //
+
+let scene, camera, renderer;
+
+function init() {
+  // Rhino models are z-up, so set this as the default
+  THREE.Object3D.DefaultUp = new THREE.Vector3(0, 0, 1);
+
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color(1, 1, 1);
+  camera = new THREE.PerspectiveCamera(
+    45,
+    window.innerWidth / window.innerHeight,
+    1,
+    1000
+  );
+  camera.position.z = 50;
+
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  document.body.appendChild(renderer.domElement);
+
+  const controls = new OrbitControls(camera, renderer.domElement);
+
+  const light = new THREE.DirectionalLight();
+  scene.add(light);
+
+  window.addEventListener("resize", onWindowResize, false);
+
+  animate();
+}
+
+function animate() {
+  requestAnimationFrame(animate);
+  renderer.render(scene, camera);
+}
+
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  animate();
+}
diff --git a/SampleObjectTypes/index.html b/SampleObjectTypes/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="data:;base64,=">
+    <title>rhino3dm: Create Objects</title>
+    <style>
+        body {
+            margin: 0;
+        }
+
+        #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%;
+            z-index: 2;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="loader"></div>
+    <button id="downloadButton" disabled>Download</button>
+
+    <!-- Import maps polyfill -->
+    <!-- Remove this when import maps will be widely supported -->
+    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/[email protected]/build/three.module.js",
+                "three/examples/jsm/controls/OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
+                "rhino3dm":"https://unpkg.com/[email protected]/rhino3dm.module.js"
+            }
+        }
+    </script>
+
+    <script type="module" src="script.js"></script>
+</body>
+
+</html>