three.js/docs 日本語訳

英語力のない僕のための日本語版のthree.js/docsサイト (respect three.js/docs) 本家サイトhttp://threejs.org/docs/#Manual/Introduction/Creating_a_scene

canvas_geometry_cube.html

f:id:renyamagami:20160311153545p:plain

 

http://threejs.org/examples/#canvas_geometry_cube

 

日本語解説

<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js canvas - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
<!-- overflowボックスからはみ出たときにする処理　今回は隠す方向性 -->
}
</style>
</head>
<body>

<script src="../build/three.min.js"></script>

<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/CanvasRenderer.js"></script>

<script src="js/libs/stats.min.js"></script>

<script>
<!-- 定義付け -->

var container, stats;

var camera, scene, renderer;

var cube, plane;

var targetRotation = 0;
var targetRotationOnMouseDown = 0;

var mouseX = 0;
var mouseXOnMouseDown = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

<!-- containerに、divのidで指定されたものを入れ込む -->
container = document.createElement( 'div' );
<!-- documentの -->
document.body.appendChild( container );
<!-- documentに、containerの子要素追加 -->

var info = document.createElement( 'div' );
<!-- infoに、divのidで指定されたものを追加する -->
info.style.position = 'absolute';
<!-- infoの位置を接待値で決定 -->
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cube';
<!-- html要素として、Drag to spin the cubeを書き込む -->
container.appendChild( info );
<!-- containerに、infoの子要素を追加 -->

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
<!-- cameraは、perspectiveカメラで設定 -->
camera.position.y = 150;
camera.position.z = 500;
<!-- カメラの位置設定 -->

scene = new THREE.Scene();
<!-- シーン要素の作成 -->

// Cube

var geometry = new THREE.BoxGeometry( 200, 200, 200 );
<!-- 物体の作成　今回は、boxなので、上記のように -->

for ( var i = 0; i < geometry.faces.length; i += 2 ) {

var hex = Math.random() * 0xffffff;
<!-- 色は、ランダムですよーということ -->
geometry.faces[ i ].color.setHex( hex );
<!-- i番目の面は、hex色 -->
geometry.faces[ i + 1 ].color.setHex( hex );
<!-- i+1番目はhex色 -->

}

var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
<!-- 物体の特徴の設定　vertexColors　は、頂点の色の指定を行う -->
<!-- overdrawは、アンチエイリアスとかそっち系の、境界線をどんくらいにするかとか -->
cube = new THREE.Mesh( geometry, material );
<!-- cubeを作成　特徴は、geometryと、materialですよ。 -->
cube.position.y = 150;
<!-- cubeのy座標的位置の決定 -->
scene.add( cube );
<!-- sceanに追加 -->

// Plane

var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
<!-- 平面の作成を行う。 -->
geometry.rotateX( - Math.PI / 2 );
<!-- geometoryの、x軸回転を90度回転しておこなう。 -->
var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );
<!-- materialの特徴について記す -->

plane = new THREE.Mesh( geometry, material );
<!-- planeっていうものは、geometoryと、materialの特徴を持ってる -->
scene.add( plane );
<!-- planeをsceanに追加 -->

renderer = new THREE.CanvasRenderer();
<!-- rendererの作成 -->
renderer.setClearColor( 0xf0f0f0 );
<!-- クリアカラーを決定する -->
renderer.setPixelRatio( window.devicePixelRatio );
<!-- ピクセルの比を、windowのデバイスのピクセル比に変更する。 -->
renderer.setSize( window.innerWidth, window.innerHeight );
<!-- renderereのサイズを設定 -->
container.appendChild( renderer.domElement );
<!-- containerに、renderer.domElementを追加 -->

stats = new Stats();
<!-- stats関数を追加 -->
stats.domElement.style.position = 'absolute';
<!-- statsの位置を絶対値として近づける。 -->
stats.domElement.style.top = '0px';
<!-- statsのdomElementのトップを0pxで保存 -->
container.appendChild( stats.domElement );
<!-- containerに、 -->

document.addEventListener( 'mousedown', onDocumentMouseDown, false );
<!-- documentに、mousedownが実行されるとonDocumentMouseDownが、false -->
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
<!-- touchstartを起動すると、onDocumentTouchstart:falseが実行される -->
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
<!-- touchmoveが実行されると、onDocumentTouchMoveがfalseになる。 -->
//

window.addEventListener( 'resize', onWindowResize, false );
<!--resizeが実行されると、onWindowResizeがfalseになる。 -->
}

function onWindowResize() {
<!-- onDocumentResizeの関数の設定 -->
windowHalfX = window.innerWidth / 2;
<!-- windowHalfXを、windowの幅の1/2へ -->
windowHalfY = window.innerHeight / 2;
<!-- windowhalfYを、windowの高さの1/2へ -->
camera.aspect = window.innerWidth / window.innerHeight;
<!-- cameraのアス比をinnerwidthと、innerの高さの比で設定する。 -->
camera.updateProjectionMatrix();
<!-- cameraの行列をアップデートする -->
renderer.setSize( window.innerWidth, window.innerHeight );
<!-- rendererのサイズを、windowのサイズと、高さで表す。 -->
}

//

function onDocumentMouseDown( event ) {
<!-- ondocumentMouseDownをイベント実行時に実行 -->
event.preventDefault();
<!-- イベントが、キャンセル可能である場合に、イベント実行前に、機能をとめる -->
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
<!-- mousemoveが、実行されたら、onDocumentMouseMoveを実行しない -->
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
<!-- mouseupが実行されたら onDocumentMouseUpを実行しない -->
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
<!-- mouseoutを実行したら、 onDocumentMouseOutを実行しない-->

mouseXOnMouseDown = event.clientX - windowHalfX;
<!-- mouseXOnMouseDownの定義 -->
targetRotationOnMouseDown = targetRotation;
<!--targetRotationOnMouseDownに、targetRotationを入れ込む -->
}

function onDocumentMouseMove( event ) {
<!-- onDocumentMouseMoveの関数は、event実行により、実際に動かされる。 -->
mouseX = event.clientX - windowHalfX;
<!-- mouseXの定義を＾行う -->
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
<!-- targetRotationの定義を行う -->

}

function onDocumentMouseUp( event ) {
<!-- onDocumentMeetUpは、eventを実行すると、動かされる。 -->
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
<!-- documentのイベントじ実行するとonDocumentMouseMoveが失敗に終わる -->
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
<!-- mouseupを実行すると、onDocumentMouseUpが実行されない -->
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
<!-- mouseoutを、実行すると、onDocumentMouseOutが実行されない。 -->

}

function onDocumentMouseOut( event ) {
<!-- onDocumentMouseOutの関数は、eventが押された時に実行される。 -->
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
<!-- mousemoveが実行されると、onDocumentMouseMoveが実行されない -->
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
<!-- mouseupが実行されると、onDocumentMouseUpは、できない。 -->
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
<!-- mouseoutを実行すると、onDocumentMouseOutが実行されない -->

}

function onDocumentTouchStart( event ) {
<!-- onDocumentTouchStartの関数は、eventが実行された時に実行される。 -->
if ( event.touches.length === 1 ) {
<!-- eventのタッチの長さが、1なら、 -->
event.preventDefault();
<!-- イベントがキャンセル可能である場合、キャンセルする。 -->
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
<!-- mouseXOnMouseDownの定義 -->
targetRotationOnMouseDown = targetRotation;
<!-- targetRotationOnMouseDownにtargetRotationを入れ込む -->
}

}

function onDocumentTouchMove( event ) {
<!--onDocumentTouchMoveは、eventが実行されると、動く -->
if ( event.touches.length === 1 ) {
<!-- もし、タッチの長さが１ならば -->
event.preventDefault();
<!-- イベントのキャンセルが可能。 -->
mouseX = event.touches[ 0 ].pageX - windowHalfX;
<!-- mouseXの定義 -->
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
<!-- targetRotationの定義 -->

}

}

//

function animate() {
<!-- animateを実行 -->
requestAnimationFrame( animate );
<!-- 次のコンマがはじまる時に、animateを実行していく関数 -->
render();
<!-- renderを実行 -->
stats.update();
<!-- statsをupdateする。 -->
}

function render() {
<!-- rendere関数について -->
plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
<!-- plane.rotation.yの定義 -->
renderer.render( scene, camera );
<!-- sceanと、cameraを同期 -->

}

</script>

</body>
</html>