3D初心者の俺がThree.jsの基本をオススメ本とともにザーッとおさらいする記事 - Qiita
WebGL Advent Calendar 2014の13日目の記事です。 3Dのスキルなんてものは1mmもないわたくしが、お勉強したログをまとめてみます。 Three.jsのバージョンは68時点のものです。 参考にしたもの three.jsのドキュメント three.jsのサンプル three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実現するOpenGL(WebGL)の世界 ドキュメントとサンプルがしっかりしてるので、それだけでも事足りそうだけど、本を読んだほうが早い。記事中で上巻と書いているのはこの本のことです。ただし、2013年9月に出版されたものなので、ちょっと古いところもあります。 Three.jsの超基本 こんなノリだと動く！ renderer作成 scene作成 camera作成 lightをsceneに置く meshをsceneに置く meshは素材のma
Three.jsの使いそうなマテリアル - のぐそんブログ
Three.jsで使いそうなマテリアルです。 MeshBasicMaterial 面用のマテリアル。 陰がつかないので塗りつぶした状態になる。 new THREE.MeshBasicMaterial({color: 0x66B6FF}); MeshLambertMaterial 面用のマテリアル。 陰が表示される為奥行きがでる。 光沢は無し。 new THREE.MeshLambertMaterial({color: 0x66B6FF}); MeshPhongMaterial 面用のマテリアル。 陰が表示される為奥行きがでる。 光沢ありなので、emissive(影色)、shininess(光沢度合い)、specular(光沢部の色)を設定できる。 new THREE.MeshPhongMaterial({color: 0x66B6FF,specular: 0xffffff}); MeshF
Three.js TextGeometry （3Dテキスト表示） - Three.jsを使って、作ってみた
今回は、Three.jsの「TextGeometry 」について書きます。 こちらは、3Dのテキストを表示させることができるジオメトリ （形状）です。 こんなのが表示できます。 横から見ると、 こんな感じです。 TextGeometryを使用するには、気をつけることが、一つあります。 TextGeometryを使うには、typeface.js形式のフォントファイルを読み込む必要があります！ typeface.js形式のフォントファイルは、Three.jsダウンロードフォルダ内の examples/fonts/〜typeface.js にあります。 6,7種類あると思います。 で、Three.jsのファイル読み込み後に、 <script src="helvetiker_bold.typeface.js"></script> を追加してください。今回は、helvetiker_bold.type
three.jsの組み込みuniform/attributeの紹介 - Qiita
この記事は、Three.js Advent Calendar 2016 8日目の記事です。 はじめに みなさんはthree.jsのカスタムシェーダを使った経験はありますか？ three.jsでは、THREE.ShaderMaterialからカスタムシェーダを利用できます。具体的にはTHREE.ShaderMaterialのコンストラクタで頂点シェーダとフラグメントシェーダを指定してMaterialを生成できます。 THREE.ShaderMaterialと似たようなクラスにTHREE.RawShaderMaterialがあります。 THREE.ShaderMaterialではビルドインのuniform/attributeの定義がシェーダの先頭に挿入されますが、THREE.RawShaderMaterialでは挿入されないという違いがあります。 three.jsでカスタムシェーダをバリバリ使
threejsでGLSLをいじるための基礎知識 - Qiita
バーテックスシェーダーでは全部使える。 フラグメントシェーダーでは,viewMatrixとcameraPositionのみ使える。 フラグメントシェーダー側で使うときはバーテックスシェーダ内でvarying変数に一旦いれたりする。vUv=vu; みたいな感じで。 threejsからuniform/attributeを渡すとき指定する文字列(type) よくつかいそうなのは i (整数) f (float) v2 (THREE.Vector2) v3 (THREE.Vector3) v4 (THREE.Vector4) c (THREE.Color) m4 (THREE.Matrix4) t (THREE.Texture) var uniformsExample = { "uInt" : { type: "i", value: 1 }, // single integer "uFloat"
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022
WebGL - これがGPUの力！Three.jsによる“リアルタイム”なレイトレーシング - Qiita
これはWebGL Advent Calendar 15日目の記事です。 【2016/01/29 追記】続編である「これがGPUの力！three.jsによる“リアルタイム”なレイトレーシング 〜宝石編〜」を公開しました。 はじめに Three.jsからGPUをつかって、リアルタイムなレイトレーシングを実装できたので紹介します。 iPhone6などの携帯端末でも動作するくらい軽量です。次のリンクから動作の様子をご覧になってください！ Reflect カラフルな球体に周囲の球体や床を鏡面反射させました。 マウス移動によって、上からの視点にもできます。 無数の球体がずら〜っと並ぶ様子は、ちょっと壮観ですね！？ 一般的にレイトレーシングを行うためには、膨大な計算が必要です。 ソフトウェアで実装した場合、数個の球体を配置しただけでもリアルタイムに処理するのは困難です。 2010年の記事によると、For
Three.jsのGPGPUのサンプルが難しすぎるから解体して勉強してみる - Qiita
概要 本エントリーはGPUパーティクルを飛ばすために筆者が勉強した軌跡です。 本エントリーの対象者 シェーダーが何なのかは知ってる ちょっとくらいならGLSL書いたことある だけどGPUに演算をさせるのはやったことない サンプルのスクリプトがわけわからん こんな人を想定して書いてます。 GLSLについての基本中の基本については解説しません。 そこらへんがまだわからない方は本エントリーについてはさらっと目をとおして、 初心者向けの学習資料を読み漁ってください！ GPGPUでパーティクルたくさん飛ばしたいからサンプルを覗いてみる three.jsの素晴らしいサンプル達 https://threejs.org/examples/webgl_gpgpu_birds.html https://threejs.org/examples/webgl_gpgpu_protoplanet.html http
Add Three.js Shape to Simulate Alertor
Follow @coldwood A couple of customers asked me how to add THREE.js shapes to simulate the scenario with an shining alertor to indicate the emergent issue or something malfunction. It is simple to add THREE.js shape to Forge Viewer and set an interval to change the material or other attributes of THREE.js shape. The only trick is when the shape is updated, call invalidate with the arguments below,
Three.js対応。Webブラウザ上で3Dモデルを作成·ThreeFab MOONGIFT
ThreeFabはTree.jsに対応した3DモデルをWebブラウザ上で作成できるソフトウェアです。 Three.jsはJavaScriptで高度な3Dモデルを描画するエンジンですが、そのモデル作成はやはり大変な作業になります。そこで使ってみたいのがThreeFabになります。 最初の画面です。3Dモデルが奇麗に描かれていて格好いいです。 マウスで視点の変更もできます。 モデルを追加できます。 回転したりライトを変更することもできます。 最終的に作成されるコードを使ってThree.jsで3Dモデルを描けます。 こんな感じにモデルを追加していきます。 ThreeFabを使えばThree.jsで使えるモデルをWebブラウザ上で作成できます。S、D、X、スペースキーがそれぞれショートカットキーとして使えます。最初、慣れるまではなかなか操作が難しいかも知れません。ThreeFabはさらにアニメーシ
three.js wiki
ジオメトリ (プリセット)TextGeometry[テキスト]日本語フォント PlaneGeometry[平面] CircleGeometry[円] CubeGeometry[直方体] SphereGeometry[球] CylinderGeometry[円柱] TorusGeometry [トーラス(ドーナツ)] TorusKnotGeometry [トーラス結び目] LatheGeometry[回転体] ConvexGeometry[凸包] TetrahedronGeometry[正4面体] OctahedronGeometry[正8面体] IcosahedronGeometry[正20面体] PolyhedronGeometry[多面体] TubeGeometry[管] ParametricGeometry [パラメトリック曲面] ExtrudeGeometry[] ShapeGeo
【旧版】Three.js入門 (全14回) - プログラミングならドットインストール
WebGLをサポートする3D描画ライブラリ、Three.jsについて学んでいきます。
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
javascript - How can you add text to the Forge Viewer with three.js? - Stack Overflow
The Building Coder: Adding Custom Geometry to the Forge Viewer
Cloud and Mobile: THREE.js
three.js - how to calculate area and volume using svf file in forge viewer - Stack Overflow
ThreeFab | Three.js fabrication tool
Renault Espace Visualization
three.js - examples