「three.js」タグアーカイブ

Web/App : HTML5 : Library

[three.js] CreateJSとの組み合わせ (2)

(4399 PV)
three.js と CreateJS を組み合わせてみるよ。 :boy:
CreateJS の上に three.js を重ねてるよ。three.js の背景を透過させてるのね。 :bouzu:

threejs_createjs2

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、SpriteMaterial, Sprite を使ってみた。 :girl:
んでもって、TextureLoader, Texture も使ったりして。 :beer:

CreateJSのスライダーで、直方体を回転できるようにしてるよ。 :sun:

続きを読む [three.js] CreateJSとの組み合わせ (2) →
Web/App : HTML5 : Library

[three.js] CreateJSとの組み合わせ (1)

(4308 PV)
three.js と CreateJS を組み合わせてみるよ。 :boy:
three.js の上に CreateJS を重ねてるよ。CreateJS の背景を透過させてるのね。 :bouzu:

threejs_createjs1

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、SpriteMaterial, Sprite を使ってみた。 :girl:
んでもって、TextureLoader, Texture も使ったりして。 :beer:

CreateJSのスライダーで、直方体を回転できるようにしてるよ。 :sun:

続きを読む [three.js] CreateJSとの組み合わせ (1) →
Web/App : HTML5 : Library

[three.js] 直方体 (5) ～辺と頂点と面～

(3572 PV)
three.jsを使って、直方体を作るよ。 :boy:

threejs_cuboid5

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、SpriteMaterial, Sprite を使ってみた。 :girl:
んでもって、TextureLoader, Texture も使ったりして。 :beer:

OrbitControls で、ぐるんぐるん動かせるようにしてみたよ。 :sun:

続きを読む [three.js] 直方体 (5) ～辺と頂点と面～ →
Web/App : HTML5 : Library

[three.js] 直方体 (4) ～辺と頂点～

(2612 PV)
three.jsを使って、直方体を作るよ。 :boy:

threejs_cuboid4

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、SpriteMaterial, Sprite を使ってみた。 :girl:
んでもって、TextureLoader, Texture も使ったりして。 :beer:

続きを読む [three.js] 直方体 (4) ～辺と頂点～ →
Web/App : HTML5 : Library

[three.js] 直方体 (3) ～辺と頂点～

(2721 PV)
three.jsを使って、直方体を作るよ。 :boy:

threejs_cuboid3

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、FontLoader, TextGeometry, MeshBasicMaterial, Mesh を使ってみた。 :girl:

続きを読む [three.js] 直方体 (3) ～辺と頂点～ →
Web/App : HTML5 : Library

[three.js] モデル (5) ～ねぎ振りミク (影付き)～

(3111 PV)
three.jsを使って、モデルを作るよ。 :boy:

threejs_model5

WebGLRendererで描画するよ。
ColladaLoader を使ってみたよ。 :bouzu:

さらに、DirectionalLight も使ったよ。 :cake: 　影もつけてみたよ。
レンダラー、ライト、影を落とす物体、影を落とされる物体の4つに設定が必要だよ！ :beer:

OrbitControls で、ぐるんぐるん動かせるようにしてみたよ。 :sun:

@rect 先生 :hakase: の「note.x ｜ [Papervision3D]ねぎ振り完了」から、Colladaデータとテクスチャをダウンロードさせていただきました。 :doki:

続きを読む [three.js] モデル (5) ～ねぎ振りミク (影付き)～ →
Web/App : HTML5 : Library

[three.js] 座標系 (2)

(4186 PV)
three.jsを使って、座標系について調べてみるよ。 :boy:

threejs_coordinates2

three.jsは、右手座標系でY軸上向きだよ！ :cake:
OrbitControls で、ぐるんぐるん動かせるようにしてみたよ。 :sun:

X軸(正値)は赤色、Y軸(正値)は緑色、Z軸(正値)は青色。ライトの位置(方角)は黄色。オブジェクト正面に黄色の矩形を配置。

続きを読む [three.js] 座標系 (2) →
Web/App : HTML5 : Library

[three.js] ライト (8) ～SpotLight, castShadow～

(1564 PV)
three.jsを使って、ライトについて調べてみるよ。 :boy:

threejs_light8

SpotLight を調べてみたよ。 :cake: 　影をつけてみるよ。
レンダラー、ライト、影を落とす物体、影を落とされる物体の4つに設定が必要だよ！ :beer:

@rect 先生 :hakase: の「note.x ｜ [Papervision3D]ねぎ振り完了」から、Colladaデータとテクスチャをダウンロードさせていただきました。 :doki:

続きを読む [three.js] ライト (8) ～SpotLight, castShadow～ →
Web/App : HTML5 : Library

[three.js] ライト (7) ～DirectionalLight, castShadow～

(1655 PV)
three.jsを使って、ライトについて調べてみるよ。 :boy:

threejs_light7

DirectionalLight を調べてみたよ。 :cake: 　影をつけてみるよ。
レンダラー、ライト、影を落とす物体、影を落とされる物体の4つに設定が必要だよ！ :beer:

@rect 先生 :hakase: の「note.x ｜ [Papervision3D]ねぎ振り完了」から、Colladaデータとテクスチャをダウンロードさせていただきました。 :doki:

続きを読む [three.js] ライト (7) ～DirectionalLight, castShadow～ →
Web/App : HTML5 : Library

[three.js] 地球儀 (4)

(2324 PV)
three.jsを使って、地球儀を作るよ。 :boy:

threejs_earth4

WebGLRendererで描画するよ。
SphereGeometry, MeshPhongMaterial, Mesh を使ってみたよ。 :bouzu:

さらに、DirectionalLight も使ったよ。 :cake:
んでもって、TextureLoader, CubeTextureLoader, Texture も使ったりして。 :beer:

続きを読む [three.js] 地球儀 (4) →
Web/App : HTML5 : Library

[three.js] 地球儀 (3)

(1745 PV)
three.jsを使って、地球儀を作るよ。 :boy:

threejs_earth3

WebGLRendererで描画するよ。
SphereGeometry, MeshPhongMaterial, Mesh を使ってみたよ。 :bouzu:

さらに、DirectionalLight も使ったよ。 :cake:
んでもって、TextureLoader, Texture も使ったりして。 :beer:

続きを読む [three.js] 地球儀 (3) →
Web/App : HTML5 : Library

[three.js] 地球儀 (2)

(1674 PV)
three.jsを使って、地球儀を作るよ。 :boy:

threejs_earth2

WebGLRendererで描画するよ。
SphereGeometry, MeshPhongMaterial, Mesh を使ってみたよ。 :bouzu:

さらに、DirectionalLight も使ったよ。 :cake:
んでもって、TextureLoader, Texture も使ったりして。 :beer:

続きを読む [three.js] 地球儀 (2) →
Web/App : HTML5 : Library

[three.js] 地球儀 (1)

(2220 PV)
three.jsを使って、地球儀を作るよ。 :boy:

threejs_earth1

WebGLRendererで描画するよ。
SphereGeometry, MeshPhongMaterial, Mesh を使ってみたよ。 :bouzu:

さらに、DirectionalLight も使ったよ。 :cake:
んでもって、TextureLoader, Texture も使ったりして。 :beer:

続きを読む [three.js] 地球儀 (1) →
Web/App : HTML5 : Library

[three.js] ライト (6) ～HemisphereLight～

(1509 PV)
three.jsを使って、ライトについて調べてみるよ。 :boy:

threejs_light6

HemisphereLight を調べてみたよ。 :cake: 　半球光源(空と地面)というものらしい。

@rect 先生 :hakase: の「note.x ｜ [Papervision3D]ねぎ振り完了」から、Colladaデータとテクスチャをダウンロードさせていただきました。 :doki:

続きを読む [three.js] ライト (6) ～HemisphereLight～ →
Web/App : HTML5 : Library

[three.js] ライト (5) ～SpotLight～

(1744 PV)
three.jsを使って、ライトについて調べてみるよ。 :boy:

threejs_light5

SpotLight を調べてみたよ。 :cake: 　いわゆるスポットライトらしい。

@rect 先生 :hakase: の「note.x ｜ [Papervision3D]ねぎ振り完了」から、Colladaデータとテクスチャをダウンロードさせていただきました。 :doki:

続きを読む [three.js] ライト (5) ～SpotLight～ →