2013-04-09 5 views
2

OBJloader.js를 사용하여 obj 파일을로드하려고합니다. html 파일이있는 동일한 폴더 내에있는 "plane.obj"파일을로드하려고하는데 "OBJLoader .js "도 같은 폴더에 있습니다.Three.js OBJLoader가 obj 파일을로드하지 않습니다.

페이지가 표시되지 않습니다.

var scene = new THREE.Scene(); 
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
var geometry = new THREE.CubeGeometry(1,1,1); 
var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; 
function render() { 
    requestAnimationFrame(render); 
    cube.rotation.x += 0.01; 
    cube.rotation.y += 0.01; 
    renderer.render(scene, camera); 
} 
var texture = THREE.ImageUtils.loadTexture('tex.jpg'); 
var loader = new THREE.OBJLoader(); 
loader.load('plane.obj', function (object) { 
    scene.add(object); 
}); 
render(); 
+0

콘솔에 오류가 표시됩니까? – mrdoob

+0

plane.obj를 다른 뷰어로로드 할 수 있습니까? 또한 장면에서 큐브를 제거 할 수 있습니다. plane.obj가 너무 작 으면 큐브 내부에 떨어질 수 있으며 크기 조정 요소가 필요합니다. – gaitat

+0

감사합니다 Mrdoob 및 Gaitat. 콘솔 오류를 확인하고 "교차 출처 요청은 HTTP에 대해서만 지원됩니다.". 서버 (http : // localhost 등)에서이 페이지를 실행해야한다고 생각합니다. – user2259784

답변

0

이것은 가능성이 파일 시스템에서 리소스를로드하려고에 의해 발생 : 여기

는 코드입니다. 아마 원래의 정책 보안 위반이 동일하고 동일한 프로토콜, 도메인 및 포트에서 페이지와 리소스를 제공해야합니다. 몇 가지 쉬운 방법이 있습니다 - 노드 JS를 통해 간단한 http 서버 앱을 사용합니다. 더 많은 옵션을 보려면 How to run things locally을 확인하십시오.

0

글쎄, 그것은 내가 현장에서 빛의 부재로 인한 것으로 밝혀졌다. 또한 부적절한 카메라 위치는 "보이지 않는"OBJ 모델로 이어질 수 있습니다. 다음 줄을 추가하십시오.

var ambientLight = new THREE.AmbientLight(0xffffff); 
scene.add(ambientLight); 
관련 문제