タグ

three.jsに関するken1206のブックマーク (3)

  • Three.jsの勉強の仕方 - Qiita

    概要 Three.jsの勉強を始めて半年くらいが経過しました。 現在は、以下のようなアプリケーションを作成できるようになりました。 https://nemutas.github.io/r3f-normal-color/ ここまでに至る過程を少しまとめられたらと思います。 React Three Fiber について 私は主に、React Three Fiber(Three.jsをReact用にラッパーしたライブラリ|以下、R3F)を使用して開発してます。 バニラのThree.jsを触る前に、つまりThree.jsの知識がゼロの状態のときからR3Fを使い始めました。 とてもよく設計されたライブラリで、ほんの数行でBoxを表示することができます。 ただし、よく設計されているということは、それほど抽象化されているということです。学び始めの頃は自分が作りたいシーンを作るために、どのプロパティをいじ

    Three.jsの勉強の仕方 - Qiita
  • 『Three.jsとBlenderによるWebGL』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。 html5、javascript、flashなどのクライアント開発を メインに担当しております、 菅家(@KA_ka_YY)と申します。 弊社3月に行われました、エンジニア、デザイナーを対象とした アプリコンテストというイベントにて WebGLを使用した野球盤ゲームを作成しました。 その際利用したThree.js(WebGLのjavascriptライブラリ)を用いた WebGLの使用方法を紹介させていただこうと思います。 (1)レンダリングまずは Blender というフリーの3Dモデリングソフトで 以下のようなキャラクターを作りました

    『Three.jsとBlenderによるWebGL』
  • デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。 前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。 従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。 今回は実際にWebGLを使った3D表現にチャレンジしてみます。 JavaScriptで記述しますが、初心者向けにまとめたのでノンプログラマやデザイナーの方にもチャレンジしてほしいです!実際にコード書くところは5分(早い人なら1分)でできると思います。 そもそもWebGLとは PC上で3Dを描画するための技術にOpenGLというものがあります。OpenGLは3DグラフィックスAPIとも呼ばれていて、様々なプラットフォームに対応しており、広く普及しています。 このOpenGLをWe

    デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 1