rhino3dm.js sample - Threejs mesh position was incorrect

rhino3dm/js/SampleJSMakeBrep/index.html

@@ -56,6 +56,7 @@
         <div id="overlay">
             <button id="sphereButton">Add Sphere</button>
             <button id="boxButton">Add Box</button>
+            <button id="cylinderButton">Add Cylinder</button>
             <button id="downloadButton" disabled>Download</button>
         </div>
     </div>

rhino3dm/js/SampleJSMakeBrep/script.js

@@ -32,6 +32,10 @@ const boxButton = document.getElementById("boxButton")
 boxButton.addEventListener('click', ()=>{
     createObject('box')
 })
+const cylinderButton = document.getElementById("cylinderButton")
+cylinderButton.addEventListener('click', ()=>{
+    createObject('cylinder')
+})
 
 const downloadButton = document.getElementById("downloadButton")
 downloadButton.disabled = true
@@ -69,6 +73,15 @@ doc.materials().add(magentaMaterial)
 
 const magentaThreeMaterial = new THREE.MeshPhysicalMaterial( {color:0xff00ff, metalness:0.2, roughness: 0.9} )
 
+const greenMaterial = new rhino.Material()
+greenMaterial.toPhysicallyBased()
+greenMaterial.physicallyBased().baseColor = { r: 0, g: 1, b: 0, a: 0 }
+greenMaterial.physicallyBased().metallic = 0.2
+greenMaterial.physicallyBased().roughness = 0.9
+doc.materials().add(greenMaterial)
+
+const greenThreeMaterial = new THREE.MeshPhysicalMaterial( {color:0x00ff00, metalness:0.7, roughness: 0.9} )
+
 console.log(doc.materials().count)
 
 // #endregion MATERIALS //
@@ -79,7 +92,7 @@ const main_layer_index = doc.layers().addLayer( 'Objects', { r: 255, g: 255, b:
 const main_layer = doc.layers().findIndex(main_layer_index)
 const main_layer_id = main_layer.id
 
-const brep_layer_index = doc.layers().addLayer( 'Breps', { r: 255, g: 0, b: 0, a: 255 } )
+const brep_layer_index = doc.layers().addLayer( 'Spheres', { r: 255, g: 0, b: 0, a: 255 } )
 const brep_layer = doc.layers().findIndex(brep_layer_index)
 brep_layer.parentLayerId = main_layer_id
 brep_layer.renderMaterialIndex = 0
@@ -89,6 +102,11 @@ const ext_layer = doc.layers().findIndex(ext_layer_index)
 ext_layer.parentLayerId = main_layer_id
 ext_layer.renderMaterialIndex = 1
 
+const cyl_layer_index = doc.layers().addLayer( 'Cylinders', { r: 0, g: 255, b: 0, a: 255 } )
+const cyl_layer = doc.layers().findIndex(cyl_layer_index)
+cyl_layer.parentLayerId = main_layer_id
+cyl_layer.renderMaterialIndex = 2
+
 // #endregion LAYERS //
 
 // #region CALL //
@@ -108,7 +126,7 @@ function createObject(objectType) {
     downloadButton.disabled = false
 
     let geometry
-    let rhinoObject, rhinoMesh, result
+    let rhinoObject, rhinoMesh, result, xform
     const oa = new rhino.ObjectAttributes()
     oa.materialSource = rhino.ObjectMaterialSource.MaterialFromLayer
 
@@ -117,23 +135,26 @@ function createObject(objectType) {
     const yDim = 100
     const zDim = 100
     const dim = Math.random() * 20
+    const halfDim = dim/2
     const x = Math.random() * xDim * (Math.random() > 0.5 ? 1 : - 1)
     const y = Math.random() * yDim * (Math.random() > 0.5 ? 1 : - 1)
     const z = Math.random() * zDim * (Math.random() > 0.5 ? 1 : - 1)
 
+    console.log( [ x, y, z ] )
+
     let material = null
 
     switch (objectType) {
         case 'sphere':
 
             geometry = new THREE.SphereGeometry( dim, 32, 32 )
-            geometry.translate( x, y, z )
+            geometry.translate( x, z, -y )
 
             rhinoMesh = rhino.Mesh.createFromThreejsJSON( { data: geometry } )
 
-            rhinoObject = rhino.Brep.createFromSphere( new rhino.Sphere( [ x, y, z ], dim ) )
+            const sphere = new rhino.Sphere( [ x, y, z ], dim )
+            rhinoObject = rhino.Brep.createFromSphere( sphere )
             result = rhinoObject.faces().get(0).setMesh( rhinoMesh, rhino.MeshType.Render )
-            //console.log( result ) 
 
             oa.layerIndex = brep_layer_index
 
@@ -143,15 +164,13 @@ function createObject(objectType) {
 
         case 'box':
 
-            const halfDim = dim/2
-
             geometry = new THREE.BoxGeometry( dim, dim, dim, 1, 1, 1 )
-            geometry.translate( x, y, z )
+            geometry.translate( x, z, -y )
 
             const rhinoBox = new rhino.Box( new rhino.BoundingBox( [ -halfDim, -halfDim, -halfDim ], [ halfDim, halfDim, halfDim ] ) )
             rhinoObject = rhino.Extrusion.createBoxExtrusion( rhinoBox, true )
 
-            const xform = rhino.Transform.translationXYZ(x, y, z)
+            xform = rhino.Transform.translationXYZ(x, y, z)
             rhinoObject.transform( xform )
 
             rhinoMesh = rhino.Mesh.createFromThreejsJSON( { data: geometry } )
@@ -161,6 +180,24 @@ function createObject(objectType) {
 
             material = magentaThreeMaterial
 
+            break
+
+        case 'cylinder':
+
+            geometry = new THREE.CylinderGeometry( dim, dim, dim, 32 )
+            geometry.translate( x, z + halfDim, -y)
+
+            const circle = new rhino.Circle([ x, y, z ], dim)
+            const cylinder = new rhino.Cylinder(circle, dim)
+            rhinoObject = rhino.Brep.createFromCylinder( cylinder, true, true )
+
+            rhinoMesh = rhino.Mesh.createFromThreejsJSON( { data: geometry } )
+            result = rhinoObject.faces().get(0).setMesh( rhinoMesh, rhino.MeshType.Render )
+
+            oa.layerIndex = cyl_layer_index
+
+            material = greenThreeMaterial
+
             break
     }
 
@@ -184,6 +221,8 @@ function createObject(objectType) {
 
 function init() {
 
+    THREE.Object3D.DEFAULT_UP = new THREE.Vector3(0,0,1)
+
     renderer = new THREE.WebGLRenderer({ antialias: true })
     renderer.setPixelRatio(window.devicePixelRatio)
     renderer.setSize(window.innerWidth, window.innerHeight)