STUDIO TAMA -

【Grasshopper-Three.js】Grasshopperで作成したモデルのブラウザでの表示と更新

概要トップにある画像が全体の流れになります。といった流れになります。 step4のDraco圧縮はNode.jsを使って行ってますが、food4Rhinoの以下のアドオンを使用すればstep2でfbxで出力せず、そのままDraco圧縮をかけたモデルを出力できます。しかし、非推奨になってしまっていたので今回は使用しませんでした。（いちおまだ使うことはできるようです。） food4Rhino : GLTF-BINEXPORTER (DEPRECATED) Step1 : Grasshopperでモデル作 ...

【Grasshopper Tutorial / 3D Printing 】Wavy Bowl

概要上画像がプログラムの全体像となっております。各ブロックごとに説明していきます。ベースとなる円を生成生成した円を回転させる縮小した円を生成する表面の波の基準となる曲線を生成曲線を結びサーフェイスを生成する生成したサーフェイスを縮小完成リンク

【Grasshopper Tips】 Broken Sphere

概要上画像がプログラムの全体像となっております。各ブロックごとに解説していきます。基準となる球体生成とVoronoi3D生成円とVoronoiの共通部分を抽出分割されたBrepの縮小する完成

【Grasshopper Tutorial】Circle Packing

概要上画像がプログラムの全体像です。各ブロックごとに説明していきます。 Circle Packing voronoiを使用したパターン 1/2 voronoiを使用したパターン 2/2 LunchBoxを使ったパターン① LunchBoxを使ったパターン② Stream Filterでオブジェクトを切替各曲線を内側にオフセット曲線間にサーフェイスを生成完成

【Grasshopper - Three.js】Gallery

概要使っている言語などは以下になります。 Next.js 12.3.1 React 18.2.0 Three.js 0.145.0 Typescript 4.8.4 Chakra-ui 2.3.5 Vercel 将来的にページを増やしていくかなと思いNext.jsを使用しています。 Three.jsはReact Three Fiberを使った方が相性はいいかなと思いますが、これを作った時に私がR3Fを使えていなかったので、通常のThree.jsを使用しております。ボタンやモーダルはフレームワークCha ...

【Three.js-IFC.js】React Three Fiberを使用してifcデータを読み込む

Version 一覧 React appの立ち上げまずは、Reactの新規アプリケーションを立ち上げます。今回はTypescriptも使用していこうと思います。ターミナルで以下を実行します。 npx create-react-app ifc-viewer --template typescript 作成したアプリのディレクトリに移動してローカルサーバーを立ち上げます。http://localhost:3000 にアクセスし、以下の画面が立ち上がればOKです。 cd ifc-viewer npm run ...

【Grasshopper / Three.js】Grasshopperで作成したモデルをReact Three Fiberを使ってブラウザで表示するまで

今回表示するモデル今回ブラウザで表示するのは、以前GrasshopperとMonocerosというプラグインを使用して作成したモデルを使用します。作り方、ご興味あれば以下のリンクからのぞいてみてください。こちらのデータはメッシュ化した後、joinして単一メッシュにしていおります。この状態で現状18MBあります。ブラウザに持っていくにはちょっと重たいですね。このままではロード時間もかかってしまうので、まずはこちらのモデルを軽量化していきます。 Draco圧縮をかける React Three Fiber ...

【Grasshopper Tutorial】Elefrontを使用して属性情報を扱う(Part2 : モデルから属性情報の取得 / 単品図作成）

概要上画像がPart2のプログラム全体像です。各ブロックごとに説明していこうと思います。 Rhinocerosからモデル取得しID順に並べ替え ※データツリーの操作がメインになってきます。PanelコンポーネントでTree構造を確認しながら理解して進めていただければと思います。 ReferencebyLayerコンポーネントで指定したレイヤに含まれるオブジェクトを取得します。前回panelというレイヤにBakeしたので、panelという文字列を接続し、前回Bakeしたサーフェイスを取得します。取得した ...

【Grasshopper Tutorial】Elefrontを使用して属性情報を扱う(Part1 : モデリング / 属性情報を持たせたBake）

概要上画像がPart1のプログラムの全体となっております。各ブロックごとに説明していきたいと思います。曲面を構成する基準線を作成 Circleコンポ―ネントで半径3000mm, 1000mmの2つの円を生成します。 Divideコンポーネントで生成した2つの円を50分割していきます。これらの分割点を波打たせていきます。 List Lengthコンポーネントで分割点の数を取得します。 Rangeコンポーネントで外円は360度×3＝1080度、内円は360度×4＝1440度を分割点の数で分割した角度を取 ...

【Grasshopper Tutorial】Surface Deformation Pattern

概要上画像がプログラムの全体像となっております。各ブロックごとに説明していきます。基準となる点を生成 Rectanglarコンポーネントでグリッドを作成します。今回は、1マス1×1で100マス×100マスのグリッドを作成しました。 Rectanglarコンポーネントの出力端子Pから、グリッドの交点を取得し、Pointコンポーネントに格納します。101点×101点で10201点取得できるかと思います。取得した点のリストをFlattenしときます。これらの点を移動させ、最終的にサーフェイス化していきます ...