three.js => ジオメトリ

備考

例はthree.js R79（改訂79）として動作します。

THREE.BoxGeometry

THREE.BoxGeometryは、立方体や立方体などのボックスを構築します。

キューブ

THREE.BoxGeometryを使用して作成されたキューブは、すべての面で同じ長さを使用します。

JavaScript

//Creates scene and camera

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//Creates renderer and adds it to the DOM

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//The Box!

//BoxGeometry (makes a geometry)
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
//Material to apply to the cube (green)
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
//Applies material to BoxGeometry
var cube = new THREE.Mesh( geometry, material );
//Adds cube to the scene
scene.add( cube );

//Sets camera's distance away from cube (using this explanation only for simplicity's sake - in reality this actually sets the 'depth' of the camera's position)

camera.position.z = 5;

//Rendering

function render() {
  requestAnimationFrame( render );
  renderer.render( scene, camera );
}
render();

'レンダリング'機能に注目してください。これは、キューブを1秒間に60回レンダリングします。

フルコード（HTML付き）

<!DOCTYPE html>
<html>
  
  <head>
    <title>THREE.BoxGeometry</title>
    <script src="http://threejs.org/build/three.js"></script>
  </head>

  <body>

    <script>
      //Above JavaScript goes here
    </script>

  </body>
  
</html>

キューボイド

行var geometry = new THREE.BoxGeometry( 1, 1, 1 );私たちにキューブを与えます。直方体を作るには、パラメータを変更するだけで、キューブの長さ、高さ、深さをそれぞれ定義します。

例：

...
//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
...

さらに（立方体が3次元であることを証明する）

キューブはちょうど正方形のように見えます。それが疑いなく3次元であることを証明するには、次のコード行を 'render'関数に追加します。

...
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
...

メリーキューブが丸く回転するのを見て...そして丸く...そして丸い...

カラフル

かすかな心のためではない...

キューブ全体の均一な色は緑です。退屈な。それぞれの顔を異なる色にするには、ジオメトリの顔を掘り下げてください。

var geometry = new THREE.BoxGeometry(3, 3, 3, 1, 1, 1);

/*Right of spawn face*/
geometry.faces[0].color = new THREE.Color(0xd9d9d9);
geometry.faces[1].color = new THREE.Color(0xd9d9d9);

/*Left of spawn face*/
geometry.faces[2].color = new THREE.Color(0x2196f3);
geometry.faces[3].color = new THREE.Color(0x2196f3);

/*Above spawn face*/
geometry.faces[4].color = new THREE.Color(0xffffff);
geometry.faces[5].color = new THREE.Color(0xffffff);

/*Below spawn face*/
geometry.faces[6].color = new THREE.Color(1, 0, 0);
geometry.faces[7].color = new THREE.Color(1, 0, 0);

/*Spawn face*/
geometry.faces[8].color = new THREE.Color(0, 1, 0);
geometry.faces[9].color = new THREE.Color(0, 1, 0);

/*Opposite spawn face*/
geometry.faces[10].color = new THREE.Color(0, 0, 1);
geometry.faces[11].color = new THREE.Color(0, 0, 1);

var material = new THREE.MeshBasicMaterial( {color: 0xffffff, vertexColors: THREE.FaceColors} );
var cube = new THREE.Mesh(geometry, material);

注：顔を着色する方法は最良の方法ではありませんが、十分に機能します（十分です）。

ノート

HTML文書の本文にあるcanvasはどこですか？

本体に手動でcanvasを追加する必要はありません。以下の3行

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

レンダラーとcanvasを作成し、 canvasをDOMに追加します。

THREE.CylinderGeometry

THREE.CylinderGeometryはシリンダーを構築します。

シリンダー

前の例を続けて、ボックスを作成するコードを以下に置き換えることができました。

//Makes a new cylinder with
// - a circle of radius 5 on top (1st parameter)
// - a circle of radius 5 on the bottom (2nd parameter)
// - a height of 20 (3rd parameter)
// - 32 segments around its circumference (4th parameter)
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
//Yellow
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

一から構築するには、ここにコードがあります。

//Creates scene and camera

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//Creates renderer and adds it to the DOM

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//The Cylinder!

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
//Yellow
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

//Sets camera's distance away from cube (using this explanation only for simplicity's sake - in reality this actually sets the 'depth' of the camera's position)

camera.position.z = 30;

//Rendering

function render() {
  requestAnimationFrame( render );
  renderer.render( scene, camera );
}
render();

もっと（円筒が3次元であることを証明する）

シリンダーはちょうど...二次元のように見えます。それが疑いなく3次元であることを証明するには、次のコード行を 'render'関数に追加します。

...
cylinder.rotation.x += 0.05;
cylinder.rotation.z += 0.05;
...

そして幸せな明るい円柱は暗く黒い背景の中でランダムに回転します...

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

three.js
ジオメトリ

サーチ…

備考