Three.js를 사용해보기 ①

6865 단어 자바스크립트three.js

Three.js란?



three.js는 3차원 컴퓨터 그래픽을 그리는 자바스크립트 라이브러리이다. 그래서 쉽게 시작할 수 있습니다.

three.js 다운로드



여기의 다운로드에서 three.js를 가져옵니다.

기본 사용법



three.js를 작성할 위치 결정



여기을 참고로 코딩한다.
<!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>
        <script src="js/three.js"></script>
        <script>
            // ここにコードを書いていく
        </script>
    </body>
</html>

장면 만들기


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

//3DCGの描画範囲と場所を指定する
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

이 코드는 처음에 장면을 만들고, 카메라를 설치하고, 마지막으로 렌더러를 만들고, 이번에는 body에 직접 장면을 그립니다.

물건을 놓다


var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

여기에서는 박스형의 지오메트리(도형)를 작성하고, 그 박스의 재질을 정해 장면에 추가하고, 마지막으로 카메라 위치를 z축 방향으로 5진으로 하고 있다.

애니메이션과 그리기


function animate() {
    requestAnimationFrame( animate );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render( scene, camera );
}
animate();

여기서는 방금 설치 한 상자를 회전시키는 애니메이션을 만들고 장면을 그립니다.

실행 결과





상자가 회전 중입니다.

결론



이번은 three.js의 튜토리얼을 따라 진행해 갔다. 여기
Three.js와 Panolens에서 360 파노라마를 만드는 방법
자신의 포트폴리오를 설명하기만 하면

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage