What’s on our mind?

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

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

태극기 느낌

* three.js/index5.html class Stage { constructor() { this.renderParam = { width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { fov: 20, 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; } init() ..

  @webs

Three.js

더 보기

vec4

* three.js index4.html 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..

  @webs

Three.js

더 보기

ScrollTrigger

* three.js/index3.html class Stage { constructor() { this.renderParam = { width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { fov: 75, near: 0.001, far: 5000, lookAt: new THREE.Vector3(0, 0, 0), x: 1, y: 1, z: 40 }; this.scene = null; this.camera = null; this.renderer = null; this.geometry = null; this.material = null; this.mesh = null; this.isInitialized = false; } init..

  @webs

Three.js

더 보기

scroll SphereGeometry

* class Stage { constructor() { this.renderParam = { width: window.innerWidth, height: window.innerHeight } this.cameraParam = { fov: 60, x: 0, y: 0, z: 100 } this.scene = null; this.camera = null; this.renderer = null; this.geometry = null; this.material = null; this.mesh = null; this.isInitialized = false; } init() { this._setScene(); this._setRender(); this._setCamera(); this._setLight(); thi..

  @webs

Three.js

더 보기

PointsMaterial

* class Stage { constructor() { this.renderParam = { width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { fov: 70, lookAt: new THREE.Vector3(0, 0, 0) }; this.fogParam = { color: 0x000000, start: 50, end: 2000 }; this.scene = null; this.camera = null; this.renderer = null; this.geometry = null; this.material = null; this.mesh = null; this.isInitialized = false; } init() { ..

  @webs

Three.js

더 보기

RingGeometry

* index33 class Stage { constructor() { this.renderParam = { width: window.innerWidth, height: window.innerHeight }; this.cameraParam = { fov: 60, near: 0.001, far: 1000, x: 0, y: 0, z: 10.0 }; this.scene = null; this.camera = null; this.renderer = null; this.mesh = null; this.isInitialized = false; } init() { this._setScene(); this._setRender(); this._setCamera(); this.isInitialized = true; } _..

  @webs

Three.js

더 보기

CatmullRomCurve3

//화면 생성 let scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x000000, 30, 150); //카메라 설정 let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 150); camera.position.y = 400; camera.position.z = 400; //렌더링 설정 let renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas")}); renderer.setSize(window.innerWidth, window.innerHeight); renderer..

  @webs

Three.js

더 보기

BoxBufferGeometry

index34 //화면 생성 let scene = new THREE.Scene(); //카메라 설정 let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.x = 100; camera.position.z = 6500; //렌더링 설정 let renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearColor("#4DD0E1"); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.d..

  @webs

Three.js

더 보기

IcosahedronGeometry

** //화면 설정 var scene = new THREE.Scene(); //카메라 설정 var camera = new THREE.PerspectiveCamera(55, window.innerWidth/window.innerHeight, 0.01, 1000); camera.position.set(0, 0, 250); scene.add(camera); //렌더링 설정 var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body..

  @webs

Three.js

더 보기

HemisphereLight

*** //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 10; //렌더링 설정 renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0xe2ded2, 1.0); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(ren..

  @webs

Three.js

더 보기

OctahedronGeometry

* //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000) camera.position.y = 160; camera.position.z = 400; //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.app..

  @webs

Three.js

더 보기

OctahedronGeometry

* //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 5 //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement)..

  @webs

Three.js

더 보기

TextBufferGeometry

* //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 1000; //렌더링 설정 const renderer = new THREE.WebGLRenderer({alpha: true, antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) document.getElementBy..

  @webs

Three.js

더 보기

LatheGeometry

* //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, 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(renderer.domElement..

  @webs

Three.js

더 보기

IcosahedronGeometry

* //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 20 //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement..

  @webs

Three.js

더 보기

BoxGeometry

* //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 25 //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement..

  @webs

Three.js

더 보기

AxisHelper/GridHelper

* //화면 생성 let scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x1E2630, 0.002); //카메라 설정 let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000) camera.position.x = 200; camera.position.y = 150; camera.position.z = 300; camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); render..

  @webs

Three.js

더 보기

Orbit

* //화면 생성 let scene = new THREE.Scene(); //카메라 설정 let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 2; scene.add(camera); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); document.body.appendChild(rend..

  @webs

Three.js

더 보기

DodecahedronGeometry

DodecahedronGeometry DodecahedronGeometry(radius, detail) //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 25 //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePi..

  @webs

Three.js

더 보기

CylinderGeometry

CylinderGeometry CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength) * //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 25 //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setSize..

  @webs

Three.js

더 보기

ConeGeometry

ConeGeometry ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength) 원뿔 모양의 지오메트리는 반지름, 높이, 반지름 세그먼트, 높이 세그먼트, 원뿔의 밑면 여부(true, false), 첫 번째 세그먼트의 시작 각도, 원형 부채꼴의 중심각 * //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 25 //렌더링 설정 renderer = n..

  @webs

Three.js

더 보기

CircleGeometry

CircleGeometry CircleGeometry(radius, segments, thetaStart, thetaLength) 원 모양의 지오메트리는 반지금, 세그먼트, 세그먼트의 시작 각도, 세그먼트의 끝나는 각도로 이루어짐 * //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 25 //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha: true}); renderer.setSize(windo..

  @webs

Three.js

더 보기

Fundamentals 기초

BoxGeometry BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments). 가로, 세로, 깊이, 가로 세그먼트, 세로 세그먼트, 깊이 세그먼트가 지정된 직사각형 직육면체 지오메트리 * const {TorusGeometry} = THREE //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 25 //렌더링 설정 renderer = new THREE.WebGLRenderer({..

  @webs

Three.js

더 보기

TextGeometry

* //화면 설정 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000); camera.position.z = 5 scene.add(camera); //렌더링 설정 const renderer = new THREE.WebGLRenderer({antialias:true, alpha:true}); renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1); renderer.setSize(window.innerWidth, window.inner..

  @webs

Three.js

더 보기

threeGeometry

* //화면 설정 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000); camera.position.z = 125; scene.add(camera); //렌더링 설정 const renderer = new THREE.WebGLRenderer({antialias:true, alpha:true}); renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1); renderer.setSize(window.innerWidth, window.i..

  @webs

Three.js

더 보기

SphereGeometry

* //화면 생성 var scene = new THREE.Scene(); //카메라 설정 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight); camera.position.set(0,0,1000); //렌더링 설정 var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("webgl-canvas") }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setClearColor(new THREE.Color(0xffffff)); renderer.setSize(window.innerWi..

  @webs

Three.js

더 보기

LineBasicMaterial

** //화면 생성 const scene = new THREE.Scene(); //카메라 설정 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 220; camera.position.y = 100; //렌더링 설정 const renderer = new THREE.WebGLRenderer({alpha: true, antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, ..

  @webs

Three.js

더 보기

MeshBasicMaterial

* //화면 생성 let scene = new THREE.Scene(); scene.fog = new THREE.Fog(0xFFBD00, 8, 30); //카메라 설정 let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 10; //렌더링 설정 let renderer = new THREE.WebGLRenderer({antialias: true, alpha: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRati..

  @webs

Three.js

더 보기

heart

** //화면 생성 let scene = new THREE.Scene(); //카메라 설정 let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5000); camera.position.z = 500; //렌더링 설정 let renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1); document.body.appendChild(renderer.domElement); //컨트롤 설정..

  @webs

Three.js

더 보기

GLTFLoader

** //화면 생성 let scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x5d0361, 10, 1500); //카메라 설정 let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.x = 0; camera.position.z = 500; camera.position.y = -10; //렌더링 설정 let renderer = new THREE.WebGLRenderer({alpha: true, antialias:true}); renderer.setSize(window.innerWidth, window.innerH..

  @webs

Three.js

더 보기