From 083bca90f8ee3df489e4807679a5070294358ed3 Mon Sep 17 00:00:00 2001 From: fraguada Date: Tue, 15 Oct 2024 16:21:43 +0200 Subject: [PATCH] rhino3dm.js sample - Threejs mesh position was incorrect --- rhino3dm/js/SampleJSMakeBrep/index.html | 1 + rhino3dm/js/SampleJSMakeBrep/script.js | 57 +++++++++++++++++++++---- 2 files changed, 49 insertions(+), 9 deletions(-) diff --git a/rhino3dm/js/SampleJSMakeBrep/index.html b/rhino3dm/js/SampleJSMakeBrep/index.html index 4883346a..c762ddc2 100644 --- a/rhino3dm/js/SampleJSMakeBrep/index.html +++ b/rhino3dm/js/SampleJSMakeBrep/index.html @@ -56,6 +56,7 @@
+
diff --git a/rhino3dm/js/SampleJSMakeBrep/script.js b/rhino3dm/js/SampleJSMakeBrep/script.js index 4333e6f4..4ed9db80 100644 --- a/rhino3dm/js/SampleJSMakeBrep/script.js +++ b/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)