JavaScript Console

JavaScript コンソール ホーム目次

三次元描画 - canvas(WebGL) three.js

　three.js を利用した三次元描画をサンプルプログラム付きで簡単に紹介します (three.js の全ての機能を紹介しているわけではありません)。

インデックス

三次元描画概要

カメラ 　OrthographicCamera 　PerspectiveCamera

トラックボール操作 　OrthographicTrackballControls
　　　　　　　　　　TrackballControls

光源　AmbientLight 　DirectionalLight 　HemisphereLight
　　　　PointLight 　SpotLight

形状　BoxGeometry 　CircleGeometry 　CylinderGeometry
　　　　DodecahedronGeometry 　IcosahedronGeometry
　　　　OctahedronGeometry 　PlaneGeometry 　RingGeometry
　　　　SphereGeometry 　TetrahedronGeometry 　TorusGeometry
　　　　TorusKnotGeometry

物性　MeshPhongMaterial 　MeshLambertMaterial
　　　　MeshNormalMaterial 　MeshBasicMaterial 　パラメータ

三次元描画概要

　実行結果表示エリア(コンソール)には、640x400 ピクセルのグラフィック表示ができる領域があります。以降のサンプルでは、この領域に DOM 要素を追加して、グラフィック表示します。

　三次元描画では、以下の設定をする必要があります。

シーンの作成
カメラの作成
ブラウザに描画域追加
光源の作成
物体（形状と物性）の作成
描画の処理

　以降のサンプルは、▶ Run ボタンを押すことで、実行画面を消去後、プログラムを実行します。

var scene = new THREE.Scene();		// シーン作成
					// カメラ作成
var width = 640;			// 画面 横サイズ
var height = 400;			// 画面 縦サイズ
var camera = new THREE.PerspectiveCamera(90, width / height, 1, 100);	// 透視投影
    camera.position.set(0, 0, 2);	// カメラ位置
					// レンダラー追加
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);	// 画面 サイズ
document.getElementById('jscthreed').appendChild(renderer.domElement);	// DOM 要素追加
					// 光源作成
var lcolor = 'white';			// 光源の色
var directionalLight = new THREE.DirectionalLight(lcolor);	// 平行光源
    directionalLight.position.set(0, 0, 1);	// 光源の方向
scene.add(directionalLight);		// シーンに追加
					// 物体作成
var geometry = new THREE.BoxGeometry(1, 1, 1);	// 物体の形状：立方体
var mcolor = { color: 'orange' };	// 物体の色
var material = new THREE.MeshPhongMaterial(mcolor);	// 物体の表面
var mesh = new THREE.Mesh(geometry, material);	// 物体
    mesh.position.set(0, 0, 0);		// 物体の位置
scene.add(mesh);			// シーンに追加
					// 描画処理
renderer.render(scene, camera);		// 描画
( function renderloop () {		// 描画ループ
  jscrequestanimationid = requestAnimationFrame(renderloop);
  mesh.rotation.set(mesh.rotation.x + 0.01, mesh.rotation.y + 0.02, mesh.rotation.z + 0.03);	// 物体の回転
  renderer.render(scene, camera);	// 再描画
} )();

カメラ

OrthographicCamera

　OrthographicCamera は、平行投影を行うカメラです。
平行投影では、手前の物と奥の物が同じ大きさに描画されます。

OrthographicCamera( left, right, top, bottom, near, far )

left : 左側のクリッピング面
right : 右側のクリッピング面
top : 上側のクリッピング面
bottom : 下側のクリッピング面
near : 手前側のクリッピング面
far : 奥側のクリッピング面

var scene = new THREE.Scene();

var width = 640;
var height = 400;
var camera = new THREE.OrthographicCamera(width / -200, width / 200, height / 200, height / -200, 1, 100);	// 平行投影カメラ
    camera.position.set(0, 0, 10);	// カメラ位置

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var directionalLight = new THREE.DirectionalLight('white');
    directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var mcolor = { color: 'orange' };
var material = new THREE.MeshPhongMaterial(mcolor);
var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
scene.add(mesh);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  mesh.rotation.set(mesh.rotation.x + 0.01, mesh.rotation.y + 0.02, mesh.rotation.z + 0.03);
  renderer.render(scene, camera);
} )();

PerspectiveCamera

　PerspectiveCamera は、透視投影を行うカメラです。
透視投影では、手前の物は大きく、奥の物は小さく描画されます。

PerspectiveCamera( fov, aspect, near, far )

fov : カメラの画角
aspect : カメラの縦横比
near : 手前側のクリッピング面
far : 奥側のクリッピング面

var scene = new THREE.Scene();

var width = 640;
var height = 400;
var camera = new THREE.PerspectiveCamera(90, width / height, 1, 100);	// 透視投影カメラ
    camera.position.set(0, 0, 2);	// カメラ位置

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var directionalLight = new THREE.DirectionalLight('white');
    directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var mcolor = { color: 'orange' };
var material = new THREE.MeshPhongMaterial(mcolor);
var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
scene.add(mesh);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  mesh.rotation.set(mesh.rotation.x + 0.01, mesh.rotation.y + 0.02, mesh.rotation.z + 0.03);
  renderer.render(scene, camera);
} )();

トラックボール操作

OrthographicTrackballControls

　OrthographicTrackballControls は、平行投影カメラ用のマウスによる操作を行います。
左ボタンで回転、右ボタンで移動、中ボタンでズーム操作が行えます。
他のサンプルに比べ、裏側から見た場合にも見えるように光源が追加してあります。

OrthographicTrackballControls( camera[, element] )

camera : カメラ
element : マウス操作を受ける HTML 要素

var scene = new THREE.Scene();

var width = 640;
var height = 400;
var camera = new THREE.OrthographicCamera(width / -200, width / 200, height / 200, height / -200, 1, 100);
    camera.position.set(0, 0, 10);

var jscreen = document.getElementById('jscscreen');	// マウス操作を受ける要素
var controls = new THREE.OrthographicTrackballControls(camera, jscreen);	// トラックボール

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var lcolor = 'white';
var directionalLight = new THREE.DirectionalLight(lcolor);
    directionalLight.position.set(3, 4, 5);
scene.add(directionalLight);
    directionalLight = new THREE.DirectionalLight(lcolor);
    directionalLight.position.set(-3, -4, -5);
scene.add(directionalLight);

var geometry = new THREE.BoxGeometry(2, 2, 2);
var mcolor = { color: 'orange' };
var material = new THREE.MeshPhongMaterial(mcolor);
var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
scene.add(mesh);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  controls.update();			// トラックボール操作
  renderer.render(scene, camera);
} )();

TrackballControls

　TrackballControls は、透視投影カメラ用のマウスによる操作を行います。
左ボタンで回転、右ボタンで移動、中ボタンでズーム操作が行えます。
他のサンプルに比べ、裏側から見た場合にも見えるように光源が追加してあります。

TrackballControls( camera[, element] )

camera : カメラ
element : マウス操作を受ける HTML 要素

var scene = new THREE.Scene();

var width = 640;
var height = 400;
var camera = new THREE.PerspectiveCamera(90, width / height, 1, 100);
    camera.position.set(0, 0, 10);

var jscreen = document.getElementById('jscscreen');	// マウス操作を受ける要素
var controls = new THREE.TrackballControls(camera, jscreen);	// トラックボール
    controls.rotateSpeed = 10.0;	// 回転操作スピード設定
    controls.panSpeed = 2.0;		// 移動操作スピード設定
    controls.zoomSpeed = 1.0;		// ズーム操作スピード設定

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var lcolor = 'white';
var directionalLight = new THREE.DirectionalLight(lcolor);
    directionalLight.position.set(3, 4, 5);
scene.add(directionalLight);
    directionalLight = new THREE.DirectionalLight(lcolor);
    directionalLight.position.set(-3, -4, -5);
scene.add(directionalLight);

var geometry = new THREE.BoxGeometry(5, 5, 5);
var mcolor = { color: 'orange' };
var material = new THREE.MeshPhongMaterial(mcolor);
var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
scene.add(mesh);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  controls.update();			// トラックボール操作
  renderer.render(scene, camera);
} )();

光源

AmbientLight

　AmbientLight は、シーン全体に対する環境光です。

AmbientLight( hex )

hex : 光源の色 RGB の値

var scene = new THREE.Scene();

var camera = new THREE.OrthographicCamera(-3.2, 3.2, 2, -2, 1, 100);
    camera.position.set(0, 0, 10);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 400);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var light = new THREE.AmbientLight('white');
scene.add(light);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var mcolor = { color: 'orange' };
var material = new THREE.MeshPhongMaterial(mcolor);
var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
scene.add(mesh);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  mesh.rotation.set(mesh.rotation.x + 0.01, mesh.rotation.y + 0.02, mesh.rotation.z + 0.03);
  renderer.render(scene, camera);
} )();

DirectionalLight

　DirectionalLight は、MeshLambertMaterial や MeshPhongMaterial で利用される平行光源です。

DirectionalLight( hex, intensity )

hex : 光源の色 RGB の値
intensity : 光の強さ

var scene = new THREE.Scene();

var camera = new THREE.OrthographicCamera(-3.2, 3.2, 2, -2, 1, 100);
    camera.position.set(0, 0, 10);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 400);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var light = new THREE.DirectionalLight('white', 1);
    light.position.set(0, 0, 1);
scene.add(light);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var mcolor = { color: 'orange' };
var material = new THREE.MeshPhongMaterial(mcolor);
var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
scene.add(mesh);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  mesh.rotation.set(mesh.rotation.x + 0.01, mesh.rotation.y + 0.02, mesh.rotation.z + 0.03);
  renderer.render(scene, camera);
} )();

HemisphereLight

　HemisphereLight は、シーンの上下から照らす光です。

HemisphereLight( skyColorHex, groundColorHex, intensity )

skyColorHex : 空の光源の色 RGB の値
groundColorHex : 地の光源の色 RGB の値
intensity : 光の強さ

var scene = new THREE.Scene();

var camera = new THREE.OrthographicCamera(-3.2, 3.2, 2, -2, 1, 100);
    camera.position.set(0, 0, 10);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 400);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var light = new THREE.HemisphereLight('white', 'red', 2);
scene.add(light);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var mcolor = { color: 'orange' };
var material = new THREE.MeshPhongMaterial(mcolor);
var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
scene.add(mesh);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  mesh.rotation.set(mesh.rotation.x + 0.01, mesh.rotation.y + 0.02, mesh.rotation.z + 0.03);
  renderer.render(scene, camera);
} )();

PointLight

　PointLight は、MeshLambertMaterial や MeshPhongMaterial で利用される点光源です。

PointLight( hex, intensity, distance, decay )

hex : 光源の色 RGB の値
intensity : 光の強さ
distance : 光が 0 になる距離
decay :

var scene = new THREE.Scene();

var camera = new THREE.OrthographicCamera(-3.2, 3.2, 2, -2, 1, 100);
    camera.position.set(0, 0, 10);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 400);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var light = new THREE.PointLight('white', 1, 10);
    light.position.set(0, 0, 1);
scene.add(light);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var mcolor = { color: 'orange' };
var material = new THREE.MeshPhongMaterial(mcolor);
var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
scene.add(mesh);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  mesh.rotation.set(mesh.rotation.x + 0.01, mesh.rotation.y + 0.02, mesh.rotation.z + 0.03);
  renderer.render(scene, camera);
} )();

SpotLight

　SpotLight は、影を投げる点光源です。
MeshLambertMaterial や MeshPhongMaterial で利用されます。

SpotLight( hex, intensity, distance, angle, exponent, decay )

hex : 光源の色 RGB の値
intensity : 光の強さ
distance : 光が 0 になる距離
angle : 光の角度
exponent : 光が急に弱くなる中心からの距離
decay :

var scene = new THREE.Scene();

var camera = new THREE.OrthographicCamera(-3.2, 3.2, 2, -2, 1, 100);
    camera.position.set(0, 0, 10);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 400);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var light = new THREE.SpotLight('white', 1, 10, 90, 1);
    light.position.set(0, 0, 1);
scene.add(light);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var mcolor = { color: 'orange' };
var material = new THREE.MeshPhongMaterial(mcolor);
var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
scene.add(mesh);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  mesh.rotation.set(mesh.rotation.x + 0.01, mesh.rotation.y + 0.02, mesh.rotation.z + 0.03);
  renderer.render(scene, camera);
} )();

形状

BoxGeometry

　BoxGeometry は、直方体形状を作成します。

BoxGeometry( width, height, depth[, widthSegments, heightSegments, depthSegments] )

width : 直方体 x 軸の幅
height : 直方体 y 軸の高さ
depth : 直方体 z 軸の深さ
widthSegments : x 側のセグメント面数
heightSegments : y 側のセグメント面数
depthSegments : z 側のセグメント面数

CircleGeometry

　CircleGeometry は、円盤形状を作成します。

CircleGeometry( radius, segments, thetaStart, thetaLength )

radius : 円盤の半径
segments : セグメント面数(>=3)
thetaStart : スタート角(3時方向が0)
thetaLength : 中心角

CubeGeometry

　CubeGeometry は、BoxGeometry に名前を変更します。

CylinderGeometry

　CylinderGeometry は、円柱形状を作成します。

CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength )

radiusTop : 円柱のトップの半径
radiusBottom : 円柱の底の半径
height : 円柱の高さ
radiusSegments : 円柱の側面のセグメント数
heightSegments : 円柱のふたのセグメント数
openEnded : 円柱のふたを閉じるかどうか
thetaStart : スタート角(3時方向が0)
thetaLength : 中心角

DodecahedronGeometry

　DodecahedronGeometry は、十二面体形状を作成します。

DodecahedronGeometry( radius, detail )

radius : 半径
detail : 0 以上なら頂点の数を増やす

IcosahedronGeometry

　IcosahedronGeometry は、二十面体形状を作成します。

IcosahedronGeometry( radius, detail )

radius : 半径
detail : 0 以上なら頂点の数を増やす

OctahedronGeometry

　OctahedronGeometry は、八面体形状を作成します。

OctahedronGeometry( radius, detail )

radius : 半径
detail : 0 以上なら頂点の数を増やす

PlaneGeometry

　PlaneGeometry は、四角形形状を作成します。

PlaneGeometry( width, height[, widthSegments, heightSegments] )

width : 四角形 x 軸の幅
height : 四角形 y 軸の高さ
widthSegments : x 側のセグメント面数
heightSegments : y 側のセグメント面数

RingGeometry

　RingGeometry は、穴あき円盤を作成します。

RingGeometry( innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength )

innerRadius : 穴あき円盤の内径
outerRadius : 穴あき円盤の外径
thetaSegments : セグメント面数(>=3)
phiSegments : セグメント面数(>=1)
thetaStart : スタート角
thetaLength : 中心角

SphereGeometry

　SphereGeometry は、球体形状を作成します。

SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )

radius : 半径
widthSegments : 水平セグメント面数(>=3)
heightSegments : 垂直セグメント面数(>=2)
phiStart : 水平スタート角
phiLength : 水平中心角
thetaStart : 垂直スタート角
thetaLength : 垂直中心角

TetrahedronGeometry

　TetrahedronGeometry は、四面体形状を作成します。

TetrahedronGeometry( radius, detail )

radius : 半径
detail : 0 以上なら頂点の数を増やす

TorusGeometry

　TorusGeometry は、トーラス（ドーナツ）形状を作成します。

TorusGeometry( radius, tube, radialSegments, tubularSegments, arc )

radius : 半径
tube : チューブ直径
radialSegments : セグメント面数
tubularSegments : セグメント面数
arc : 中心角

TorusKnotGeometry

　TorusKnotGeometry は、トーラス結び形状を作成します。

TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale )

radius : 半径
tube : チューブ直径
radialSegments : セグメント面数
tubularSegments : セグメント面数
p : デフォルト 2
q : デフォルト 3
heightScale : デフォルト 1

var scene = new THREE.Scene();

var camera = new THREE.OrthographicCamera(-6.4, 6.4, 4, -4, 1, 100);
    camera.position.set(0, 0, 10);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 400);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var directionalLight = new THREE.DirectionalLight('white');
    directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);

var mcolor = { color: 'orange' };
var material = new THREE.MeshPhongMaterial(mcolor);

var geometry = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1);
var mesh1 = new THREE.Mesh(geometry, material);
    mesh1.position.set(-4, 2, 0);
scene.add(mesh1);
    geometry = new THREE.CircleGeometry(1, 8, 0, 2*Math.PI);
var mesh2 = new THREE.Mesh(geometry, material);
    mesh2.position.set(-2, 2, 0);
scene.add(mesh2);
    geometry = new THREE.CylinderGeometry(1, 1, 1, 8, 1, false, 0, 2*Math.PI);
var mesh3 = new THREE.Mesh(geometry, material);
    mesh3.position.set( 0, 2, 0);
scene.add(mesh3);
    geometry = new THREE.DodecahedronGeometry(1, 0);
var mesh4 = new THREE.Mesh(geometry, material);
    mesh4.position.set( 2, 2, 0);
scene.add(mesh4);
    geometry = new THREE.IcosahedronGeometry(1, 0);
var mesh5 = new THREE.Mesh(geometry, material);
    mesh5.position.set( 4, 2, 0);
scene.add(mesh5);
    geometry = new THREE.OctahedronGeometry(1, 0);
var mesh6 = new THREE.Mesh(geometry, material);
    mesh6.position.set(-4, 0, 0);
scene.add(mesh6);
    geometry = new THREE.PlaneGeometry(1, 1, 1, 1);
var mesh7 = new THREE.Mesh(geometry, material);
    mesh7.position.set(-2, 0, 0);
scene.add(mesh7);
    geometry = new THREE.RingGeometry(0.5, 1, 8, 8, 0, 2*Math.PI);
var mesh8 = new THREE.Mesh(geometry, material);
    mesh8.position.set( 0, 0, 0);
scene.add(mesh8);
    geometry = new THREE.SphereGeometry(1, 8, 6, 0, 2*Math.PI, 0, Math.PI);
var mesh9 = new THREE.Mesh(geometry, material);
    mesh9.position.set( 2, 0, 0);
scene.add(mesh9);
    geometry = new THREE.TetrahedronGeometry(1, 0);
var mesh10 = new THREE.Mesh(geometry, material);
    mesh10.position.set( 4, 0, 0);
scene.add(mesh10);
    geometry = new THREE.TorusGeometry(0.7, 0.5, 8, 6, 2*Math.PI);
var mesh11 = new THREE.Mesh(geometry, material);
    mesh11.position.set(-4,-2, 0);
scene.add(mesh11);
    geometry = new THREE.TorusKnotGeometry(0.5, 0.2, 64, 8, 2, 3, 1);
var mesh12 = new THREE.Mesh(geometry, material);
    mesh12.position.set(-2,-2, 0);
scene.add(mesh12);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  var rx = mesh1.rotation.x + 0.01;
  var ry = mesh1.rotation.y + 0.02;
  var rz = mesh1.rotation.z + 0.03;
  mesh1.rotation.set(rx, ry, rz);
  mesh2.rotation.set(rx, ry, rz);
  mesh3.rotation.set(rx, ry, rz);
  mesh4.rotation.set(rx, ry, rz);
  mesh5.rotation.set(rx, ry, rz);
  mesh6.rotation.set(rx, ry, rz);
  mesh7.rotation.set(rx, ry, rz);
  mesh8.rotation.set(rx, ry, rz);
  mesh9.rotation.set(rx, ry, rz);
  mesh10.rotation.set(rx, ry, rz);
  mesh11.rotation.set(rx, ry, rz);
  mesh12.rotation.set(rx, ry, rz);
  renderer.render(scene, camera);
} )();

物性

MeshPhongMaterial

　MeshPhongMaterial は、輝きのある物性です。

MeshPhongMaterial( { key : value[, key : value ...] } )

key : value　：　解説は後述

MeshLambertMaterial

　MeshLambertMaterial は、輝きの無い物性です。

MeshLambertMaterial( { key : value[, key : value ...] } )

key : value　：　解説は後述

MeshNormalMaterial

　MeshNormalMaterial は、法線を元に色の計算をする物性です。

MeshNormalMaterial( { key : value[, key : value ...] } )

key : value　：　解説は後述

MeshBasicMaterial

　MeshBasicMaterial は、単一色で表現する物性です。

MeshBasicMaterial( { key : value[, key : value ...] } )

key : value　：　解説は後述

var scene = new THREE.Scene();

var camera = new THREE.OrthographicCamera(-3.2, 3.2, 2, -2, 1, 100);
    camera.position.set(0, 0, 10);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 400);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var directionalLight = new THREE.DirectionalLight('white');
    directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);

var geometry = new THREE.CylinderGeometry(0.7, 0.7, 1);
var mcolor = { color: 'orange' };
var material1 = new THREE.MeshPhongMaterial(mcolor);
var mesh1 = new THREE.Mesh(geometry, material1);
    mesh1.position.set(-1, 1, 0);
scene.add(mesh1);
var material2 = new THREE.MeshLambertMaterial(mcolor);
var mesh2 = new THREE.Mesh(geometry, material2);
    mesh2.position.set( 1, 1, 0);
scene.add(mesh2);
var material3 = new THREE.MeshNormalMaterial(mcolor);
var mesh3 = new THREE.Mesh(geometry, material3);
    mesh3.position.set(-1, -1, 0);
scene.add(mesh3);
var material4 = new THREE.MeshBasicMaterial(mcolor);
var mesh4 = new THREE.Mesh(geometry, material4);
    mesh4.position.set( 1, -1, 0);
scene.add(mesh4);

renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  mesh1.rotation.set(mesh1.rotation.x + 0.01, mesh1.rotation.y + 0.02, mesh1.rotation.z + 0.03);
  mesh2.rotation.set(mesh2.rotation.x + 0.01, mesh2.rotation.y + 0.02, mesh2.rotation.z + 0.03);
  mesh3.rotation.set(mesh3.rotation.x + 0.01, mesh3.rotation.y + 0.02, mesh3.rotation.z + 0.03);
  mesh4.rotation.set(mesh4.rotation.x + 0.01, mesh4.rotation.y + 0.02, mesh4.rotation.z + 0.03);
  renderer.render(scene, camera);
} )();

key : value パラメータ

　key : value パラメータで、色々な物性を設定できます。

key : value で設定できるいくつかの例をサンプルプログラムに示します

テスト画像

var scene = new THREE.Scene();

var camera = new THREE.OrthographicCamera(-6.4, 6.4, 4, -4, 1, 100);
    camera.position.set(0, 0, 10);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 400);
document.getElementById('jscthreed').appendChild(renderer.domElement);

var directionalLight = new THREE.DirectionalLight('white');
    directionalLight.position.set(0, 0, 1);
scene.add(directionalLight);

var material = new THREE.MeshPhongMaterial({ color: 'orange' });
var geometry = new THREE.CylinderGeometry(0.9, 0.9, 1, 8, 1, false, 0, 2*Math.PI);
var img = THREE.ImageUtils.loadTexture('img/test.png');

var mesh1 = new THREE.Mesh(geometry, material);
    mesh1.position.set(-4, 2, 0);
scene.add(mesh1);
material = new THREE.MeshPhongMaterial({ color: 0xffff00 });
var mesh2 = new THREE.Mesh(geometry, material);
    mesh2.position.set(-2, 2, 0);
scene.add(mesh2);
material = new THREE.MeshPhongMaterial({ color: 'orange', shading: THREE.FlatShading });
var mesh3 = new THREE.Mesh(geometry, material);
    mesh3.position.set( 0, 2, 0);
scene.add(mesh3);
material = new THREE.MeshPhongMaterial({ color: 'orange', wireframe: true });
var mesh4 = new THREE.Mesh(geometry, material);
    mesh4.position.set( 2, 2, 0);
scene.add(mesh4);
material = new THREE.MeshPhongMaterial({ color: 'orange', specular: 0x009900 });
var mesh5 = new THREE.Mesh(geometry, material);
    mesh5.position.set( 4, 2, 0);
scene.add(mesh5);
material = new THREE.MeshPhongMaterial({ color: 'orange', shininess: 100 });
var mesh6 = new THREE.Mesh(geometry, material);
    mesh6.position.set(-4, 0, 0);
scene.add(mesh6);
material = new THREE.MeshPhongMaterial({ color: 'orange', ambient: 0xffffff });
var mesh7 = new THREE.Mesh(geometry, material);
    mesh7.position.set(-2, 0, 0);
scene.add(mesh7);
material = new THREE.MeshPhongMaterial({ color: 'orange', metal: true });
var mesh8 = new THREE.Mesh(geometry, material);
    mesh8.position.set( 0, 0, 0);
scene.add(mesh8);
material = new THREE.MeshPhongMaterial({ color: 'orange', transparent: true, opacity:0.5 });
var mesh9 = new THREE.Mesh(geometry, material);
    mesh9.position.set( 2, 0, 0);
scene.add(mesh9);
material = new THREE.MeshPhongMaterial({ color: 'orange', map: img });
var mesh10 = new THREE.Mesh(geometry, material);
    mesh10.position.set( 4, 0, 0);
scene.add(mesh10);
material = new THREE.MeshPhongMaterial({ color: 'orange', map: img, bumpMap: img, bumpScale: 0.05 });
var mesh11 = new THREE.Mesh(geometry, material);
    mesh11.position.set(-4,-2, 0);
scene.add(mesh11);
geometry = new THREE.CircleGeometry(1, 8, 0, 2*Math.PI);
material = new THREE.MeshPhongMaterial({ color: 'orange', side: THREE.DoubleSide });
var mesh12 = new THREE.Mesh(geometry, material);
    mesh12.position.set(-2,-2, 0);
scene.add(mesh12);


renderer.render(scene, camera);
( function renderloop () {
  jscrequestanimationid = requestAnimationFrame(renderloop);
  var rx = mesh1.rotation.x + 0.01;
  var ry = mesh1.rotation.y + 0.02;
  var rz = mesh1.rotation.z + 0.03;
  mesh1.rotation.set(rx, ry, rz);
  mesh2.rotation.set(rx, ry, rz);
  mesh3.rotation.set(rx, ry, rz);
  mesh4.rotation.set(rx, ry, rz);
  mesh5.rotation.set(rx, ry, rz);
  mesh6.rotation.set(rx, ry, rz);
  mesh7.rotation.set(rx, ry, rz);
  mesh8.rotation.set(rx, ry, rz);
  mesh9.rotation.set(rx, ry, rz);
  mesh10.rotation.set(rx, ry, rz);
  mesh11.rotation.set(rx, ry, rz);
  mesh12.rotation.set(rx, ry, rz);
  renderer.render(scene, camera);
} )();

目次へ