Threejs 공식 문서에 나와있는 기본 듀토리얼 소스입니다.
아래의 소스를 실제 브라우저에서 실행하게 되면 박스가 뱅글뱅글 도는 모습을 볼 수 있습니다.
첨부파일로 해당 소스를 첨부하였습니다.
three.zip<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<!-- Three js -->
<script src="https://threejs.org/build/three.min.js"></script>
<!-- WebGL 지원유무 https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js 참고 -->
<script src="./WebGL.js"></script>
<script>
// 브라우저가 WebGL을 지원하는지 체크
if ( WEBGL.isWebGLAvailable() ) {
console.log('이 브라우저는 WEBGL을 지원합니다.');
} else {
console.log('이 브라우저는 WEBGL을 지원하지 않습니다.');
}
// 화면을 표현하려면 기본적으로 scene, camera, renderer 3가지가 필요합니다.
let scene = new THREE.Scene();
/**
* 카메라
*
* PerspectiveCamera(fov: Number, aspect: Number, near: Number, far: Number)
* fov: 시야각 즉 3D 게임에서 한 화면에 어느 정도의 각도에서 보여줄지 설정
* aspect: 화면 비율 즉 넓이를 높이로 나눈값
* near: 렌더링이 수행되는 가까운점
* far: 랜더링이 수행되는 가장 먼점
*/
let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
/**
* 랜더링
*
* WebGLRenderer(parameters : Object)
*/
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
/**
* 박스 지오메트리
* 지오메트리란? 바탕으로 컴퓨터 화면에 탄생된 가상의 오브젝트를 만들 수 있게 되었는데 이 가상의 오프젝트 지칭
*
* BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer,
* heightSegments : Integer, depthSegments : Integer)
* width: x 축의 값
* height: y 축의 값
* depth : z 축의 값
* widthSegments: optional, x축의 너비에 따라 분할 된 면의 수
* heightSegments: optional, y축의 높이에 따라 분할 된 면의 수
* depthSegments : optional, z축의 깊이에 따라 분할 된 면의 수
*/
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
/**
* 조명에 영향을 받지 않는 기본 머티리얼
* 머티리얼이란? 3D 모델에 적용할 텍스쳐의 다양한 속성을 설정하는 역활
*
* MeshBasicMaterial(parameters : Object)
*/
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
/**
* 모델의 기초 구조 메쉬(그물망, 철망)
*
* Mesh( geometry : Geometry, material : Material )
* geometry: optional, 지오메트리 값
* material: optional, 머티리얼 값
*/
let cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
// 해당 장면을 랜더링하기 위한 애니메이션은 필수
function animate() {
requestAnimationFrame( animate );
// 큐브를 x, y 0.1 방향만큼씩 회전시킨다.
//cube.rotation.x += 0.1;
//cube.rotation.y += 0.1;
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| [threejs] Light를 추가해보자-03 (0) | 2018.12.12 |
|---|---|
| [threejs] 마우스 드래그 & 휠로 카메라 제어하기-02 (1) | 2018.12.11 |
| [ionic3] Ionic 3 시작하며 정리한 내용 (0) | 2018.12.06 |
| [nwjs] 윈도우에서 Node Webkit 에서 nw-gyp 설치하기 (0) | 2018.11.30 |
| [Vue] v-cloak를 사용하여 로드되는 동안 요소 숨기기 (0) | 2018.11.22 |