What’s on our mind?

Collection of articles, design, site, and resources made by designers and publisher @Menu View

Three.js 143건이 검색되었습니다.

깜박했다.

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

더 보기

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..

  @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

더 보기

둥둥

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

더 보기

원

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

더 보기

휴지

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

더 보기

헥사곤

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

더 보기

우주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..

  @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

더 보기

머가 보이니

** 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

더 보기

출발하자

** 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

더 보기