Material とは ? †
- 物体表面の質感
- 形状と質感を合わせて物体が成立している
// 形状
var cubeGeometry = new THREE.CubeGeometry(1,1,1);
// テクスチャを作成
var texture = new THREE.Texture(hilbert(100, 100, 3, 'black', 'lime'));
texture.needsUpdate = true;
// 質感
var cubeMaterial = new THREE.MeshPhongMaterial({
map : texture,
metal : true,
emissive : 0xffffff,
fog: true
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
- 主なパラメータ
| color | 色 |
| specular | 光があたっているところの色 |
| shininess | 光があたっているところの大きさ |
| ambient | 環境光のみの部分の色（陰の部分の色) |
| emissive | 発光色 |
| metal | 金属光沢あり (true/false) |
| map | テクスチャ |
| bumpMap | バンプマッピング |
| fog | 霧効果あり (true/false) |
| wireframe | ワイヤフレーム化する (true/false) |
サンプル (ワイヤフレーム + 発光) †
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Self Radiation</title>
<style>
div {
border : 1px solid;
}
</style>
</head>
<body>
<div id="webgl_view"></div>
<script type="text/javascript" src="three.js" charset="utf-8"></script>
<script type="text/javascript" src="Hilbert.js" charset="utf-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
var height = 400;
var width = 600;
var container = $('#webgl_view');
container.css({
height : height + "px",
width : width + "px"});
function cource(t) {
return {
x : 10.0 * Math.cos(t),
y : 2.0 * Math.sin(t),
z : 10.0 * Math.sin(t * 2),
dx : -10.0 * Math.sin(t),
dy : 2.0 * Math.cos(t),
dz : 10.0 * Math.cos(t * 2),
};
}
// (1) 立方体
// 形状
var cubeGeometry = new THREE.CubeGeometry(1,1,1);
// テクスチャを作成
var texture = new THREE.Texture(hilbert(100, 100, 3, 'black', 'lime'));
texture.needsUpdate = true;
// 色
var cubeMaterial1 = new THREE.MeshPhongMaterial({
map : texture,
metal : true,
emissive : 0xffffff,
fog: true
});
var cubeMaterial2 = new THREE.MeshPhongMaterial({
map : texture,
metal : true,
wireframe: true
});
var cubeArray = new Array();
var cubeCnt = 0;
for (var t = 0; t < 2 * Math.PI; t += 0.1) {
cubeCnt += 1;
var cube = new THREE.Mesh(cubeGeometry, 0 == cubeCnt % 2 ? cubeMaterial1 : cubeMaterial2);
var position = cource(t);
cube.position.x = position.x;
cube.position.y = position.y;
cube.position.z = position.z;
cube.rotation.y = Math.atan(position.x/position.z);
cubeArray.push(cube);
}
// (3) 環境光
var alight = new THREE.AmbientLight(0x888888);
// (4) Scene
var scene = new THREE.Scene();
for (var cnt = 0 ; cnt < cubeArray.length; cnt++ ) {
scene.add(cubeArray[cnt]);
}
scene.add(alight);
scene.fog = new THREE.FogExp2(0x000020, 0.1);
// (5) Camera (視野角, アスペクト比(縦横比), 描画対象(最小距離), 描画対象(最大距離)
var camera = new THREE.PerspectiveCamera(90, width/height, 0.1, 100);
// (6) WebGL Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0x000000);
renderer.clear(true);
container.append(renderer.domElement);
// (7) Animation (Rotate)
function animation() {
var time = (new Date()).getTime();
var position = cource(time / 5000);
camera.position.x = position.x;
camera.position.y = position.y + 1.0;
camera.position.z = position.z;
camera.lookAt(new THREE.Vector3(position.dx, position.dy, position.dz));
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
animation();
</script>
</body>
</html>
HTML
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
