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

Version 一覧 React : 18.2.0 Typescript : 4.9.3 three.js: 0.146.0 React-three-fiber : 8.9.1 react-three-drei : 9.45.0 web-ifc-three : 0.0.121 zustand : 4.1.4 gsap : 3.11.3 chakra-ui : 2.4.2 React appの立ち上げ まずは、Reactの新規アプリケーションを立ち上げます。今回はTypescriptも使用していこうと思いま ...

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

【Grasshopper Tutorial】 Folded Surface

概要 上画像がプログラムの全体像となっております。各ブロックごとに説明していこうと思います。 基準となる円弧を作成 Arcコンポーネントで半径3000、中心角度120度の円弧を生成します。 Perp Framesコンポーネントで生成した円弧に直行する平面を生成します。 作成した平面にArcコンポーネントで更に円弧を生成します。今回は、角度のドメインを20度～230度としています。 生成した円弧をDivide Curveコンポーネントで分割します。今回は14分割しております。 分割点のオフセット 生成した分 ...

ReadMore