add create polyline sample

mcneel · May 27, 2024 · 6550263 · 6550263
1 parent c7b8c39
commit 6550263
Show file tree

Hide file tree

Showing 2 changed files with 170 additions and 0 deletions.
diff --git a/rhino3dm/js/SamplePolyLine/index.html b/rhino3dm/js/SamplePolyLine/index.html
@@ -0,0 +1,50 @@
+<!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: RenderContent</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.min.js"
+                }
+            }
+        </script>
+
+        <script type="module" src="script.js"></script>
+    </body>
+</html>
diff --git a/rhino3dm/js/SamplePolyLine/script.js b/rhino3dm/js/SamplePolyLine/script.js
@@ -0,0 +1,120 @@
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import rhino3dm from 'rhino3dm'
+
+const rhino = await rhino3dm()
+console.log('Loaded rhino3dm.')
+
+const downloadButton = document.getElementById("downloadButton")
+downloadButton.onclick = download
+
+let renderer, scene, camera
+let doc
+
+init()
+create()
+animate()
+
+// create //
+
+function create () 
+{
+    // create three polyline
+
+    //create a blue LineBasicMaterial
+    const material = new THREE.LineBasicMaterial( { color: 0x0000ff } )
+
+    const points = [];
+    points.push( new THREE.Vector3( - 10, 0, 10 ) )
+    points.push( new THREE.Vector3( -5, 0, -10 ) )
+    points.push( new THREE.Vector3(  0, 0, 10 ) )
+    points.push( new THREE.Vector3(  5, 0, -10 ) )
+    points.push( new THREE.Vector3(  10, 0, 10 ) )
+
+    const geometry = new THREE.BufferGeometry().setFromPoints( points )
+
+    const polyline = new THREE.Line( geometry, material )
+
+    scene.add( polyline )
+
+    // convert polyline buffer geo to rhino polyline
+
+    doc = new rhino.File3dm()
+
+    const count = geometry.attributes.position.count
+    const rhinoPolyline = new rhino.Polyline()
+
+    for (let i = 0; i < count; i++) {
+
+        const x = geometry.attributes.position.getX(i)
+        const y = geometry.attributes.position.getY(i)
+        const z = geometry.attributes.position.getZ(i)
+
+        rhinoPolyline.add( x, y, z )
+
+    }
+
+    doc.objects().addPolyline( rhinoPolyline, null )
+
+     // hide spinner
+    document.getElementById('loader').style.display = 'none'
+
+    // enable download button
+    downloadButton.disabled = false
+
+}
+
+// BOILERPLATE //
+
+// download button handler
+function download() {
+    const options = new rhino.File3dmWriteOptions()
+    options.version = 8
+    let buffer = doc.toByteArrayOptions(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()
+  }
+
+function init () {
+
+    // Rhino models are z-up, so set this as the default
+    THREE.Object3D.DEFAULT_UP = 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()
+  }