three.js
기하학
수색…
비고
예제는 three.js R79 (개정 79)에서 작동합니다.
THREE.BoxGeometry
THREE.BoxGeometry는 직육면체 및 큐브와 같은 상자를 만듭니다.
큐브
THREE.BoxGeometry를 사용하여 만든 큐브는 모든면에서 동일한 길이를 사용합니다.
자바 스크립트
//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();
'render'기능에 주목하십시오. 이것은 큐브를 초당 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>
Cuboids
행 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 를 추가 할 필요가 없습니다. 다음 세 줄
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
렌더러와 canvas 생성하고 canvas 를 DOM에 추가하십시오.
세 가지. 실린더 지오메트리
셋. 실린더. 기하학은 실린더를 만듭니다.
실린더
앞의 예에서 계속하면 상자를 만드는 코드를 아래 코드로 바꿀 수 있습니다.
//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();
더 많은 것 (실린더가 입체적임을 증명)
실린더는 단지 ... 2 차원 인 것처럼 보일 수 있습니다. 의심의 여지없이 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