What’s on our mind?
Web Inspiration Site 189건이 검색되었습니다.
index78 var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var onRenderFcts = []; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 0.01, 1000); camera.position.z = 15; camera.position.y = 2; scene.fog = new THREE.Fog..
@webs
Three.js
index77 let camera, scene, renderer, clock; let uniforms; init(); animate(); function init() { const container = document.getElementById("raymarching"); 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: ne..
@webs
Three.js
index76 const PostProcessing = { uniforms: { 'tDiffuse': { value: null }, 'howmuchrgbshifticanhaz': { value: 0.0 }, 'resolution': { value: null }, 'pixelSize': { value: 1.0 }, 'time': { value: 0.0 } }, vertexShader: ` varying highp vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `, fragmentShader: ` uniform sampler2D tDiffuse; uniform..
@webs
Three.js
index75 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._setScene(); t..
@webs
Three.js
index2 const g = { w: window.innerWidth, h: window.innerHeight, s: Math.min(window.innerWidth, window.innerHeighth), }; function setup() { g.w = window.innerWidth; g.h = window.innerHeight; g.s = min(g.w, g.h); g.cx = g.w * 0.5; g.cy = g.h * 0.5; createCanvas(g.w, g.h); } let n = 0; function draw() { background(0); n += 0.5; drawStars(); drawPlanet( g.s * (-noise(12) + 0.5), g.s * (-noise(312) *..
@webs
P5.js
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); window.addEventListener('resize', onWindowResize, false); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.i..
@webs
Three.js
{ window.addEventListener('load', init, false); function init() { createWorld(); createLights(); //createGrid(); createPrimitive(); createParticleWord(); animation(); } var scene, camera, renderer, container; var world = new THREE.Object3D(); var _width, _height; function createWorld() { _width = window.innerWidth; _height = window.innerHeight; scene = new THREE.Scene(); scene.fog = new THREE.Fo..
@webs
Three.js
index72 { class Plane { constructor() { this.$ = { canvas: document.getElementById('plane') } this.mouse = { x: 0, y: 0 }; this.width = window.innerWidth this.height = window.innerHeight this.renderer = null this.scene = null this.camera = null this.cameraAspect = this.width / this.height this.resize = this.resize.bind(this) this.mouseMove = this.mouseMove.bind(this) this.init() } init() { this...
@webs
Three.js
index71 { const settings = { width: 1, height: 1, depth: 1 } const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias: true, }) renderer.setSize(window.innerWidth, window.innerHeight) const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) camera.position.z = 3 const scene = new THREE.Scene() const controls = new TH..
@webs
Three.js
//https://unpkg.com/threejs-toys@0.0.2/build/threejs-toys.module.cdn.min.js neonCursor({ el: document.getElementById('app'), shaderPoints: 16, curvePoints: 80, curveLerp: 0.5, radius1: 5, radius2: 30, velocityTreshold: 10, sleepRadiusX: 100, sleepRadiusY: 100, sleepTimeCoefX: 0.0025, sleepTimeCoefY: 0.0025 })
@webs
Three.js
{ const renderer = new $.WebGLRenderer(); document.body.prepend(renderer.domElement); window.addEventListener('resize', () => { const { clientWidth, clientHeight } = renderer.domElement; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(clientWidth, clientHeight, false); camera.aspect = clientWidth / clientHeight; camera.updateProjectionMatrix(); }); const radius0 = 8; const radi..
@webs
Three.js
* 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..
@webs
Three.js
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)..
@webs
Three.js
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..
@webs
Three.js
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..
@webs
Three.js
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..
@webs
Canvas
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..
@webs
Three.js
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..
@webs
Three.js
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..
@webs
Three.js
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..
@webs
Three.js
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(..
@webs
P5.js
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() *..
@webs
Javascript
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..
@webs
Three.js
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..
@webs
Three.js
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..
@webs
Three.js
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; ..
@webs
Three.js
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..
@webs
Three.js
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..
@webs
Canvas
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)..
@webs
Three.js
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..
@webs
Three.js