Threejs 의 OBJLoader(.obj 모델링 파일 가능) 를 이용하여 3D로 모델링된 고양이를 로드를 할 수 있습니다.
해당 소스를 구동시 Local에서 실행하게 되면 Cross Origin 오류가 발생하니 크롬 확장 프로그램인 Web Server for Chrome를 받아서
해당 소스를 다운받은 크롬 확장 프로그램으로 서버를 돌려서 확인 하거나 Web Server에 소스를 업로드하여 구동하시기 바랍니다.
무료 모델링 소스는 https://free3d.com/3d-models/animals 에서 받아서 다른 모델링도 적용할 수 있습니다.
obj-loader-cat.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="./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="./objloader.js"></script>
<script>
window.onload = function (e) {
let scene = new THREE.Scene();
let light;
let camera;
let loader; // OBJLoader 객체를 넣을 변수를 선언합니다.
initThree();
addDirectionalLight();
loadObjLoader();
/**
* DirectionalLight를 추가하는 함수
*
* @method addDirectionalLight
*/
function addDirectionalLight() {
light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.position.x = 5;
light.position.y = 5;
light.position.z = 5;
scene.add(light);
}
/**
* .obj 파일의 모델을 로드하는 함수
*
* @method loadObjLoader
*/
function loadObjLoader() {
loader = new THREE.OBJLoader();
loader.load('./cat.obj', function (object) {
// 모델 로드가 완료되었을때 호출되는 함수
scene.add(object);
}, function (xhr) {
// 모델이 로드되는 동안 호출되는 함수
console.log(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.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 = 2;
camera.position.y = 1;
camera.position.z = 1;
controls = new THREE.OrbitControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.minDistance = 5;
controls.maxDistance = 100;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
animate();
}
}
</script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| [threejs] MTL Loader 로 OBJ Loader 모델에 텍스쳐를 입혀보자-05 (0) | 2018.12.14 |
|---|---|
| [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 |
