WEB'S

objectLoader

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

  @webs

Three.js

더 보기

Mouse

** //변수 설정 let mouseX = 0; let mouseY = 0; //화면 생성 let scene = new THREE.Scene(); //카메라 설정 let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; //렌더링 설정 let renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); //모양 설정 let..

  @webs

Three.js

더 보기

Vector3

* //화면 생성 let scene = new THREE.Scene(); scene.fog = new THREE.FogExp2('#222', 0.001); //카메라 설정 let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) camera.position.z = 500; //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.setCl..

  @webs

Three.js

더 보기

TextureLoader

//변수 설정 let t = 0, count = 0, cameraDx = 0.05, frame = 0; //화면 생성 let scene = new THREE.Scene(); // scene.background = new THREE.Color("#000000"); scene.fog = new THREE.Fog("#3c1e02", 0.5, 50); //카메라 설정 let camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.01, 1000) camera.position.set(0, 1, 32); //렌더링 설정 renderer = new THREE.WebGLRenderer({antialias:true, alpha:..

  @webs

Three.js

더 보기

Saturn

//변수 설정 const colors = [0x37BE95, 0xF3F3F3, 0x6549C0]; //화면 설정 var scene = new THREE.Scene(); //카메라 설정 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000); camera.lookAt(scene.position); camera.position.z = 500; scene.add(camera); //렌더링 설정 var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.s..

  @webs

Three.js

더 보기

IcosahedronGeometry

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

  @webs

Three.js

더 보기

Gradient

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

  @webs

Three.js

더 보기

TorusGeometry

//화면 설정 var scene = new THREE.Scene(); //카메라 설정 var width = window.innerWidth; var height = window.innerHeight; var aspect = width / height; var camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000); camera.position.set(0,0,7); //렌더링 설정 var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); document.body.appendChild(renderer.domElement); //모양 설정 //var geometry = new THREE..

  @webs

Three.js

더 보기

DodecahedronGeometry

//화면 생성 var scene = new THREE.Scene(); //카메라 설정 var width = window.innerWidth; var height = window.innerHeight; var aspect = width / height; var camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000); camera.position.set(0,0,5); //렌더링 설정 var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); document.body.appendChild(renderer.domElement); //모양 설정 var geometry = new THREE.D..

  @webs

Three.js

더 보기

BoxGeometry

//화면 생성 var scene = new THREE.Scene(); //카메라 설정 var width = window.innerWidth; var height = window.innerHeight; var aspect = width / height; var camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000); camera.position.set(0,0,5); //렌더링 설정 var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); document.body.appendChild(renderer.domElement); //박스 만들기 var cubeGeometry = new TH..

  @webs

Three.js

더 보기

Three.js

//three를 선언한다. const scene = new THREE.Scene(); //카메라를 설정한다. const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 7, 10); //렌더링을 설정하고 안티 에일리어싱을 true로 하여 계단 현상을 막아준다. const renderer = new THREE.WebGLRenderer({ antialias: true }); // 사이즈를 설정하고 body 태그 자식으로 설정 renderer.setSize(window.innerWidth, window.innerHeight); document.body...

  @webs

Three.js

더 보기

로켓 애니메이션

로켓 애니메이션

  @webs

Three.js

더 보기

오렌지 원의 다양한 이펙트

오렌지 원의 다양한 이펙트

  @webs

Three.js

더 보기

투명효과와 애니메이션

투명효과와 애니메이션

  @webs

Three.js

더 보기

엉망징창 파티클 Three.js

엉망징창 파티클 Three.js

  @webs

Three.js

더 보기

떨어지면서 깨지는 애니메이션

떨어지면서 깨지는 애니메이션

  @webs

Three.js

더 보기

방울방울 배경이 멋있는 Three.js

방울방울 배경이 멋있는 Three.js

  @webs

Three.js

더 보기

떨어지는 박스 애니메이션

떨어지는 박스 애니메이션

  @webs

Three.js

더 보기

Three.js를 이용한 회전하는 새들

Three.js를 이용한 회전하는 새들

  @webs

Three.js

더 보기

THREE.JS를 이용한 투명 효과

THREE.JS를 이용한 투명 효과

  @webs

Three.js

더 보기

리액트를 이용한 투명 효과

리액트를 이용한 투명 효과

  @webs

Three.js

더 보기

리액트를 이용한 Three.js 이펙트

리액트를 이용한 Three.js 이펙트

  @webs

Three.js

더 보기

리액트를 이용한 Three.js 효과

미리보기 리액트를 이용한 Three.js 효과

  @webs

Three.js

더 보기