전체 글 148건이 검색되었습니다.

webs

* index68 const canvas = document.querySelector("#canvas-wrapper"); const scene = new THREE.Scene(); const fov = 95; const nearDist = 0.1; const farDist = 30000; const sizes = { w: window.innerWidth, h: window.innerHeight }; const camera = new THREE.PerspectiveCamera( fov, sizes.w / sizes.h, nearDist, farDist ); camera.position.set(0, 0, Math.round(farDist / 16)); scene.add(camera); // 렌더링 const..

더 보기

왜 이게 귀엽지!

index67 const canvas = document.querySelector('.webgl') const scene = new THREE.Scene() const sizes = { width: window.innerWidth, height: window.innerHeight } const degreesToRadians = (degrees) => { return degrees * (Math.PI / 180) } const params = { rx: 0, ry: 0, rz: 0 } const renderer = new THREE.WebGLRenderer({canvas}) const render = (renderer) => { renderer.setSize(sizes.width, sizes.height)..

더 보기

index66 const simplex = new SimplexNoise(); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000); camera.position.y = 20; camera.position.x = -20; camera.position.z = 50; const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setClearColor(new THREE.Colo..

더 보기

index65 let palette = [ new THREE.Color("#00ffff"), new THREE.Color("#ff00ff"), new THREE.Color("#ffff00"), new THREE.Color("#ffffff") ]; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); if (wi..

더 보기

동동

index12 class Canvas { constructor() { this.canvas = document.getElementById('canvas'); this.dpr = window.devicePixelRatio || 1; // this.dpr = 1; this.radius = 8 * this.dpr; this.spread = this.radius * 0.5 / this.dpr; this.ctx = this.canvas.getContext('2d'); this.ctx.scale(this.dpr, this.dpr); this.mouse = { x: 0, y: 0, }; this.setCanvasSize = this.setCanvasSize.bind(this); this.handleClick = th..

더 보기

둥둥

window.addEventListener('load', init, false); function init() { console.log('Init Functions'); createWorld(); createLights(); createBoat(); createGrid(); createOcean(); animation(); } var Theme = { _dark: 0x000000, // Background _cont: 0xFFD3D3, // Lines _blue: 0x000FFF, _red: 0xF00000, // _cyan: 0x00FFFF, // Material _white: 0xF00589 // Lights } var scene, camera, renderer, container; var _widt..

더 보기

독립

index63 var tp = 2; var am = 3; var ap = 360; var ct = 100; var vl = 10000; var cameraPosZ = 5; var wf = false; var setSizeZero = 0.001; var colorMaterial = Math.random() * 0xFFFFFF; var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseMove(event) { event.preventDefault(); mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window..

더 보기

굴렁

var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = false; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.needsUpdate = true; document.body.appendChild(renderer.domElement); window.addEventListener('resize', onWindowResize, false); function onWindowResize() { camera.aspect = windo..

더 보기

도시속

var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); if (window.innerWidth > 800) { renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.needsUpdate = true; }; document.body.appendChild(renderer.domElement); window.addEventListener('resize', onWindowResize, false); function onWindo..

더 보기

너 싫어

index1 var scketch = function (p) { var particleNum = 100; var particle; var particles = []; var pixels = []; var img; var Particle = function (pos, v, d, c) { this.p = pos; this.temp_p = this.p.copy(); this.defaultPos = this.p.copy(); this.v = v; this.a = p.createVector(0, 0); this.d = d; this.r = d / 2; this.color = c; this.mass = this.r; this.noise_x = p.random(1000); this.noise_y = p.random(..

더 보기

배구

const heart = ' '; const star = ' ' const cloud = ' ' const data = [heart, star, cloud] const max = 50 let particles = [] class Ball { constructor(shape) { this.shape = $(shape) this.speed = 2 + Math.random() * 6 this.vx = (Math.random() * this.speed) - (Math.random() * this.speed) this.vy = (Math.random() * this.speed) - (Math.random() * this.speed) this.radius = 10 + Math.round(Math.random() *..

더 보기

index60 window.addEventListener('load', init, false); function init() { console.log('Init Functions'); createWorld(); createLights(); createGrid(); // createGUI(); createSkin(); createLife(); } var Theme = { _gray: 0x222222, _dark: 0x000000, // Background _cont: 0x444444, // Lines _blue: 0x000FFF, _red: 0xF00000, // _cyan: 0x00FFFF, // Material _white: 0xF00589 // Lights } var scene, camera, ren..

더 보기

카멜레온 눈

index59 let mouseX = window.innerWidth / 2; let mouseY = window.innerHeight / 2; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100); camera.position.set(0, 0, 25); var renderer = new THREE.WebGLRenderer({ antialias: true, }); renderer.shadowMap.enabled = true; renderer.setSize(window.innerWidth, window.innerHeight); documen..

더 보기

울렁

index58 let scene, camera, renderer, orbitControls, sphereMesh, simplexNoiseArr; const simplexNoise = new SimplexNoise(); const render = () => { let timeStamp = Date.now() * 0.01; sphereMesh.material.uniforms.textureAmplitude.value = Math.sin(timeStamp * 0.01) + Math.sin(timeStamp * 0.01); sphereMesh.material.uniforms.color.value.offsetHSL(0.001, 0, 0); const position = sphereMesh.geometry.attri..

더 보기

울렁

index57 class Stage { constructor() { this.renderParam = { clearColor: 0x000000, width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { fov: 60, near: 0.1, far: 10.0, lookAt: new THREE.Vector3(0, 0, 0), x: 0, y: 0, z: 3.0 }; this.scene = null; this.camera = null; this.renderer = null; this.geometry = null; this.material = null; this.mesh = null; this.isInitialized = false; ..

더 보기

자갈

56 let ball let pattern let palettes const win = { w: window.innerWidth, h: window.innerHeight } const mouse = { x: win.w * 0.5, y: win.h * 0.5 } const lerp = (v0, v1, t) => (v0 * (1 - t) + v1 * t) class Pattern { constructor(obj) { Object.assign(this, obj) this.init() } init() { this.canvas = document.querySelector(`#${this.id}`) || document.createElement('canvas') this.canvas.id = this.id this..

더 보기

버티고

index11 let canvas = document.getElementById('mitosys'), ctx = canvas.getContext('2d'), winW = canvas.width = window.innerWidth, winH = canvas.height = window.innerHeight, ticker = 0, Balls = [], maxBalls = 10, easing = 1 / 10; class Ball { constructor(options) { Object.assign(this, options); this.r = 100 + Math.random() * 100; this.pos = { x: Math.random() * winW, y: Math.random() * winH }; thi..

더 보기

휴지

index55 let scene, camera, renderer, ribbon const container = document.querySelector('#container') const init = () => { scene = new THREE.Scene() camera = new THREE.PerspectiveCamera(75, 1, 0.1, 10000) camera.position.z = 2 renderer = new THREE.WebGLRenderer({antialias: true, alpha: true}) container.appendChild(renderer.domElement) ribbon = new THREE.Mesh( new THREE.PlaneGeometry(1, 1, 128, 128)..

더 보기

포털

index54 var renderer, scene, camera; var sapphiresapphiresapphire, uniforms; var displacement, noise; const TEXTURE_PATH = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1037366'; init(); animate(); function init() { camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 400; scene = new THREE.Scene(); loader = new THREE.TextureLoader(); lo..

더 보기

헥사곤

var camera, scene, renderer; init(); animate(); function init() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 60; scene = new THREE.Scene(); // lights function createLight(color) { var pointLight = new THREE.PointLight(color, 7, 25); var geometry = new THREE.SphereGeometry(0.1, 0.1, 0.1); var material = new THREE.MeshBasicMateria..

더 보기

우주2

var camera1, camera2, scene1, scene2, renderer1, renderer2; var isUserInteracting = false, onMouseDownMouseX = 0, onMouseDownMouseY = 0, lon = 0, onMouseDownLon = 0, lat = 0, onMouseDownLat = 0, phi = 0, theta = 0; init(); animate(); function init() { var container1, mesh1; var container2, mesh2; container1 = document.getElementById('space-container'); container2 = document.getElementById('space..

더 보기

우주

var camera, scene, renderer; var texture_placeholder, isUserInteracting = false, onMouseDownMouseX = 0, onMouseDownMouseY = 0, lon = 90, onMouseDownLon = 0, lat = 0, onMouseDownLat = 0, phi = 0, theta = 0, target = new THREE.Vector3(); init(); animate(); function init() { var container, mesh; container = document.getElementById('container'); camera = new THREE.PerspectiveCamera(75, window.innerW..

더 보기

얼마나 남았니?

index48 import { FragmentShader, Texture, Uniform } from 'https://cdn.skypack.dev/wtc-gl@1.0.0-beta.23'; const shaderF = document.querySelector('#fragShader').innerText; const FSWrapper = new FragmentShader({ fragment: shaderF }); const { gl, uniforms } = FSWrapper; const texture = new Texture(gl, { wrapS: gl.REPEAT, wrapT: gl.REPEAT }); const img = new Image(); img.crossOrigin = "anonymous"; im..

더 보기

정자의 목표

* index10 var settings = { numParticles: 180, opacityDecay: 0.20, }; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); function fill(rgb, amt) { ctx.beginPath(); ctx.rect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height); ctx.fillStyle = "rgba(" + [...rgb, amt] + ")"; ctx.fill(); } function drawCircle(x, y, radius, color) { ctx.beginPath(); ctx.a..

더 보기

정자의 고달픔

* index9 var canvas = document.createElement('canvas') var canvas2 = document.createElement('canvas') document.getElementsByTagName('body')[0].appendChild(canvas) document.getElementsByTagName('body')[0].appendChild(canvas2) var ctx = canvas.getContext('2d') var ctx2 = canvas2.getContext('2d') var numParticles = 400 var bg = [18, 10, 34] var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#..

더 보기

행복은 저 하늘의 별

* index8 class Circle { constructor(x, y) { this.x = x; this.y = y; this.r = 3; this.done = false; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); setRandomColor(); ctx.fill(); } } let canvas; let ctx; let w, h; let circles; let colors; function setup() { canvas = document.querySelector("#canvas"); ctx = canvas.getContext("2d"); reset(); window.addEventListener("resi..

더 보기

혼자라고 느낄 때

* index7 var PI2 = Math.PI * 2; var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var circles = [] var mouse = { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }; var options = { totalCircles: 10, maxRadius: 300, maxLineWidth: 150, colors: ["#105187", "#2C8693", "#F19722", "#C33325"] }; function init() { onWindowResize(); window.a..

더 보기

그대여~

index6 class TextDesintegrator { constructor(el, options) { const defaultOptions = { padding: 160, density: 4, duration: 6000 }; this.step = 0; this.count = 0; this.data = []; this.scale = 2; this.el = el; this.el.style.position = "relative"; this.el.innerHTML = `${this.el.textContent}`; this.inner = this.el.querySelector("span"); this.options = { ...defaultOptions, ...options }; this.reverse = ..

더 보기

머가 보이니

** index47 class Stage { constructor() { this.renderParam = { clearColor: 0xffffff, width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { fov: 45, 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;..

더 보기

싶었어~

* index5 class Vector { constructor(x, y) { this.x = x; this.y = y; } set(x, y) { this.x = x; this.y = y; return this; } clone() { return new Vector(this.x, this.y); } add(v) { this.x += v.x; this.y += v.y; return this; } sub(v) { this.x -= v.x; this.y -= v.y; return this; } setFromAngle(angle) { this.x = Math.cos(angle); this.y = Math.sin(angle); } addFromScalar(x, y) { this.x += x; this.y += y..

더 보기