「-g_tetrahedron2」の編集履歴（バックアップ）一覧はこちら
「-g_tetrahedron2」(2013/05/03 (金) 23:03:14) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
#javascript(){{
<script type="text/javascript"><!--
$(function(){
var init = function(){
// シーン
var scene = new THREE.Scene();
// 4面体(分割0)
var tetraGeo = new THREE.TetrahedronGeometry(60,0);
tetraGeo.faces[0].materialIndex = 0;
tetraGeo.faces[1].materialIndex = 1;
tetraGeo.faces[2].materialIndex = 2;
tetraGeo.faces[3].materialIndex = 3;
var mat = new THREE.MeshFaceMaterial([
new THREE.MeshLambertMaterial( { color: 0x00ff00 } ),
new THREE.MeshLambertMaterial( { color: 0xff0000 } ),
new THREE.MeshLambertMaterial( { color: 0x0000ff } ),
new THREE.MeshLambertMaterial( { color: 0xffff00 } )
]);
var tetra = new THREE.Mesh( tetraGeo, mat );
scene.add( tetra );
for(var i=0, len=tetra.geometry.faces.length; i<len; i++){ //
tetra.geometry.faces[i].vertexNormals = []; // 面色のための
} //
// 4面体(分割0)のワイヤーフレーム
var tetra2 = new THREE.Mesh(
tetra.geometry, new THREE.MeshBasicMaterial( { color: 0x000000, wireframe:true } ) );
scene.add( tetra2 );
var vertices = tetra.geometry.vertices;
var slp = function(a, b, c){
var arr = [];
var a0 = (new THREE.Vector3()).copy(a);
var b0 = (new THREE.Vector3()).copy(b);
var r = a0.dot(b0)/a0.length()/b0.length();
var axis = (new THREE.Vector3()).crossVectors(a0,b0).normalize();
var j = 0;
for(var i=0, len = c*2+2; i<=len; i++){
d = (new THREE.Vector3()).copy(a0);
arr[j] = d.applyAxisAngle(axis, Math.acos(r)/len*i);
if(0<i && i<len) {
j++;
d = (new THREE.Vector3()).copy(a0);
arr[j] = d.applyAxisAngle(axis, Math.acos(r)/len*i);
}
j++;
}
return arr;
}
// 頂点
var pointSetGeo = new THREE.Geometry();
var point = new THREE.Mesh(new THREE.CubeGeometry(3,3,3));
var lineGeometry = new THREE.Geometry();
var liner = function(a,b){
var vt = slp(vertices[a],vertices[b],2);
lineGeometry.vertices = lineGeometry.vertices.concat(vt);
point.position.copy(vt[5]);
THREE.GeometryUtils.merge(pointSetGeo, point);
}
liner(0,1); liner(0,2); liner(0,3); liner(1,2); liner(1,3); liner(2,3);
var lineMaterial = new THREE.LineBasicMaterial( { color: 0xff00ff } );
var line = new THREE.Line( lineGeometry, lineMaterial, THREE.LinePieces );
scene.add(line);
line.visible = false;
var pointSet = new THREE.Mesh(pointSetGeo, new THREE.MeshBasicMaterial({color: 0xff9900}));
scene.add(pointSet);
pointSet.visible = false;
// 4面体(分割1)
var tetra3Geo = new THREE.TetrahedronGeometry(60,1);
for(var i=0; i<16; i++){
tetra3Geo.faces[i].materialIndex = Math.floor(i/4);
}
var tetra3 = new THREE.Mesh( tetra3Geo, mat );
scene.add( tetra3 );
tetra3.visible=false;
for(var i=0, len=tetra3.geometry.faces.length; i<len; i++){ //
tetra3.geometry.faces[i].vertexNormals = []; // 面色のための
} //
// 4面体(分割1)のワイヤーフレーム
var tetra4 = new THREE.Mesh(
tetra3.geometry, new THREE.MeshBasicMaterial( { color: 0x000000, wireframe:true } ) );
scene.add( tetra4 );
tetra4.visible=false;
// 床
var oneWidth = 60, oneHeight = 60, wUnits = 11, hUnits = 11;
var groundGeo = new THREE.PlaneGeometry(oneWidth*wUnits, oneHeight*hUnits, wUnits, hUnits);
for(var i=0, len = groundGeo.faces.length, f=-1; i<len; i++){
f = -1;
if((i/wUnits | 0)%2==1){ f = ~f; }
if((i%wUnits)%2==1){ f = ~f; }
groundGeo.faces[i].materialIndex = f+1;
}
var ground = new THREE.Mesh(
groundGeo,
new THREE.MeshFaceMaterial([
new THREE.MeshBasicMaterial({color: 0x999999, wireframe:true }),
new THREE.MeshBasicMaterial({color: 0x4d4d4d, wireframe:true })
])
);
ground.rotation.x = -Math.PI/2;
scene.add(ground);
// xyz軸
var axes = new THREE.AxisHelper(100);
scene.add( axes );
// ライト
var light = new THREE.DirectionalLight( 0xffffff, 1 );
scene.add( light );
light.position.set(30,100,50);
light.position.normalize();
// カメラ
var camera = new THREE.PerspectiveCamera( 30, 320/240, 1, 1000 );
camera.position.set(-18,60,270);
camera.lookAt(scene.position);
// レンダラ
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( 320, 240 );
var container = $('#d1');
container.append( renderer.domElement );
renderer.render( scene, camera );
var fr = -1;
var cnt = 0;
(function(){
flg = true;
flg2 = true;
if(cnt%20==0){ fr++; }
if(fr%4==0){ line.visible=pointSet.visible=tetra3.visible = tetra4.visible = false; renderer.render( scene, camera );}
else if(fr%4==1){ line.visible=true; renderer.render( scene, camera );}
else if(fr%4==2){ pointSet.visible=true; renderer.render( scene, camera );}
else{ tetra3.visible = tetra4.visible = true; renderer.render( scene, camera );}
cnt++;
setTimeout(arguments.callee, 70);
})();
// マウスが動いたイベント
$(document).mousemove(function(e){
if(flg2){
cp = container[0].getBoundingClientRect();
tetra.rotation.y = tetra2.rotation.y = tetra3.rotation.y = tetra4.rotation.y = line.rotation.y = pointSet.rotation.y = (e.clientX-cp.left-160) / 72;
tetra.rotation.x = tetra2.rotation.x = tetra3.rotation.x = tetra4.rotation.x = line.rotation.x = pointSet.rotation.x = (e.clientY-cp.top-210) / 54;
renderer.render( scene, camera );
flg2 = false;
}
});
};
if ( Detector.webgl ){
init();
}else{
$('#d1').html('<span style="color:red;">あなたが使用中のブラウザはWebGL非対応もしくはWebGLが有効になっていません。</span>');
}
});
//--></script>
}}
#javascript(){{
<script type="text/javascript"><!--
$(function(){
var init = function(){
// シーン
var scene = new THREE.Scene();
// 4面体(分割0)
var tetraGeo = new THREE.TetrahedronGeometry(60,0);
tetraGeo.faces[0].materialIndex = 0;
tetraGeo.faces[1].materialIndex = 1;
tetraGeo.faces[2].materialIndex = 2;
tetraGeo.faces[3].materialIndex = 3;
var mat = new THREE.MeshFaceMaterial([
new THREE.MeshLambertMaterial( { color: 0x00ff00, shading:THREE.FlatShading } ),
new THREE.MeshLambertMaterial( { color: 0xff0000, shading:THREE.FlatShading } ),
new THREE.MeshLambertMaterial( { color: 0x0000ff, shading:THREE.FlatShading } ),
new THREE.MeshLambertMaterial( { color: 0xffff00, shading:THREE.FlatShading } )
]);
var tetra = new THREE.Mesh( tetraGeo, mat );
scene.add( tetra );
// 4面体(分割0)のワイヤーフレーム
var tetra2 = new THREE.Mesh(
tetra.geometry, new THREE.MeshBasicMaterial( { color: 0x000000, wireframe:true } ) );
scene.add( tetra2 );
var vertices = tetra.geometry.vertices;
var slp = function(a, b, c){
var arr = [];
var a0 = (new THREE.Vector3()).copy(a);
var b0 = (new THREE.Vector3()).copy(b);
var r = a0.dot(b0)/a0.length()/b0.length();
var axis = (new THREE.Vector3()).crossVectors(a0,b0).normalize();
var j = 0;
for(var i=0, len = c*2+2; i<=len; i++){
d = (new THREE.Vector3()).copy(a0);
arr[j] = d.applyAxisAngle(axis, Math.acos(r)/len*i);
if(0<i && i<len) {
j++;
d = (new THREE.Vector3()).copy(a0);
arr[j] = d.applyAxisAngle(axis, Math.acos(r)/len*i);
}
j++;
}
return arr;
}
// 頂点
var pointSetGeo = new THREE.Geometry();
var point = new THREE.Mesh(new THREE.CubeGeometry(3,3,3));
var lineGeometry = new THREE.Geometry();
var liner = function(a,b){
var vt = slp(vertices[a],vertices[b],2);
lineGeometry.vertices = lineGeometry.vertices.concat(vt);
point.position.copy(vt[5]);
THREE.GeometryUtils.merge(pointSetGeo, point);
}
liner(0,1); liner(0,2); liner(0,3); liner(1,2); liner(1,3); liner(2,3);
var lineMaterial = new THREE.LineBasicMaterial( { color: 0xff00ff } );
var line = new THREE.Line( lineGeometry, lineMaterial, THREE.LinePieces );
scene.add(line);
line.visible = false;
var pointSet = new THREE.Mesh(pointSetGeo, new THREE.MeshBasicMaterial({color: 0xff9900}));
scene.add(pointSet);
pointSet.visible = false;
// 4面体(分割1)
var tetra3Geo = new THREE.TetrahedronGeometry(60,1);
for(var i=0; i<16; i++){
tetra3Geo.faces[i].materialIndex = Math.floor(i/4);
}
var tetra3 = new THREE.Mesh( tetra3Geo, mat );
scene.add( tetra3 );
tetra3.visible=false;
// 4面体(分割1)のワイヤーフレーム
var tetra4 = new THREE.Mesh(
tetra3.geometry, new THREE.MeshBasicMaterial( { color: 0x000000, wireframe:true } ) );
scene.add( tetra4 );
tetra4.visible=false;
// 床
var oneWidth = 60, oneHeight = 60, wUnits = 11, hUnits = 11;
var groundGeo = new THREE.PlaneGeometry(oneWidth*wUnits, oneHeight*hUnits, wUnits, hUnits);
for(var i=0, len = groundGeo.faces.length, f=-1; i<len; i++){
f = -1;
if((i/wUnits | 0)%2==1){ f = ~f; }
if((i%wUnits)%2==1){ f = ~f; }
groundGeo.faces[i].materialIndex = f+1;
}
var ground = new THREE.Mesh(
groundGeo,
new THREE.MeshFaceMaterial([
new THREE.MeshBasicMaterial({color: 0x999999, wireframe:true }),
new THREE.MeshBasicMaterial({color: 0x4d4d4d, wireframe:true })
])
);
ground.rotation.x = -Math.PI/2;
scene.add(ground);
// xyz軸
var axes = new THREE.AxisHelper(100);
scene.add( axes );
// ライト
var light = new THREE.DirectionalLight( 0xffffff, 1 );
scene.add( light );
light.position.set(30,100,50);
light.position.normalize();
// カメラ
var camera = new THREE.PerspectiveCamera( 30, 320/240, 1, 1000 );
camera.position.set(-18,60,270);
camera.lookAt(scene.position);
// レンダラ
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( 320, 240 );
var container = $('#d1');
container.append( renderer.domElement );
renderer.render( scene, camera );
var fr = -1;
var cnt = 0;
(function(){
flg = true;
flg2 = true;
if(cnt%20==0){ fr++; }
if(fr%4==0){ line.visible=pointSet.visible=tetra3.visible = tetra4.visible = false; renderer.render( scene, camera );}
else if(fr%4==1){ line.visible=true; renderer.render( scene, camera );}
else if(fr%4==2){ pointSet.visible=true; renderer.render( scene, camera );}
else{ tetra3.visible = tetra4.visible = true; renderer.render( scene, camera );}
cnt++;
setTimeout(arguments.callee, 70);
})();
// マウスが動いたイベント
$(document).mousemove(function(e){
if(flg2){
cp = container[0].getBoundingClientRect();
tetra.rotation.y = tetra2.rotation.y = tetra3.rotation.y = tetra4.rotation.y = line.rotation.y = pointSet.rotation.y = (e.clientX-cp.left-160) / 72;
tetra.rotation.x = tetra2.rotation.x = tetra3.rotation.x = tetra4.rotation.x = line.rotation.x = pointSet.rotation.x = (e.clientY-cp.top-210) / 54;
renderer.render( scene, camera );
flg2 = false;
}
});
};
if ( Detector.webgl ){
init();
}else{
$('#d1').html('<span style="color:red;">あなたが使用中のブラウザはWebGL非対応もしくはWebGLが有効になっていません。</span>');
}
});
//--></script>
}}
