3D 모델은 각각 다른 목적, 다양한 기능 및 다양한 복잡성을 가진 수백 가지 파일 형식으로 제공됩니다. three.js는 수많은 로더를 제공 하지만 올바른 형식과 워크 플로를 선택해야 나중에 시간과 좌절을 줄일 수 있습니다. 일부 형식은 작업하기 어렵거나 실시간 경험에 비효율적이거나 현재로서는 완전히 지원되지 않습니다.
따라서 이 가이드는 대부분의 사용자에게 권장되는 워크 플로와 예상대로 진행되지 않을 경우 시도 할 사항에 대한 제안을 제공합니다.
시작하기 전에
로컬 서버를 처음 사용하는 경우 먼저 로컬로 작업을 실행하는 방법부터 시작하십시오 . 파일을 올바르게 호스팅하면 3D 모델을 볼 때 발생하는 많은 일반적인 오류를 피할 수 있습니다.
권장 워크 플로우
가능하면 glTF (GL 전송 형식)를 사용하는 것이 좋습니다. 형식의 .GLB 및 .GLTF 버전 모두 잘 지원됩니다. glTF는 런타임 파일 전송에 중점을두기 때문에 전송하기 쉽고 크기가 빠릅니다. meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras 등의 기능이 있습니다.
public-domain glTF 파일은 같은 사이트에서 사용할 수있는 Sketchfab glTF export 를 포함함:
- Khronos 그룹의 glTF-Blender-IO
- Khronos 그룹의 COLLADA2GLTF
- Facebook으로 FBX2GLTF
- Analytical Graphics Inc의 OBJ2GLTF
- Allegorithmic의 물질 화가
- 파운드리의 모토
- Marmoset의 툴백
- 후디니 SideFX로
- MAXON의 Cinema 4D
- … 그리고 더 많은
만일 사용하는 도구에서 glTF를 지원하지 않는 경우 작성자에게 glTF 내보내기를 요청하거나 the glTF roadmap thread. 에 게시하세요.
glTF 를 선택할 수 없는 경우 FBX, OBJ 또는 COLLADA와 같은 널리 사용되는 형식도 사용 가능하며, 이래야 정기적으로 유지 관리됩니다.
Loading
three.js에는 기본적으로 소수의 로더 (예 : ObjectLoader ) 만 포함됩니다. 다른 로더 는 페이지에 개별적으로 추가해야합니다. 빌드 도구의 선호도 및 편의에 따라 다음 중 하나를 선택하십시오.
// global script
<script src="GLTFLoader.js"></script>
// commonjs
var THREE = window.THREE = require('three');
require('three/examples/js/loaders/GLTFLoader');
// ES modules
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';로더를 가져 오면 장면에 모델을 추가 할 수 있습니다. 구문은 로더마다 다릅니다. 다른 형식을 사용하는 경우 해당 로더의 예제와 설명서를 확인하십시오. glTF의 경우 전역 스크립트 사용은 다음과 같습니다.
var loader = new THREE.GLTFLoader();
loader.load( 'path/to/model.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );자세한 내용은 GLTFLoader 설명서 를 참조 하십시오.
문제 해결
당신은 멋찐 작품을 모델링하는 공을 드렸으며, 드디어 웹 페이지에로드했습니다. 😭 그런데 색상이 외곡되었거나 완전히 누락되었습니다. 아래의 문제 해결 단계부터 시작하십시오.
- JavaScript 콘솔에서 오류를 확인하고 .load () 를 호출 할 때 onError 콜백을 사용 하여 결과를 기록 했는지 확인하십시오 .
- 다른 실행 가능한 응용 프로그램에서 모델을 불러 봅니다. glTF 파일의 경우, 드래그 앤 드롭 뷰어를 three.js 및 babylon.js에 사용할 수 있습니다 . 하나 이상의 응용 프로그램에서 모델이 올바르게 표시되면 three.js에 대해 버그를 신고하십시오 . 응용 프로그램에서 모델을 표시 할 수없는 경우 모델을 만드는 데 사용 된 응용 프로그램으로 버그를 신고하는 것이 좋습니다.
- 1000 배로 모델을 확대 또는 축소 해보십시오. 많은 모델의 크기가 다르게 조정되며 카메라가 모델 내부에 있으면 큰 모델이 나타나지 않을 수 있습니다.
- 광원을 추가하고 배치하십시오. 어두운 곳에서는 모델이 숨겨져있을 수 있습니다.
- C:\\Path\To\Model\texture.jpg 와 같이 네트워크 탭에서 실패한 텍스처 요청을 찾으십시오 . images/ texture.jpg 와 같이 모델에 상대경로를 대신 사용하십시오. 텍스트 편집기에서 모델 파일을 편집해야 할 수도 있습니다.
도움 요청
위의 문제 해결 프로세스를 수행 한 후에도 모델이 여전히 작동하지 않는 경우 도움을 요청하는 올바른 방법을 사용하면 솔루션을 더 빨리 얻을 수 있습니다. three.js 포럼 에 질문을 게시하고 가능하면 모델 (또는 같은 문제가있는 간단한 모델)을 사용 가능한 형식으로 포함 시키십시오. 다른 사람이 문제를 신속하게 재현 할 수있는 충분한 정보 (이상적으로는 라이브 데모)를 포함시킵니다.
참고소스
참고만 하세요.. three.js 홈페이지에 있는 것들만 사용 했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js vr - sculpt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="./js/three.js"></script>
<script src="./js/GLTFLoader.js"></script>
<script type="module">
// var THREE = window.THREE = require('three');
// require('./js/GLTFLoader');
import * as GLTFLoader from './js/GLTFLoader.js';
// import * as THREE from './js/three.module.js';
import { OrbitControls } from './js/OrbitControls.js';
// 메모리 확보
var container, controls, camera, scene, renderer;
var light1, lightX = 0, lightAdd = true;
init();
animate();
function init() {
// 컨테이너 생성
container = document.createElement( 'div' );
document.body.appendChild( container );
// 공간 생성
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x222222 );
// 카메라 생성
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 50 );
camera.position.set( 1, 5, 7 ); //정면:0 , 지상높이:0, 가깝게:0
// 마우스 드래그
controls = new OrbitControls( camera, container );
controls.target.set( 0, 1.6, 0 );
controls.update();
// 바닥면 생성
var geometry = new THREE.PlaneBufferGeometry( 5, 6 );
var material = new THREE.MeshStandardMaterial( {
color: 0x222222,
roughness: 1.0,
metalness: 0.0
} );
var floor = new THREE.Mesh( geometry, material );
floor.rotation.x = - Math.PI / 2;
scene.add( floor );
// 바닥 그리드
var grid = new THREE.GridHelper( 20, 100, 0x111111, 0x111111 );
scene.add( grid );
// 객체: 모델 불러오기
var loader = new THREE.GLTFLoader();
//loader.load( './model/building.glb', function ( gltf ) {
loader.load( './model/CesiumMilkTruck.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
// 객체: 네모박스 생성
var geometry = new THREE.BoxBufferGeometry( 0.5, 1.8, 0.5 );
var material = new THREE.MeshStandardMaterial( {
color: 0x444444,
roughness: 1.0,
metalness: 0.0
} );
var building1 = new THREE.Mesh( geometry, material );
building1.position.y = 0.8;
building1.position.z = 0;
scene.add( building1 );
var building2 = new THREE.Mesh( geometry, material );
building2.position.y = 0.8;
building2.position.z = 2.0;
scene.add( building2 );
var building3 = new THREE.Mesh( geometry, material );
building3.position.y = 0.8;
building3.position.z = -1.0;
scene.add( building3 );
// 조명 생성
light1 = new THREE.SpotLight( 0xffffff , 5);
light1.position.set( 0, 5, 10 );
light1.castShadow = true;
scene.add( light1 );
var light2 = new THREE.DirectionalLight( 0x888888 );
light2.position.set( 10, 5, 0 );
scene.add( light2 );
var light3 = new THREE.DirectionalLight( 0x444444 );
light3.position.set( 0, 4, 10 );
scene.add( light3 );
//scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
scene.add( new THREE.HemisphereLight( 0x888888, 0x444444 ) );
// 렌더링 엔진
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.xr.enabled = true;
container.appendChild( renderer.domElement );
}
function animate() {
renderer.setAnimationLoop( function(){
if(lightAdd){
lightX += .1;
}else{
lightX -= .1;
}
if(lightX > 10) lightAdd = false;
if(lightX < 0) lightAdd = true;
light1.position.set( lightX, 5, 10 );
renderer.render( scene, camera );
});
}
</script>
</body>
</html>
원문 : https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models
'프론트엔드 개발 놀이터 > Three.js' 카테고리의 다른 글
| WebGL을 사용한 애니메이션 및 상호 작용 기법 탐색 (사례 연구) (0) | 2020.02.05 |
|---|---|
| Shadows(그림자) 적용하기 (0) | 2020.02.05 |
| 3차원 공간의 개념 (0) | 2020.02.03 |
| Texture Animation - 움직이는 GIF 처럼 사용 (0) | 2020.02.03 |
| Three.js 에서 Audio 사용하기 (0) | 2020.02.03 |