What’s on our mind?
Web Inspiration Site 189건이 검색되었습니다.
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..
@webs
Three.js
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..
@webs
Three.js
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..
@webs
Three.js
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..
@webs
Three.js
* 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..
@webs
Canvas
* 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', '#..
@webs
Canvas
* 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..
@webs
Canvas
* 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..
@webs
Canvas
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 = ..
@webs
Canvas
** 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;..
@webs
Three.js
* 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..
@webs
Canvas
** index4 (function () { var pi = Math.PI; var pi2 = 2 * Math.PI; this.Waves = function (holder, options) { var Waves = this; Waves.options = extend(options || {}, { resize: false, rotation: 45, waves: 15, width: 100, hue: [1, 14], // amplitude: 0.5, amplitude: 1.5, background: true, preload: true, speed: [0.001, 0.008], debug: false, fps: false, }); Waves.waves = []; Waves.holder = document.que..
@webs
Canvas
** index3 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const cw = (canvas.width = 500); const ch = (canvas.height = 400); const rad = Math.PI / 180; ctx.lineWidth = 0.1; ctx.lineJoin = "round"; let shapes = []; let m = {x: 200, y: 200}; const fl = 300; let vp = {x: cw / 2, y: ch / 8 }; let vertices = 4; let numShapes = 1020; let increment = 2 * Math.PI /..
@webs
Canvas
** index2 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width = window.innerWidth, cx = cw / 2; var ch = canvas.height = window.innerHeight, cy = ch / 2; ctx.fillStyle = "#000"; var circlesRy = []; var circlesNum = 15; var requestId = null; function Circle() { this.r = randomIntFromInterval(25, 170); this.x = randomIntFromInterval(this.r, cw -..
@webs
Canvas
** index46 window.addEventListener('load', init); function init() { const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#myCanvas'), alpha: true, antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000); // the default console.log(renderer); var ENTIRE_SCENE = 0, BLOOM_SCE..
@webs
Three.js
var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var gl = canvas.getContext('webgl'); var time = 0.0; var vertexSource = ` attribute vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); } `; var fragmentSource = ` precision highp float; uniform float width; uniform float height; vec2 resolution = vec2(width, hei..
@webs
Three.js
index44 const renderer = new THREE.WebGLRenderer(); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, 2, .1, 100); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; const light = new THREE.DirectionalLight('magenta', 1); light.position.set(0, 5, 1); scene.add(light); const light1 = new THREE.PointLight('cyan', 2); light1..
@webs
Three.js
** index43 class Stage { constructor() { this.renderParam = { clearColor: 0xffffff, width: window.innerWidth, height: window.innerHeight } this.cameraParam = { fov: 50, near: 0.01, far: 1000, lookAt: new THREE.Vector3(0, 0, 0), x: 0, y: 0, z: 7 } this.scene = null; this.camera = null; this.renderer = null; this.isInitialized = false; } init() { this._setScene(); this._setRender(); this._setCamer..
@webs
Three.js
index41 const PX_RATIO = window.devicePixelRatio Math.map = (n, start, stop, start2, stop2) => { const newval = (n - start) / (stop - start) * (stop2 - start2) + start2 return newval } Math.dist = (a, b) => { let dx = a.x - b.x, dy = a.y - b.y; return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)); } class Text { constructor(txt, args) { if (args === undefined) args = {} this.canvas = document.cre..
@webs
Three.js
index39 const renderer = new $.WebGLRenderer({antialias: false,}); const scene = new $.Scene(); const camera = new $.PerspectiveCamera(75, 2, 0.1, 100); const controls = new OrbitControls(camera, renderer.domElement); window.addEventListener("resize", () => { const { clientWidth, clientHeight } = renderer.domElement; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(clientWidth, ..
@webs
Three.js
index41 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
index40 class THREEScene { constructor(container = document.body) { this.container = container; this.setup(); this.camera(); this.addObjects(); this.eventListeners(); this.settings(); this.render(); } settings() { this.settings = { blur: 0, speed: 0.5, noiseFreq: 1.0 }; } setup() { this.clock = new THREE.Clock(); this.mouse = new THREE.Vector2(); this.scene = new THREE.Scene(); this.renderer = n..
@webs
Three.js
index38 let camera, scene, renderer, clock; let uniforms; function init() { const container = document.getElementById("shadercollab"); clock = new THREE.Clock(); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); const geometry = new THREE.PlaneBufferGeometry(2, 2); uniforms = { u_time: { type: "f", value: 1.0 }, u_resolution: { type: "v2", value: new THREE.Vector2() ..
@webs
Three.js
index37 // 화면 설정 const scene = new THREE.Scene(); // 카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 7000); camera.position.x = 7000 * -2; camera.position.z = 450; // 렌더링 설정 const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setClearColor("#000"); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWi..
@webs
Three.js
* index36 // 화면 설정 const scene = new THREE.Scene(); // 카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 0, 450); // 렌더링 설정 const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setClearColor("hotpink"); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeig..
@webs
Three.js
** index32 // 화면 let scene = new THREE.Scene(); // 카메라 let camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 1, 1000); camera.position.set(0, 0, 10); // 렌더링 let renderer = new THREE.WebGLRenderer(); renderer.setSize(innerWidth, innerHeight); renderer.toneMapping = THREE.ReinhardToneMapping; document.body.appendChild(renderer.domElement); // 화면 사이즈 window.addEventListener("resize..
@webs
Three.js
* index31 var camera; var scene; var renderer; var mouseX = 0; var mouseY = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var minX = -500; var maxX = 500; var minY = -500; var maxY = 500; var minZ = -40; var maxZ = 40; var minNodeDistance = 90; var numNodes = 300; var nodes = []; var lines = []; var moveAmplitude = 50; var lightColors = [ 0xffffff, 0xff000..
@webs
Three.js
index30 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 material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: document.ge..
@webs
Three.js
* index29 function init() { container = document.getElementById('container'); camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 3000); camera.position.z = 4; scene = new THREE.Scene(); clock = new THREE.Clock(); var geometry = new THREE.TorusGeometry(0.8, 0.3, 16, 100); uniforms = { "time": { value: 1.0 } }; var material = new THREE.ShaderMaterial({ uniforms: un..
@webs
Three.js
* index28 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 mate..
@webs
Three.js