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'
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: {
},
vertexShader: glslify(myVert),
fragmentShader: glslify(myFrag),
side: THREE.DoubleSide
})
);
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 });
const line = new THREE.Line(geometry, material);
line.position.x = 10;
this.scene.add(line);
const ggg = new LineGeometry();
ggg.setPositions( vertices );
let line2 = new Line2( ggg, new LineMaterial( {
color: 0xffffff,
linewidth: 0.001,
vertexColors: false,
dashed: false,
alphaToCoverage: true,
} ) );
line2.computeLineDistances();
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);
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix()
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
}