次に、基礎を構築する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'

に された.

には

を する がある.

，