728x90
반응형
본 내용은 아래 강의에서 공부한 내용입니다. 강의가 정말 좋으니 추천드립니당..
Three.js 3D 인터랙티브 바로 시작하기 강의 | 코딩일레븐 - 인프런
코딩일레븐 | 실무에서 Three.js를 바로 사용할 수 있도록 커리큘럼을 구성했습니다!, 2D를 넘어 3D를 다루면 개발이 더 재밌어집니다!Three.js로 입체적인 컨텐츠 개발 함께해요. 🧩 활용도 높은 Three
www.inflearn.com
https://www.inflearn.com/users/258264/@coding11
코딩일레븐님의 소개 - 인프런
인프런 코딩일레븐님의 소개 페이지 입니다. - 코딩일레븐님 소개 | 인프런
www.inflearn.com
three.js 사이트 : https://threejs.org/
three.js installl : https://threejs.org/docs/#manual/en/introduction/Installation
three.js cdn : https://cdnjs.com/libraries/three.js/0.170.0
--- three.js에서 가장 기본적인 상식 ---
--- script기준 ---
| * 1. 무대부터 세운다. const scene = new THREE.Scene(); * 2. 카메라를 셋팅한다. const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); * 3. 렌더링을 한다 const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); *4. DOM에 가져다가 붙인다. document.body.appendChild( renderer.domElement ); *5. 도형이든 뭐든 만드는 실제 소스를 넣는다. *6. 무대에 객체를 붙인다. scene.add( cube ); *7.애니메이션, 스크롤 등을 처리하는 로직 정리 *8. 펑션 호출, 클릭이벤트, 스크롤 이벤트 등 맨 마지막에 정리 |
이슈
| *강의를 듣는 중에 import * as THREE from 'https://cdn.jsdelivr.net/npm/three/build/three.module.js'; cdn을 연결하니까 이미지가 안뜨는 경우를 봤다. 버전호환이 안되서 그런건지.. 버전도 잘봐야할 듯 *body에 margin:0처리를 안하면, 이상한 흰줄이 배경쪽에 생긴다. 너비가 꽉차게 안나오는듯 하다. body { margin: 0; } |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
/* margin:0이 없으면, 흰줄이 생김;; */
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="module">
//장면 (무대)
const scene = new THREE.Scene();
//perspectiveCamera 카메라 (fov: Number, aspect:Number, near);
//1. 시야각 : 값이 커지면 광각 카메라처럼 멀어짐
//2. 종횡비
//3. 0.1 >> 가까이 있는 무대가 줄어듬. 보통은 0.1사용
//4. 멀리있는 무대를 줄이고 늘릴수있음.
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//렌더러 : 예를 들어 3d프린터 : 찍어내는 역할을 함.
const renderer = new THREE.WebGLRenderer();
//장면 사이즈를 지정해서 찍어냄.
renderer.setSize( window.innerWidth, window.innerHeight );
//dom에다가 가져다 붙임.
document.body.appendChild( renderer.domElement );
//큐브를 만드는 실제 소스
//box geometry 설정
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
//재질 설정
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
//큐브를 씬에 붙임
scene.add( cube );
//카메라 위치
camera.position.z = 5;
//계속 실행~
//1초에 60프레임이 돌아가면서 화면을 다시 그려줌
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
728x90
반응형
'개발 > three.js' 카테고리의 다른 글
| [three.js] 마우스를 따라가는 정육면체 (0) | 2025.01.04 |
|---|---|
| [three.js] OrbitControls (0) | 2025.01.03 |
| [three.js] light 셋팅하기 (0) | 2025.01.02 |
| [three.js] 아이폰16 애플 사이트 만들기. 스크롤 이벤트 관련 (0) | 2024.12.31 |
| [three.js] iphone16이 돌아가는 스크롤 만들기 (0) | 2024.12.30 |
