Threejs 의 OBJLoader(.obj 모델링 파일 가능) 를 이용하여 3D로 모델링 파일 로드를 할 수 있습니다.
여기에 텍스쳐를 입혀서 모델링을 좀더 꾸며 보겠습니다.
※ Material 이란? 오브젝트에 적용할 수 있는 색상? 페인트? 같은 개념입니다.
※ Texture란? 3D 모델에 입힐 이미지 파일 입니다. Texture를 사용하려면 중간에 Material 매개체가 필요합니다.
※ 참고: 해당 소스를 구동시 Local에서 실행하게 되면 Cross Origin 오류가 발생하니 크롬 확장 프로그램인 Web Server for Chrome를 받아서
해당 소스를 다운받은 크롬 확장 프로그램으로 서버를 돌려서 확인 하거나 Web Server에 소스를 업로드하여 구동하시기 바랍니다.
무료 모델링 소스는 https://free3d.com/3d-models/animals 에서 받아서 다른 모델링도 적용할 수 있습니다.
obj-mtl-loader.zip↑↑↑↑↑↑↑↑↑↑
소스파일 다운로드 입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<!-- Three js -->
<script src="https://threejs.org/build/three.min.js"></script>
<!-- WebGL 지원유무 https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js 참고 -->
<script src="./libs/WebGL.js"></script>
<!-- OrbitControls.js allow the camera to orbit around a target 마우스와 카메라를 상호작용하게 합니다. -->
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<!-- OBJ Loader를 사용하기 위해 추가. https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/OBJLoader.js 와 동일 소스 -->
<script src="./libs/OBJLoader.js"></script>
<!-- OBJ Loader에 Material을 씌우기 위한 라이브러리 추가. https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/MTLLoader.js 와 동일 소스 -->
<script src="./libs/MTLLoader.js"></script>
<script>
window.onload = function (e) {
let scene = new THREE.Scene();
let light;
let camera;
let objLoader; // OBJLoader 객체를 넣을 변수를 선언합니다.
let mtlLoader; // MTLLoader 객체를 넣을 변수를 선언합니다.
initThree();
addDirectionalLight();
loadMTLLoader();
/**
* DirectionalLight를 추가하는 함수
*
* @method addDirectionalLight
*/
function addDirectionalLight() {
let light1 = new THREE.DirectionalLight(0xffffff, 1);
light1.position.set(-100, 0, 100);
let light2 = new THREE.DirectionalLight(0xffffff, 1);
light2.position.set(100, 0, 100);
let light3 = new THREE.DirectionalLight(0xffffff, 1);
light3.position.set(100, 0, -100);
scene.add(light1);
scene.add(light2);
scene.add(light3);
}
/**
* Material 파일을 로드하는 함수
*
* @method loadMTLLoader
*/
function loadMTLLoader() {
mtlLoader = new THREE.MTLLoader();
// MTLLoader Material 파일을 사용할 전역 경로를 설정합니다.
mtlLoader.setPath('./resources/Umbreon/');
// 로드할 Material 파일 명을 입력합니다.
mtlLoader.load('UmbreonHighPoly.mtl', function (materials) {
// 로드 완료되었을때 호출하는 함수
materials.preload();
loadOBJLoader(materials);
}, function (xhr) {
// 로드되는 동안 호출되는 함수
console.log('MTLLoader: ', xhr.loaded / xhr.total * 100, '% loaded');
}, function (error) {
// 로드가 실패했을때 호출하는 함수
console.error('MTLLoader 로드 중 오류가 발생하였습니다.', error);
alert('MTLLoader 로드 중 오류가 발생하였습니다.');
});
}
/**
* .obj 파일의 모델을 로드하는 함수
*
* @method loadObjLoader
* @param {Object} materials MTLLoader에서 로드한 Materials 값
*/
function loadOBJLoader(materials) {
loader = new THREE.OBJLoader();
// MTLLoader에서 로드한 materials 파일을 설정합니다.
loader.setMaterials(materials);
// OBJLoader OBJ 파일을 사용할 전역 경로를 설정합니다.
loader.setPath('./resources/Umbreon/');
// 로드할 OBJ 파일 명을 입력합니다.
loader.load('UmbreonHighPoly.obj', function (object) {
// 모델 로드가 완료되었을때 호출되는 함수
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;
scene.add(object);
}, function (xhr) {
// 모델이 로드되는 동안 호출되는 함수
console.log('OBJLoader: ', xhr.loaded / xhr.total * 100, '% loaded');
}, function (error) {
// 모델 로드가 실패했을 때 호출하는 함수
alert('모델을 로드 중 오류가 발생하였습니다.');
});
}
/**
* Threejs 초기화 함수
*
* @method initThree
*/
function initThree() {
// 브라우저가 WebGL을 지원하는지 체크
if (WEBGL.isWebGLAvailable()) {
console.log('이 브라우저는 WEBGL을 지원합니다.');
} else {
console.log('이 브라우저는 WEBGL을 지원하지 않습니다.');
}
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1); // 전체적인 배경색 수정
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
let axes = new THREE.AxisHelper(10);
scene.add(axes);
camera.position.x = 1;
camera.position.y = 3;
camera.position.z = 3;
controls = new THREE.OrbitControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.minDistance = 3;
controls.maxDistance = 10;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
animate();
}
}
</script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| [threejs] OBJ Loader 로 고양이 모델 로드하기-04 (1) | 2018.12.13 |
|---|---|
| [threejs] Light를 추가해보자-03 (0) | 2018.12.12 |
| [threejs] 마우스 드래그 & 휠로 카메라 제어하기-02 (1) | 2018.12.11 |
| [threejs] 듀토리얼-01 (0) | 2018.12.10 |
| [ionic3] Ionic 3 시작하며 정리한 내용 (0) | 2018.12.06 |