What’s on our mind?
Three.js 143건이 검색되었습니다.
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
index27 var camera, renderer; window.addEventListener('load', init); function init() { renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#myCanvas'), antialias: true }); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); const scene = new THREE.Scene(); const clock = new THREE.Clock(); camera = new THREE.PerspectiveCam..
@webs
Three.js
index26 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
index22 class THREEScene { constructor(container = document.body) { this.container = container; this.init(); } init() { this.setup(); this.camera(); this.addToScene(); this.eventListeners(); this.render(); } setup() { this.group = new THREE.Group(); this.textureLoader = new THREE.TextureLoader(); this.clock = new THREE.Clock(); this.scene = new THREE.Scene(); this.renderer = new THREE.WebGLRende..
@webs
Three.js
* index22 class THREEScene { constructor(container = document.body) { this.container = container; this.init(); } init() { this.setup(); this.camera(); this.addToScene(); this.createParticles(); this.createBackground(); this.eventListeners(); this.render(); this.animate(); } setup() { this.scene = new THREE.Scene(); this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSi..
@webs
Three.js
index21 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(0x0b0115); const container = document.getElementById("myCanvas");..
@webs
Three.js
* index20 const container = document.getElementById("container"); //화면 생성 const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000022); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500); camera.position.z = 300; camera.position.y = 0; //조명 설정 const pointLight = new THREE.PointLight(0xffffff, 1); pointLight.position.set(-50, 1..
@webs
Three.js
* index19 let frag = ` vec4 abyssColor = vec4(1, 0.8, 0.4, 0); vec4 tunnelColor = vec4(2, 0.9, 0.3, 1); uniform float time; uniform vec2 resolution; void main() { vec2 uv = ( gl_FragCoord.xy - .6 * resolution.xy) / resolution.y * 0.3; float r = length(uv); float y = fract( r / 0.05 / ( r - 0.02 ) + time * 1.); y = smoothstep( 0.01, 4., y ); float x = length(uv); x = smoothstep( 0.5, .01, x ); gl..
@webs
Three.js
* index18 //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(1, 6, 5); camera.lookAt(new THREE.Vector3(0,0,0)); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); d..
@webs
Three.js
* index17 //변수 설정 const fullCircle = 2 * Math.PI; const timing = 10; let materialFirstCylinder, materialSecondCylinder, materialThirdCylinder, materialFourthCylinder; //화면 생성 const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 350; camera.positi..
@webs
Three.js
index16 class ThreeText { constructor( options = { appContainerSelector: "[data-app-container]" } ) { this.options = options; this.appContainer = document.querySelector( this.options.appContainerSelector ); this.iter = 0; // THREE items this.renderer; this.camera; this.scene; this.controls; this.imageTexture; this.uniforms; this.geometry; this.mesh; this.font; this.targetMeshScale = 1; // 마우스 th..
@webs
Three.js
//변수 설정 const params = { rx: 0, ry: 0, rz: 0, } const degreesToRadians = (degrees) => { return degrees * (Math.PI / 180) } //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 5 //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window...
@webs
Three.js
* index14 const heatVertex = ` uniform sampler2D heightMap; uniform float heightRatio; varying vec2 vUv; varying float hValue; void main() { vUv = uv; vec3 pos = position; hValue = texture2D(heightMap, vUv).r; pos.y = hValue * heightRatio; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0); } `; var heatFragment = ` varying float hValue; vec3 heatmapGradient(float t) { return clamp..
@webs
Three.js
index13 //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.setScalar(4); camera.lookAt(scene.position); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x44bbaa); renderer.setPixelRatio(windo..
@webs
Three.js
* index12 //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, -6, 20); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x201005); renderer.setPixelRatio(window.devicePixelRatio); docu..
@webs
Three.js
var mouseX; var mouseY; //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 400; //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(rende..
@webs
Three.js
* index10.html //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(2, 3, 5); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.do..
@webs
Three.js
** index9.html //화면 생성 const scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x3d0764, 20, 25); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 25; //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setClearColor(0x3d0764); renderer.setSize(window.innerWidth, window.innerHeight)..
@webs
Three.js
* index8.html //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 50 //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(rendere..
@webs
Three.js