728x90
반응형
본 내용은 아래 강의에서 공부한 내용입니다. 강의가 정말 좋으니 추천드립니당..
Three.js 3D 인터랙티브 바로 시작하기 강의 | 코딩일레븐 - 인프런
코딩일레븐 | 실무에서 Three.js를 바로 사용할 수 있도록 커리큘럼을 구성했습니다!, 2D를 넘어 3D를 다루면 개발이 더 재밌어집니다!Three.js로 입체적인 컨텐츠 개발 함께해요. 🧩 활용도 높은 Three
www.inflearn.com
https://www.inflearn.com/users/258264/@coding11
코딩일레븐님의 소개 - 인프런
인프런 코딩일레븐님의 소개 페이지 입니다. - 코딩일레븐님 소개 | 인프런
www.inflearn.com
*헬퍼는 위치를 직관적으로 보여준다. 카메라 헬퍼, 조명헬퍼등 소스짤때 사용하기 좋다.
|
// 지정 라이트를 셋팅(색깔)
const spotLight = new THREE.SpotLight( 0xffffff );
//양수 위쪽, 음수 아래쪽 빛
spotLight.position.set(1, 2.5, 2.5);
scene.add(spotLight);
//조명 추가
//조명헬퍼
const spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="./js/three.js"></script>
<script>
const scene = new THREE.Scene();
//장면 (무대)
const camera = new THREE.PerspectiveCamera(
100,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//카메라
const renderer = new THREE.WebGLRenderer();
//랜더
renderer.setSize(window.innerWidth, window.innerHeight);
//장면 사이즈
document.body.appendChild(renderer.domElement);
//body 태그에 넣는다
const geometry = new THREE.BoxGeometry();
//box geometry 생성
const material = new THREE.MeshPhongMaterial({ color: 0x00ff });
// const material = new THREE.MeshBasicMaterial({ color: 0x00ff });
//재질 설정
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
//무대에 큐브 올려놓자.
camera.position.x = 0;
camera.position.y = 1;
camera.position.z = 4;
//카메라 위치
// const axes = new THREE.AxesHelper(10);
// scene.add(axes);
// // //x,y,z 축 표시
// const gridHelper = new THREE.GridHelper(10, 10);
// scene.add(gridHelper);
// // //바닥에 그리드 넣기
const spotLight = new THREE.SpotLight( 0xffffff );
//양수 위쪽, 음수 아래쪽 빛
spotLight.position.set(1, 2.5, 2.5);
scene.add(spotLight);
//조명 추가
//조명헬퍼
const spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);
// let step = 0;
function animate() {
requestAnimationFrame(animate);
//계속 animate 실행시켜줌
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
//계속 값을 변경해줌
// step += 0.05;
// cube.position.y += 0.1 * Math.cos(step);
// spotLight.position.y += 0.4 * Math.cos(step);
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] 빙글빙글 돌아가는 정육면체 만들기 (3) | 2025.01.01 |
| [three.js] 아이폰16 애플 사이트 만들기. 스크롤 이벤트 관련 (0) | 2024.12.31 |
| [three.js] iphone16이 돌아가는 스크롤 만들기 (0) | 2024.12.30 |
