WEB'S

shader.fragmentShader

* index8.html //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 50 //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(rendere..

  @webs

Three.js

더 보기

태극기 느낌

* three.js/index5.html class Stage { constructor() { this.renderParam = { width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { fov: 20, near: 0.1, far: 100, lookAt: new THREE.Vector3(0, 0, 0), x: 0, y: 0, z: 10 }; this.scene = null; this.camera = null; this.renderer = null; this.geometry = null; this.material = null; this.mesh = null; this.isInitialized = false; } init() ..

  @webs

Three.js

더 보기

vec4

* three.js index4.html class Stage { constructor() { this.renderParam = { clearColor: 0x666666, width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { left: -1, right: 1, top: 1, bottom: 1, near: 0, far: -1 }; this.scene = null; this.camera = null; this.renderer = null; this.geometry = null; this.material = null; this.mesh = null; this.isInitialized = false; } init() { this..

  @webs

Three.js

더 보기

ScrollTrigger

* three.js/index3.html class Stage { constructor() { this.renderParam = { width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { fov: 75, near: 0.001, far: 5000, lookAt: new THREE.Vector3(0, 0, 0), x: 1, y: 1, z: 40 }; this.scene = null; this.camera = null; this.renderer = null; this.geometry = null; this.material = null; this.mesh = null; this.isInitialized = false; } init..

  @webs

Three.js

더 보기

scroll SphereGeometry

* class Stage { constructor() { this.renderParam = { width: window.innerWidth, height: window.innerHeight } this.cameraParam = { fov: 60, x: 0, y: 0, z: 100 } this.scene = null; this.camera = null; this.renderer = null; this.geometry = null; this.material = null; this.mesh = null; this.isInitialized = false; } init() { this._setScene(); this._setRender(); this._setCamera(); this._setLight(); thi..

  @webs

Three.js

더 보기

PointsMaterial

* class Stage { constructor() { this.renderParam = { width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { fov: 70, lookAt: new THREE.Vector3(0, 0, 0) }; this.fogParam = { color: 0x000000, start: 50, end: 2000 }; this.scene = null; this.camera = null; this.renderer = null; this.geometry = null; this.material = null; this.mesh = null; this.isInitialized = false; } init() { ..

  @webs

Three.js

더 보기