JOB STAGE
デザイナー・クリエイター専門の求人情報サイト ジョブステージ

vol.1 まずは簡単なサンプルを作ろう!|three.js 入門|基本から解説!

「three.js」に興味あるWebデザイナーさん、コーダーさん、エンジニアさんに向けて、「three.js 入門 基本から解説!」を開始します!通信速度が理論値で100倍も速くなると言われる、第5世代モバイル通信「5G」。5G時代にはWebサイトの作り方も大きく変わっていくと予想されています。

3DCGライブラリと一般的に注目されている、three.js。Web業界のクライアントワークで3DでWebサイトを構築する案件は多くありません。しかしながら、画像、動画に今までにはできなかったエフェクト、アニメーションを実装できることに注目を浴び、世界に目をむければ「three.js」を使用したエフェクト、アニメーションを実装したウェブサイトが、どんどん公開されはじめています。

そこでJob Stageは「three.js」入門編を皆様にむけて展開していきます。
初回のvol.1は、「three.js」の基本中の基本を解説!
興味ある方は是非ご一読ください。

three.js公式サイト見たことない方はこちらから公式サイトをご覧ください。

最初にサンプルをご覧ください!

今回のサンプルを最初に、こちらからご覧ください。

グリーン色が一面に表示されています。ちなみにJob StageのロゴはHTML上でレイアウトしているので、three.jsには関係ありません。

この設定方法を今回は理解していきましょう。グリーン色を全面に表示するだけでも今までのHTML、CSSとは全く違ったコードの書き方になります。基本中の基本なので、必ず理解してくださいね。

three.jsの基本的な設定

まず、three.jsを読み込みます。(cdnjsにアップされています。)cdnjsはこちらから。HTML上で読み込むだけで設定完了です。jQueryもTweenMaxも現段階では必要ありません。

次に、基本的な流れを理解しましょう。
1. ステージを作成
2. カメラを作成
3. レンダラーを作成
この流れです。

1.ステージを作成

最初に、ステージを作成する必要があります。IllustratorやPhotoshopに例えると「新規ドキュメント」の作成にあたります。この3D空間のステージにオブジェクトをレイアウトしていくのです。

2.カメラを作成

IllustratorやPhotoshopと異なるのはステージを作成しても何も表示されません。そのステージを写すカメラの設定が必要になってきます。

3.レンダラーを作成

次に設定したカメラを「WebGLRenderer」「CanvasRenderer」のどちらで映し出すか?設定する必要があります。「three.js 入門」では「WebGLRenderer」を使用していきます。この耳慣れない「WebGLRenderer」「CanvasRenderer」の違いは
「WebGLRenderer」・・・GPUで演算を行うため、3Dグラフィックス処理において実行速度が早い。
「CanvasRenderer」・・・一般的に2Dグラフィックスを描画するときに使用する。
といった違いがあります。
よほどのことがない限り「WebGLRenderer」で問題ありません。

まとめ

最後に完成したJSファイルをこちらからご覧ください。

コメントで1つ1つのコードに解説を書いています。

公開日:
最終更新日:

PICK UP!

ピックアップ!注目企業を紹介!

株式会社オートグラフ
Studio assistant

スタジオアシスタント(スタジオマン)求人 募集!

DÉE / SOUTH EAST
Coder HTML/CSS/Javascript

コーダー求人 募集!

ネンデザイン株式会社
Assistant Graphic Designer

アシスタントグラフィックデザイナー(1-2年の経験、新卒可)求人 募集!

ネンデザイン株式会社
General Affairs

総務 / 事務求人 募集!

株式会社タイムシェア
Web Designer & Graphic Designer

Webデザイナー・グラフィックデザイナー求人 募集!

東京平版株式会社
Graphic Designer

グラフィックデザイナー求人 募集!

JOB STAGE

Job Stageについて

ジョブステージは、デザイナー・クリエイターの為の求人サイトです。グラフィックデザイン・広告業界・DTP業界、Web業界、フォトグラファー・撮影業界、映像・動画業界、編集・出版業界、プロダクトデザイン業界、建築・インテリア業界、ゲーム業界等の求人情報を掲載中!デザイナー・クリエイターのプロフェッショナルの為に求人広告を毎日更新で掲載しています。御陰さまでジョブステージは2005年6月1日より運営開始、2023年で運営19年目を迎える運びとなりました。各業界のお仕事をお探しの方は、ジョブステージをどうぞご利用ください。

  • FOLLOW US
  • twitter
  • facebook

Renewal Campaign!

採用担当者様、掲載お申込みはこちらから
現在、リニューアルキャンペーン開催中!7週間、無料で掲載できます! 先着30社様迄!
J
白いサークル
※過去にJob Stageをご利用されてない企業様に限ります