KITASENJU DESIGN BLOG

memo, html, javascript, unity

threejsでlineを描く

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import { TorusGeometry, MeshPhongMaterial, DirectionalLight, MeshBasicMaterial, Line } from 'three';
import myVert from "../glsl/shader1.vert";
import myFrag from "../glsl/shader1.frag";
import glslify from 'glslify';
import { Line2 } from 'three/examples/jsm/lines/Line2' //'three/addons/lines/Line2';
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial';

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(0xcccccc));
        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 THREE.ShaderMaterial({
                uniforms: {
                  //textureSize: {value: new THREE.Vector2(textureWidth, textureWidth)}
                },
                vertexShader: glslify(myVert),
                fragmentShader: glslify(myFrag),
                side: THREE.DoubleSide
              })
         );
         //this.scene.add(mesh);

         const geometry = new THREE.BufferGeometry();

        let points = [];
        for(let i=0;i<3*500;i+=3){
            points[i+0]=Math.random()*1000-500
            points[i+1]=Math.random()*1000-500
            points[i+2]=Math.random()*1000-500

         }
         const vertices = new Float32Array(points);

         let gg = new LineGeometry()
         gg.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

         
         geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
   
         // 線のマテリアルを作成
         const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
   
         // Lineオブジェクトを作成し、シーンに追加
         const line = new THREE.Line(geometry, material);
         line.position.x = 10;
        this.scene.add(line);


         //line2
        const ggg = new LineGeometry();
        ggg.setPositions( vertices );
        //geometry.setColors( colors );

        let line2 = new Line2( ggg, new LineMaterial( {

            color: 0xffffff,
            linewidth: 0.001, // in world units with size attenuation, pixels otherwise
            vertexColors: false,

            //resolution:  // to be set by renderer, eventually
            dashed: false,
            alphaToCoverage: true,

        } ) );
        line2.computeLineDistances();
        //line2.scale.set( 1, 1, 1 );
        this.scene.add( line2 );




         
        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);

    }

}
"FOOTER"