「-g_cube」の編集履歴(バックアップ)一覧はこちら
「-g_cube」(2013/04/20 (土) 23:38:11) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
#javascript(){{
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/three.min.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/Detector.js"></script>
<script type="text/javascript"><!--
$(function(){
var init = function(){
// シーン
var scene = new THREE.Scene();
// 直方体
var cube = new THREE.Mesh(
new THREE.CubeGeometry(12,10,8),
new THREE.MeshLambertMaterial( { color: 0x00ff00 } )
);
scene.add( cube );
// 直方体のワイヤーフレーム
var cube2 = new THREE.Mesh(
cube.geometry, new THREE.MeshBasicMaterial( { color: 0x000000, wireframe:true } ) );
scene.add( cube2 );
// 床
var n_yuka = 5, yuka_w = 10;
for(var i=-n_yuka; i<=n_yuka ; i++){
for(var j=-n_yuka; j<=n_yuka ; j++){
if((i+j)%2==0){
var plane = new THREE.Mesh(
new THREE.PlaneGeometry(yuka_w, yuka_w, 1, 1),
new THREE.MeshBasicMaterial({color: 0x999999, wireframe: true})
);
}else{
var plane = new THREE.Mesh(
new THREE.PlaneGeometry(yuka_w, yuka_w, 1, 1),
new THREE.MeshBasicMaterial({color: 0x4d4d4d, wireframe: true})
);
}
plane.position.x = j*yuka_w;
plane.position.z = i*yuka_w;
plane.rotation.x = -Math.PI/2;
plane.rotation.y = 0;
plane.rotation.z = 0;
scene.add(plane);
}
}
// 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(-3,10,45);
camera.lookAt(scene.position);
// レンダラ
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( 320, 240 );
var container = $('#d0');
container.append( renderer.domElement );
renderer.render( scene, camera );
var flg = false;
(function(){
flg = true;
setTimeout(arguments.callee, 70);
})();
// マウスが動いたイベント
$(document).mousemove(function(e){
if(flg){
cp = container[0].getBoundingClientRect();
cube.rotation.y = cube2.rotation.y = (e.clientX-cp.left-160) / 72;
cube.rotation.x = cube2.rotation.x = (e.clientY-cp.top-210) / 54;
renderer.render( scene, camera );
flg = false;
}
});
};
if ( Detector.webgl ){
init();
}else{
$('#d0').html('<span style="color:red;">あなたが使用中のブラウザはWebGL非対応もしくはWebGLが有効になっていません。</span>');
}
});
//--></script>
}}
#javascript(){{
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/three_r58.min.js"></script>
<script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/Detector.js"></script>
<script type="text/javascript"><!--
$(function(){
var init = function(){
// シーン
var scene = new THREE.Scene();
// 直方体
var cube = new THREE.Mesh(
new THREE.CubeGeometry(12,10,8),
new THREE.MeshLambertMaterial( { color: 0x00ff00 } )
);
scene.add( cube );
// 直方体のワイヤーフレーム
var cube2 = new THREE.Mesh(
cube.geometry, new THREE.MeshBasicMaterial( { color: 0x000000, wireframe:true } ) );
scene.add( cube2 );
// 床
var oneWidth = 10, oneHeight = 10, 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(-3,10,45);
camera.lookAt(scene.position);
// レンダラ
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( 320, 240 );
var container = $('#d0');
container.append( renderer.domElement );
renderer.render( scene, camera );
var flg = false;
(function(){
flg = true;
setTimeout(arguments.callee, 70);
})();
// マウスが動いたイベント
$(document).mousemove(function(e){
if(flg){
cp = container[0].getBoundingClientRect();
cube.rotation.y = cube2.rotation.y = (e.clientX-cp.left-160) / 72;
cube.rotation.x = cube2.rotation.x = (e.clientY-cp.top-210) / 54;
renderer.render( scene, camera );
flg = false;
}
});
};
if ( Detector.webgl ){
init();
}else{
$('#d0').html('<span style="color:red;">あなたが使用中のブラウザはWebGL非対応もしくはWebGLが有効になっていません。</span>');
}
});
//--></script>
}}