KITASENJU DESIGN BLOG

memo, html, javascript, unity

typescript threejs 雛形

threejs typescript 
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import { GUI } from 'lil-gui'
import { TorusGeometry, MeshPhongMaterial, DirectionalLight } from 'three';


export class Main{

    renderer:THREE.WebGLRenderer;
    scene:THREE.Scene;
    camera:THREE.PerspectiveCamera;
    stats:Stats;
    isDebug:boolean;
    clock:THREE.Clock;
    
    init(){
    
       this.clock = new THREE.Clock(true);
       this.clock.start();
    
       this.renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#webgl'),
        antialias: false
       });

        this.renderer.setPixelRatio(1);
        this.renderer.setClearColor(new THREE.Color(0xff469b));
        this.renderer.setSize(window.innerWidth,window.innerHeight);
         
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(20, 640/480, 1, 10000);
        this.camera.position.set(0,0,700); 
                
         window.addEventListener('resize', ()=>{
            this.onWindowResize();
         }, false)
         this.onWindowResize();

         let d:DirectionalLight = new DirectionalLight(0xffffff);
         d.position.x = 10;
         d.position.y = 10;
         this.scene.add(d);

         let mesh:THREE.Mesh = new THREE.Mesh(
            new TorusGeometry(100,50,5,5),
            new MeshPhongMaterial({color:0xff0000})
         );
         this.scene.add(mesh);

         this.tick();

    }

    tick(){
        this.renderer.render(this.scene, this.camera);    
        window.requestAnimationFrame(()=>{
            this.tick();
        });        
    }


    onWindowResize(){

        const fovRad = (this.camera.fov / 2) * (Math.PI / 180);//角度
        let distance = (window.innerHeight / 2) / Math.tan(fovRad);//距離
        this.camera.position.set(0,0,distance);//距離を指定
        //let scale:number = window.innerHeight/100;//大きさ指定
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix()
        this.renderer.setSize(window.innerWidth, window.innerHeight);

    }

}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a</title>
    
  <style type="text/css">
    body{
      margin:0;
      padding:0;
    }
    #webgl{
      margin:0;
      padding:0;
      vertical-align:bottom;
    }
  </style>
  </head>

  <body>

    <!--メインビジュアル開始-->
    <script src="./js/bundle.js?v9"></script>
    <canvas id="webgl"></canvas>

  </body>
</html>
"FOOTER"