Three.js 시작하기
3D 애니메이션에 대해 알아야 할 모든 것.
저는 Three.js를 배우고 싶지 않았습니다. 내 고객 중 한 명이 내Upwork 프로필을 보고 개인적으로 메시지를 보냈기 때문입니다.
그는 웹 사이트에 3D 애니메이션을 사용하려고 합니다. 그래서 인터넷을 뒤져 찾아봤습니다. 3D 애니메이션을 위한 Three.js, Blender, Sketchup, React360을 알아봤습니다.
React 360은 Three.js 개념을 사용하는 반면 Blender와 Sketchup은 3D 애니메이션을 만드는 소프트웨어입니다.
약간의 연구 끝에 클라이언트 웹 사이트에 Three.js를 사용했습니다.
여기 제가 배운 것이 있습니다.
Three.js를 시작하기 전에 최소한 JavaScript에 대해 알아야 합니다.
이전에는 개발자들이 고성능 인터랙티브 2D 및 3D 그래픽을 위해 WebGL(Web Graphics Library)을 사용했습니다. 그것에 대해 더 알고 싶다면 mdn을 방문하십시오.
WebGL은 3D 그래픽을 만드는 데 많은 코드가 필요하기 때문에 구식입니다.
그래서 Three.js라는 이름의 수정된 버전이 등장했습니다.
Three.js는 3D 자바스크립트 라이브러리입니다. Three.js를 사용하여 3D 애니메이션을 빌드하는 데 도움이 됩니다.
React360, SketchUp에 대해 들어 보셨을 것입니다. 3D 디자인을 만드는 데 사용되며 개념은 동일하게 유지됩니다.
Three.js는 충분히 멋지고, 배운 후에는 모든 프로젝트에서 사용할 것이라고 확신합니다.
설치
HTML, CSS 및 JavaScript로 작업하는 경우. Three.js의 설치는 충분히 간단합니다. Three.js를 사용하려면 한 줄의 코드를 작성해야 합니다.
원하는 디렉터리에 이름이 three인 폴더를 만듭니다. index.html 및 style.css라는 이름의 파일을 추가합니다.
index.js 내부에 아래 코드를 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<title>My first three.js app</title>
</head>
<body>
<script src=”https://threejs.org/build/three.js"></script>
</body>
</html>
그리고 그게 다야.
우리는 지금까지 아무것도 하지 않았습니다. three.js URL이 있는 스크립트 태그를 사용했습니다.
우리는 무엇을 만들고 있습니까?
BoxGeometry는 직육면체에 대한 Three.js에 있는 클래스입니다. 그런 다음 MeshBasicMaterial 클래스로 재질을 만듭니다. 그 안에 색상과 같은 매개변수를 추가할 수 있습니다.
이제 장면에 지오메트리와 재질을 추가합니다.
그러나 camera.position.z=5;는 무엇입니까? Z축을 따라 카메라를 배치하는 것입니다.
이제 장면과 카메라를 렌더링해야 하므로 함수를 만들고 해당 함수를 호출합니다.
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
그게 다야.
이제 index.html을 열거나 라이브 서버를 실행할 수 있습니다.
그러면 다음과 같은 출력이 표시됩니다.
완전한 코드
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
Three.js 사용의 이점
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<title>My first three.js app</title>
</head>
<body>
<script src=”https://threejs.org/build/three.js"></script>
</body>
</html>
BoxGeometry는 직육면체에 대한 Three.js에 있는 클래스입니다. 그런 다음 MeshBasicMaterial 클래스로 재질을 만듭니다. 그 안에 색상과 같은 매개변수를 추가할 수 있습니다.
이제 장면에 지오메트리와 재질을 추가합니다.
그러나
camera.position.z=5;는 무엇입니까? Z축을 따라 카메라를 배치하는 것입니다.이제 장면과 카메라를 렌더링해야 하므로 함수를 만들고 해당 함수를 호출합니다.
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
그게 다야.
이제 index.html을 열거나 라이브 서버를 실행할 수 있습니다.
그러면 다음과 같은 출력이 표시됩니다.
완전한 코드
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
Three.js 사용의 이점
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
결론
튜토리얼이 마음에 드셨으면 합니다. 최대한 쉽게 하려고 노력했습니다. 감사합니다.
내 최신 콘텐츠를 읽으려면 Medium에서 나를 팔로우하십시오.
Reference
이 문제에 관하여(Three.js 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/nitinfab/getting-started-with-three-js-2mnf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Three.js 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nitinfab/getting-started-with-three-js-2mnf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
