【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 ...

ReadMore

【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 ...

ReadMore

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

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

ReadMore

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

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

ReadMore

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

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

ReadMore

【Grasshopper Tutorial】Surface Deformation Pattern

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

ReadMore

【Grasshopper Tutorial】 Falling Ball

概要 上画像がプログラムの全体像となっております。各ブロックごとに説明していこうと思います。 基準サーフェイスの生成 CenterBoxコンポーネントで直方体を生成します。各辺の長さは6×100×100としています。 Deconstruct Brepコンポーネントでサーフェイスに分割し、List Itemコンポーネント一番面積の大きい面を取得します。 基準サーフェイスを変形 生成したサーフェイスを面外方向に変形させていき、凹凸をつけていきます。Divide Surfaceコンポーネントでサーフェイスを分割 ...

ReadMore

【Three.js】 Popping Sphere Animation

準備 index.html, style.css, main.jsファイルを作成し、index.htmlとstyle.cssを以下の様なコードになります。 [ index.html ] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content ...

ReadMore

【Grasshopper Tutorial】 Japanese Folding Fan

概要 上画像がプログラムの全体像となっております。各ブロックごとに説明していこうと思います。 基準となる直線の生成 Construct Pointコンポーネントで(-2, 0, 0)の点を取得し、LineSDLコンポーネントで、その点をスタートとしてX方向に50伸びた直線を生成します。 Liner ArrayコンポーネントでZ方向に0.2ピッチで20本複製します。 基準線を扇状に回転 先ほど複製したした直線を扇状に回転させていきます。Rotateコンポーネントを用意し、回転の中心には(0,0,0)を接続し ...

ReadMore

【Grasshopper Tutorial】 Rubik's Cube

概要 上画像がプログラムの全体像となっております。各ブロックごとに、説明していこうと思います。 各キューブの中心点を作成 Squareコンポーネントで２×２のグリッドを作成し、頂点を取得します。 Linear Arrayコンポーネントで取得した頂点をZ方向に複製します。3点×3点×3点＝27点生成されたかと思います。これを各キューブの中心点としていきます。 回転させる点を囲うBoxを生成 XY平面・YZ平面・ZX平面、それぞれ3面回転させる面があるかと思います。1面を回転させるのに、9ブロックを回転させて ...

ReadMore

将来につながるスキル. 対象コースが￥1,600から