What’s on our mind?
전체 글 189건이 검색되었습니다.
index27 var camera, renderer; window.addEventListener('load', init); function init() { renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#myCanvas'), antialias: true }); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); const scene = new THREE.Scene(); const clock = new THREE.Clock(); camera = new THREE.PerspectiveCam..
@webs
Three.js
index26 var container; var camera, scene, renderer; var uniforms; init(); animate(); function init() { container = document.getElementById('container'); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); var geometry = new THREE.PlaneBufferGeometry(2, 2); uniforms = { time: { type: "f", value: 1.0 }, resolution: { type: "v2", value: new THREE.Vector2() } }; var materi..
@webs
Three.js
index22 class THREEScene { constructor(container = document.body) { this.container = container; this.init(); } init() { this.setup(); this.camera(); this.addToScene(); this.eventListeners(); this.render(); } setup() { this.group = new THREE.Group(); this.textureLoader = new THREE.TextureLoader(); this.clock = new THREE.Clock(); this.scene = new THREE.Scene(); this.renderer = new THREE.WebGLRende..
@webs
Three.js
* index22 class THREEScene { constructor(container = document.body) { this.container = container; this.init(); } init() { this.setup(); this.camera(); this.addToScene(); this.createParticles(); this.createBackground(); this.eventListeners(); this.render(); this.animate(); } setup() { this.scene = new THREE.Scene(); this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSi..
@webs
Three.js
index21 class Canvas { constructor() { this.scrollY = 0; this.mouse = new THREE.Vector2(0, 0); this.w = window.innerWidth; this.h = window.innerHeight; this.renderer = new THREE.WebGLRenderer({antialias: true}); this.renderer.setSize(this.w, this.h); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setClearColor(0x0b0115); const container = document.getElementById("myCanvas");..
@webs
Three.js
* index20 const container = document.getElementById("container"); //화면 생성 const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000022); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500); camera.position.z = 300; camera.position.y = 0; //조명 설정 const pointLight = new THREE.PointLight(0xffffff, 1); pointLight.position.set(-50, 1..
@webs
Three.js
* index19 let frag = ` vec4 abyssColor = vec4(1, 0.8, 0.4, 0); vec4 tunnelColor = vec4(2, 0.9, 0.3, 1); uniform float time; uniform vec2 resolution; void main() { vec2 uv = ( gl_FragCoord.xy - .6 * resolution.xy) / resolution.y * 0.3; float r = length(uv); float y = fract( r / 0.05 / ( r - 0.02 ) + time * 1.); y = smoothstep( 0.01, 4., y ); float x = length(uv); x = smoothstep( 0.5, .01, x ); gl..
@webs
Three.js
* index18 //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(1, 6, 5); camera.lookAt(new THREE.Vector3(0,0,0)); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); d..
@webs
Three.js
* index17 //변수 설정 const fullCircle = 2 * Math.PI; const timing = 10; let materialFirstCylinder, materialSecondCylinder, materialThirdCylinder, materialFourthCylinder; //화면 생성 const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 350; camera.positi..
@webs
Three.js
index16 class ThreeText { constructor( options = { appContainerSelector: "[data-app-container]" } ) { this.options = options; this.appContainer = document.querySelector( this.options.appContainerSelector ); this.iter = 0; // THREE items this.renderer; this.camera; this.scene; this.controls; this.imageTexture; this.uniforms; this.geometry; this.mesh; this.font; this.targetMeshScale = 1; // 마우스 th..
@webs
Three.js
//변수 설정 const params = { rx: 0, ry: 0, rz: 0, } const degreesToRadians = (degrees) => { return degrees * (Math.PI / 180) } //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 5 //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window...
@webs
Three.js
* index14 const heatVertex = ` uniform sampler2D heightMap; uniform float heightRatio; varying vec2 vUv; varying float hValue; void main() { vUv = uv; vec3 pos = position; hValue = texture2D(heightMap, vUv).r; pos.y = hValue * heightRatio; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0); } `; var heatFragment = ` varying float hValue; vec3 heatmapGradient(float t) { return clamp..
@webs
Three.js
index13 //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.setScalar(4); camera.lookAt(scene.position); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x44bbaa); renderer.setPixelRatio(windo..
@webs
Three.js
* index12 //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, -6, 20); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x201005); renderer.setPixelRatio(window.devicePixelRatio); docu..
@webs
Three.js
var mouseX; var mouseY; //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 400; //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(rende..
@webs
Three.js
var Vector2 = (function() { function Vector2(x, y) { this.x = x || 0; this.y = y || 0; } return Vector2; })(); Vector2.prototype.add = function(addend) { this.x += addend.x; this.y += addend.y; }; var RainDrop = (function() { function RainDrop(parent) { this.size = 3; this.parent = parent; this.init(); } return RainDrop; })(); RainDrop.prototype.init = function() { this.life = 0; this.ttl = Math..
@webs
Canvas
* index10.html //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(2, 3, 5); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.do..
@webs
Three.js
** index9.html //화면 생성 const scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x3d0764, 20, 25); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 25; //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setClearColor(0x3d0764); renderer.setSize(window.innerWidth, window.innerHeight)..
@webs
Three.js
* 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
* 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
* 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
* 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
* 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
* index33 class Stage { constructor() { this.renderParam = { width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { fov: 60, near: 0.001, far: 1000, x: 0, y: 0, z: 10.0 }; this.scene = null; this.camera = null; this.renderer = null; this.mesh = null; this.isInitialized = false; } init() { this._setScene(); this._setRender(); this._setCamera(); this.isInitialized = true; } _..
@webs
Three.js
var angle = 0.0; var y = []; var x; function setup() { createCanvas(windowWidth, windowHeight); stroke(255); strokeWeight(3); } function draw() { background( '#1d0808' ); angle += 0.02; x = angle; for ( var i = 0; i < width; i++ ) { y[i] = sin(x); y[i] = y[i] * 200; x += 1; } for ( var i = 0; i < width; i++ ) { stroke(abs(y[i] * 1.4), 0, 0); point(i * 5, height/2 + y[i] ); } }
@webs
P5.js
var al = []; function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background('#fff'); //닷 stroke('rgb(237, 34, 93)'); strokeWeight(2); for(var i=0; i
@webs
P5.js
* const bgColor = 'hotpink'; const inkColor = 'white'; function setup() { createCanvas(windowWidth, windowHeight); stroke(inkColor); strokeWeight(2); fill(bgColor); frameRate(1); } function draw() { background(bgColor); const count = round(windowWidth/12); for (let i = 0; i < count; i++) { const x = random(10, width); const y = random(10, height); const d = random(10, 250); circle(x, y, d); } }
@webs
P5.js
//화면 생성 let scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x000000, 30, 150); //카메라 설정 let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 150); camera.position.y = 400; camera.position.z = 400; //렌더링 설정 let renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas")}); renderer.setSize(window.innerWidth, window.innerHeight); renderer..
@webs
Three.js
index34 //화면 생성 let scene = new THREE.Scene(); //카메라 설정 let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.x = 100; camera.position.z = 6500; //렌더링 설정 let renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearColor("#4DD0E1"); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.d..
@webs
Three.js