Threejs 기초 환경 구축 (2) 기본 파일 설정

다음은 기초를 닦는three가 필요합니다.js 환경
하나, index를 만듭니다.html 파일

위와 같이 cdn의three를 사용합니다.js 라이브러리
둘째, index를 구축한다.js

// import THREE from 'three'
window.onload = function () {
    console.log("this Root verion:", THREE.REVISION)
    const R = 200;
    var Root = {
        W: window.innerWidth,
        H: window.innerHeight,
        Root: document.getElementById('root'),
    }
    var renderer = new THREE.WebGLRenderer({ antialias: true })
    //      ，       ，           div    
    renderer.setSize(window.innerWidth, window.innerHeight);
    Root.Root.appendChild(renderer.domElement)

    //    
    var scene = new THREE.Scene();

    //    
    var light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 150, 0);
    scene.add(light);
    //       
    var axisHelper = new THREE.AxisHelper(800);
    scene.add(axisHelper);

    //    
    var camera = new THREE.PerspectiveCamera(60, Root.W / Root.H, 0.1, 2000);
    camera.position.set(0, 0, 1000);
    camera.lookAt(scene.position);
    scene.add(camera);
 

    //   
    var groupSphere = new THREE.Group();



    function animate() {
        renderer.setSize(window.innerWidth, window.innerHeight);
        //    
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();
}

셋째, Threejs에 대한 힌트
개인적으로 VScode를 사용하지만 프롬프트를 표시하려면 구성이 필요합니다.

npm ThreeJS 라이브러리 설치

cnpm i three -s

코드 첫 줄 가입import THREE from 'three'

테스트 시 주석이 필요합니다

더 좋은 방법으로 해결할 수 있다면, 당신의 평론을 환영합니다.