What’s on our mind?

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

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

sphereGeometry

index105 class Planet { constructor(position) { this.position = position this.sphereGeometry = new THREE.SphereBufferGeometry(20, 100, 100) this.sphereGeometry2 = new THREE.SphereBufferGeometry(40, 100, 100) this.sphereGeometry3 = new THREE.SphereBufferGeometry(60, 100, 100) let count = this.sphereGeometry.attributes.position.count let shouldOffsetArr = new Float32Array(count) let rangeArr = new..

더 보기

애벌래

const canvas = document.querySelector('#webgl') // Debug // const gui = new dat.GUI() const parameters = { color: 0x66af67, lightColor: 0xd7f3fa, rotationX: Math.PI / 8, rotationY: Math.PI / 4, spin: () => { gsap.to(body.rotation, { y: body.rotation.y + Math.PI * 2, duration: 1, }); } } // Scene const scene = new THREE.Scene() /* Geometry */ // Material const material = new THREE.MeshLambertMate..

더 보기

유니콘

const button = document.querySelector('[data-btn]') const canvas = document.querySelector('.webgl') const scene = new THREE.Scene() scene.background = new THREE.Color(0x6c9de6) // Helpers const degreesToRadians = (degrees) => { return degrees * (Math.PI / 180) } const random = (min, max, float = false) => { const val = Math.random() * (max - min) + min if (float) { return val } return Math.floor..

더 보기

껑충껑충

const canvas = document.querySelector('.webgl'); const degreesToRadians = (degrees) => { return degrees * (Math.PI / 180) } const random = (min, max, float = false) => { const val = Math.random() * (max - min) + min if (float) { return val } return Math.floor(val) } // 화면 설정 const scene = new THREE.Scene(); // 렌더러 설정 const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); renderer..

더 보기

geometry.attributes.position

index101 let canvas, scene, camera, renderer, controls; const background = `#${new THREE.Color().setHSL(Math.random(), 0.5, 0.8).getHexString()}`; function createEnvironment() { canvas = document.querySelector("canvas"); // scene scene = new THREE.Scene(); scene.fog = new THREE.Fog(background, 0.0025, 200); // camera camera = new THREE.PerspectiveCamera(40,canvas.clientWidth / canvas.clientHeigh..

더 보기

폭포

index100 var Colors = { cyan: 0x248079, brown: 0xA98F78, brownDark: 0x9A6169, green: 0x65BB61, greenLight: 0xABD66A, blue: 0x6BC6FF }; var scene = new THREE.Scene(); var h = window.innerHeight, w = window.innerWidth; var aspectRatio = w / h, fieldOfView = 25, nearPlane = .1, farPlane = 1000; var camera = new THREE.PerspectiveCamera( fieldOfView, aspectRatio, nearPlane, farPlane); var renderer = ..

더 보기

귀여운 양 한마리

var pi = Math.PI; var scene = new THREE.Scene(); var h = window.innerHeight, w = window.innerWidth; var aspectRatio = w / h, fieldOfView = 45, nearPlane = 1, farPlane = 1000; var camera = new THREE.PerspectiveCamera( fieldOfView, aspectRatio, nearPlane, farPlane ); var renderer = new THREE.WebGLRenderer({ canvas: artboard, alpha: true, antialias: true }); const dpi = window.devicePixelRatio; ren..

더 보기

divideScalar

index98 var mousePos = { x: .5, y: .5 }; document.addEventListener('mousemove', function (event) { mousePos = { x: event.clientX / window.innerWidth, y: event.clientY / window.innerHeight }; }); var phase = 0; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 30; var renderer = new THREE.WebGLRender..

더 보기

starsElements

index16 const stars = document.getElementById('stars'); const starsCtx = stars.getContext('2d'); let screen, starsElements, starsParams = { speed: 4, number: 300, extinction: 4 }; setupStars(); updateStars(); window.onresize = function () { setupStars(); }; function Star() { this.x = Math.random() * stars.width; this.y = Math.random() * stars.height; this.z = Math.random() * stars.width; this.mo..

더 보기

파티클

const canvas = document.createElement('canvas'), width = canvas.width = window.innerWidth, height = canvas.height = window.innerHeight, context = canvas.getContext('2d'), particles = [] document.body.appendChild(canvas) for (let i = 0; i < 100; i++) { const x = Math.random() * width, y = Math.random() * height, scale = Math.random() * 1 + 10, vx = Math.random() * 2 - 2, vy = Math.random() * 2 - ..

더 보기

롤리팝

index97 const scene = new THREE.Scene(), width = window.innerWidth, height = window.innerHeight, camera = new THREE.PerspectiveCamera(90, width / height, 0.1, 1000), renderer = new THREE.WebGLRenderer(), startTime = new Date().getTime(), raycaster = new THREE.Raycaster(), timeOffset = 15, halfPI = Math.PI / 2 var composer, outlinePass; let currentTime = 0, mouse = new THREE.Vector2(0, -0.5), hov..

더 보기

무지개 도너츠

const scene = new THREE.Scene(), width = window.innerWidth, height = window.innerHeight, camera = new THREE.PerspectiveCamera(90, width / height, 0.1, 1000), renderer = new THREE.WebGLRenderer(), startTime = new Date().getTime(), raycaster = new THREE.Raycaster(), timeOffset = 15, halfPI = Math.PI / 2 var composer, outlinePass; let currentTime = 0, mouse = new THREE.Vector2(0, 0), hoverables = [..

더 보기

무지개 효과 비슷한거

var composer, outlinePass; const scene = new THREE.Scene(), width = window.innerWidth, height = window.innerHeight, camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000), renderer = new THREE.WebGLRenderer(), startTime = new Date().getTime(), timeOffset = 15 let currentTime = 0 renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(renderer.domElement) let ..

더 보기

작은 그물

index93 const canvas = document.querySelector('#bubble'); let width = canvas.offsetWidth, height = canvas.offsetHeight; const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true }); const scene = new THREE.Scene(); const setup = () => { renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); renderer.setClearColor(0xebebeb, 0); renderer.sha..

더 보기

구슬 느낌

index92 createApp({ params: { roughness: 0.1 }, async init() { // OrbitControls this.controls = new OrbitControls(this.camera, this.renderer.domElement) this.controls.enableDamping = true this.controls.autoRotate = true // Environment const envMap = await loadHDRI(hdriURL, this.renderer) this.scene.environment = envMap // Mesh const geometry = new THREE.SphereGeometry(1, 64, 32) const material =..

더 보기

sphereGeometry

index91 let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000); camera.position.set(1.5, -0.5, 6); let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true}); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); new OrbitControls(camera, renderer.domElement); let sphereGeometry = new THRE..

더 보기

배경 효과

index90 const container = document.body let width = container.offsetWidth, height = container.offsetHeight, currentTime = 0, timeAddition = Math.random() * 1000 const scene = new THREE.Scene(); const camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 0, 100) renderer = new THREE.WebGLRenderer({ alpha: true }), startTime = new Date().getTime() renderer.setSize(c..

더 보기

부드러운 배경 효과

index89 import * as THREE from 'https://cdn.skypack.dev/three@v0.122.0'; function randomInteger(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function rgb(r, g, b) { return new THREE.Vector3(r, g, b); } document.addEventListener("DOMContentLoaded", function (e) { const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); documen..

더 보기

ExtrudeGeometry

index88 class App { constructor(opts) { this.opts = Object.assign({}, App.defaultOpts, opts); this.world = new World(); this.init(); } init() { this.threeEnvironment(); window.requestAnimationFrame(this.animate.bind(this)); } threeEnvironment() { const light = new Light(); this.world.sceneAdd(light.ambient); this.world.sceneAdd(light.sun); const lights = lightBalls(this.world, light.lights); con..

더 보기

glassMaterialFlatDSide

index87 class Visualization { constructor() { this.renderer = new THREE.WebGLRenderer({antialias: true}); this.renderer.shadowMap.enabled = true; container.appendChild(this.renderer.domElement); this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); this.fakeCamera = new THREE.PerspectiveCamera(45, window.innerWidth / windo..

더 보기

스모크 효과

index86 var camera, scene, renderer, geometry, material, mesh; init(); animate(); function init() { //stats = new Stats(); // stats.setMode(0); // stats.domElement.style.position = 'absolute'; // stats.domElement.style.left = '0px'; // stats.domElement.style.top = '0px'; // document.body.appendChild(stats.domElement); clock = new THREE.Clock(); renderer = new THREE.WebGLRenderer(); renderer.setS..

더 보기

vertexAttribPointer

index85.html var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var gl = canvas.getContext('webgl'); if (!gl) { console.error("Unable to initialize 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; unif..

더 보기

GLTFLoader

index84 var scene = new THREE.Scene(); scene.background = new THREE.Color(0x092241); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(1, 1, 3.5); var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var controls = new T..

더 보기

createGlRenderer

index83 let camera, glScene, glRenderer, composer let angle = 0, speed = 0.03, radius = 1, numLights = 10, slice = Math.PI * 2 / numLights, lights = []; let coreData = { radius: 0.8, detail: 1 }; let lightData = { radius: 0.05, intensity: 1 } let isMouseMoving = false function createGlRenderer() { let glRenderer = new THREE.WebGLRenderer({antialias: true}) glRenderer.setSize(window.innerWidth, w..

더 보기

Shaders Effect

//index82 window.addEventListener('resize', onWindowResize, false); function onWindowResize() { canvas.width = multiplier * window.innerWidth; canvas.height = multiplier * window.innerHeight; gl.viewport(0, 0, canvas.width, canvas.height); gl.uniform2fv(resolutionHandle, [canvas.width, canvas.height]); } function compileShader(shaderSource, shaderType) { let shader = gl.createShader(shaderType);..

더 보기

조명 효과

const TEXTURE_PATH = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/123879/'; var camera, scene, renderer, effect, controls, element, container, rotationPoint; var textureFlare0; var textureFlare2; var textureFlare3; document.addEventListener('mousemove', onDocumentMouseMove, false); init(); animate(); /** * Initializer function. */ function init() { container = document.createElement('div'); doc..

더 보기

돌아돌아~

const c = document.querySelector('canvas'), ctx = c.getContext('2d'); c.width = window.innerWidth; c.height = window.innerHeight; const circleDegrees = [], delay = [], pointAngle = [], speed = [], count = []; let startDegree = 270; for (let i = 0; i < 15; i++) { circleDegrees[i] = startDegree; startDegree = startDegree === 360 ? 0 : startDegree += 24; } for (let i = 0; i < circleDegrees.length; ..

더 보기

기둥속으로

//index80 const canvas = document.querySelector('canvas'); canvas.width = window.innerWidth, canvas.height = window.innerHeight; const renderer = new THREE.WebGLRenderer({canvas}); renderer.setSize(canvas.width, canvas.height); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(65, canvas.width / canvas.height, 0.001, 1000); camera.position.z = 1400; const ambient = new ..

더 보기

뿌옇다.

const rand = function (min, max) { return Math.random() * (max - min) + min; } let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener('resize', function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext('2d'); ctx.globalComposi..

더 보기

그물

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(0x000000); const container = document.getElementById("myCanvas"); conta..

더 보기