오늘의 개발일지 2020년05월07일 three.js 사용해보기.

안녕하세요 가야태자(@talkit) 입니다. 요즘 회사 업무에서 javascript의 위대함을 느끼고 있습니다.

오늘 3d로 표출 할일이 있어서 3d 관련 스크립트를 찾아 보았습니다.

three.js 가 가장 많이 쓰이는 것 같습니다.

그리고, 자체 개발한 엔진도 있겠지만 오픈소스는 기본적으로 three.js 를 랩핑하고 있는 것 같습니다.

그래서 순수한 three.js 를 이용해서 개발을 해보기로 했습니다.

<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="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
    <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

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

    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;
    
    function render() {
        requestAnimationFrame( render );
        renderer.render( scene, camera );
    }
    render();
    
    </script>
</body>

좀 더 다른 예제들도 했지만, 위의 그림의 경우

위 코드를 이용해서 만들어 진 그림입니다.

이게 하도 여러곳의 소스를 가져다가 공부하다 보니 어디서 가져왔는지 모르겠습니다. t.t

코드가 다른 줄 알았더니 ㅋㅋㅋ

https://riptutorial.com/ko/three-js

위 사이트를 참고 했습니다.

https://threejs.org/

위 사이트를 보면 많은 예제가 나와 있습니다.

요런 게임을 만들 수 있는 것 같습니다.

제가 게임을 만들기위해서 조금 공부를 하고 있는데 거기도 도움이 될 것 같습니다.

감사합니다.