2017-05-04 27 views
3

this one 또는 그 외 여러 항목과 매우 유사하기 때문에 중복 된 질문으로 보일 수 있지만 실제로 본 게시물 중 어느 것도 문제는 (물론, 나야;) ...), 그러므로 나는 그것을 여기에 올리려고한다. 왜냐하면 그것은 나를 정말로 미치게 만든다.Three.js -> FileLoader (scope.manager)가 생성자가 아닙니다.

Angular CLI로 생성 된 Angular2 프로젝트 (백엔드 작업 또는 트래 피킹 없음, HTML + CSS + JS 파일 ... 현재까지 모두 최신). 나는 NPM을 통해 Three.js를 및 3 OBJ 로더 수입이처럼 내 구성 요소를 선언 한 : 나는 어떤 모양, 사용 조명과 음영을 그릴 수 있지만, 외부 .OBJ 파일에서 메쉬를로드 할 수 없습니다

import * as THREE from 'three'; 
declare var require: any; 
const OBJLoader = require('three-obj-loader')(THREE); 

. 내가 파일에서 OBJ를로드 할 때, 나는 콘솔 오류가 나타납니다

const manager = new THREE.LoadingManager(); 
    const loader = new THREE.OBJLoader(manager); 
    loader.load('./working/path/to/file.obj', function (object) { 

     object.position.x = 0; 
     object.position.y = 0; 
     object.scale.x = 10; 
     object.scale.y = 10; 
     object.scale.z = 10; 
     const texture = THREE.TextureLoader('./working/path/to/file.jpg'); 
     const material = new THREE.MeshLambertMaterial({ map: texture }); 
     const mesh = new THREE.Mesh(object, material); 
     scene.add(mesh); 
    }); 

나는 이유를 알 수는 없지만 : :이처럼 보이는 많은 변화를 시도했다

TypeError: undefined is not a constructor (evaluating 'new THREE.FileLoader(scope.manager)') 

캔버스는 empty.The입니다 오류는 from here을 설치 한 "three-obj-loader"모듈의 49 행을 참조합니다. 이 관련 될 수

THREE.OBJLoader.prototype = { 

constructor: THREE.OBJLoader, 

load: function load(url, onLoad, onProgress, onError) { 

    var scope = this; 

    var loader = new THREE.FileLoader(scope.manager); 
    loader.setPath(this.path); 
    loader.load(url, function (text) { 

    onLoad(scope.parse(text)); 
    }, onProgress, onError); 
}, 

확실하지 경우,하지만 설치하거나 일반 JS 소스 파일을 사용하여,이 모듈에 대한 특별한 유형을 선언하지 않았다 : 언급 한 타사 코드의 일부이다. 또한 어떤 파일 로더도 설치하지 않았습니다.

참고 : OBJLoader2를 here에서 구현하려고했지만 동일한 결과가 나타납니다.

감사합니다.

최저 K

+0

OK 지원 패키지를 (원래의 질문에 언급 된), 그래서 당신은을 통해 얻을 수있는 Three.js를 소스 파일을 비교 Github에서 현재 zip 패키지 (dev)가있는 NPM. NPM이 r77에 서비스를 제공하는 것으로 보이지만 개발자는 r85입니다. 중요한 차이가 있습니다.한 가지 주목할 점은 NPM 패키지가 FileLoader에 대한 참조가 누락되어 FileLoader에 대한 소스 파일이 없다는 것입니다. 오류가 발생하면 합리적이라고 생각합니다. 음 ... Three.js의 구조에 깊이 관여하지 않습니다. 따라서, 내가 사용하는 모듈에서 그 소스를 다시 쓰거나 내 프로젝트와 함께 dev 패키지를 만드는 것이 어렵다. (나쁘다. 배워야한다.). – Kristievnee

+0

방금 ​​메모를했는데, 방금'npm'에서'three-js'를 꺼내 r79를 얻었습니다. stil에는'THREE.FileLoader'가 포함되지 않았으므로'three-js' 버전과'npm'에 호스트 된'three-obj-loader' 버전 사이에 미스 매치가 있어야합니다. – TheJim01

+0

메모 주셔서 감사합니다. 그것은 흥미 롭습니다. 어떤 명령을 사용 했습니까? 내가 플래그가없는 간단한 설치를하면 r77 (v0.77.1)이 표시되고 @latest 또는 @^0.79.0을 사용하면 다음과 같은 메시지가 나타납니다. "npm ERR! notarget 유효한 설치 대상 : npm ERR! notarget 0.0. 1, 0.0.2, 0.1.0, 0.72.0, 0.73.0, 0.73.2, 0.77.0, 0.77.1 "... – Kristievnee

답변

1

OK! @ TheJimO1과 그의 의견 덕분에 문제를 해결할 수있었습니다. 외부 파일에서

declare var require: any; 
const OBJLoader = require('three-js/addons/OBJLoader'); 
const THREE = require('three-js')([OBJLoader]); 

OBJloader 부하를 문제없이 지금 : 그때 나는이처럼 내 구성 요소로 수입 ... 내가 이전에 사용하던 MrDoob의 패키지와는 다른 파일을 제공하는 다른 NPM package by JordanDelcros을 꺼냈다.

는 UPDATE : 다시 한 번, @ TheJimO1 덕분에,이 more official package이 Three.js를 최신 버전을 지원하고 세 OBJ 로더 작업과 다른 방식으로이 일을 할 수 있었다. 적어도 두 개의 서로 다른 작업 솔루션이 의미

declare var require: any; 
const THREE = require('three'); 
const OBJLoader = require('three-obj-loader')(THREE); 

음을 : 다음과 같이 단지 수입 I는

[A]를 사용 이전에 모든 포틀랜드 R77을 지원하는 JordanDelcros에 의해 단일 NPM 패키지를 언급 ​​포함;

[B] 세 OBJ 로더와 함께 위에서 언급 한 많은 공식 세 가지 패키지를 사용 R85

+0

그건 그렇고, 여기에 패키지가 있습니다. 실제로 원한다면 : https://www.npmjs.com/package/three 여기에 언급 한 것은 제가 제안한 것과 동일합니다. 그러나 공식 소스에 찬성하여 반대됩니다. – TheJim01

+0

안녕하세요, 슈퍼입니다! 슈퍼 혼란뿐만 아니라 슈퍼 영리한 ... 이것은 당신이 게시 한 모든 최근 기능을 지원하지만, 외부 OBJloader가 필요 ... 세 obj - 로더와 함께 작동합니다 ... 감사합니다 !!! – Kristievnee