2016-06-02 1 views
0

three.js에서 벡터를 그릴 때 축이 다소 섞여 있다는 것을 알게되었습니다. 저는 Y가 수직축 인 것을 다룰 수 있습니다. 그러나 X와 Z는 모두 "미러링"되어 있고 원하는대로 오브젝트를 볼 수 있습니다. 어떻게 해결할 수 있습니까? 카메라 표현/객체를 회전시킬 수는 있지만 작동하지 않을 것이라고 생각합니다. 나는 일반적인 World X Y Z 표현 변경이 필요하다.Three.js 축 방향

전체 프로그램은 사용

<script src="jquery-2.1.4.js"></script> 
<script src="jquery.blockUI.js"></script> 
<script src="getparam.js"></script>  
<script src="dat.gui.js"></script> 
<script src="three.js"></script> 
<script src="OrbitControls.js"></script> 
<script src="Stats.js"></script> 
<script src="Program.js"></script> 

그래서 코드가 어디 있는지 모르겠습니다. This is the wrong JS representation 이것은 당신이 후있어 정확히 어떤 행동 This is how it should be

+0

코드없이 어떻게 애플리케이션을 테스트 할 수 있습니까? –

+0

모든 소스와 함께 폴더를 업로드하는 방법을 모르겠습니다. – alex747

+0

최소한의 코드 예제로 문제를 재현해야합니다. 모든 소스 코드를 업로드 할 필요가 없습니다. jsfiddle, codepen..etc를 사용하여 추가 코드를 추가 할 수 있습니다 .i 카메라 위치가 잘못되었습니다. –

답변

2

그것은 명확하지 않다, 그러나 카메라의 최대 다른 벡터를 지정 시도해야하는 방법입니다

이 잘못된 JS 표현입니다. 예컨대 : 가정

camera.up(0, 0, 1); 

... 카메라 당신이 렌더링에 사용하는 카메라를 포함, 당신은 Z가 "가"가되고 싶어요. 이 here's a trivial jsfiddle example를 동작하는 방법을 보려면 :

var scene, camera, cube, light; 

init(); 
animate(); 

function init() { 
    var height = 500, 
    width = 500; 
    var bg = '#000000'; 

    scene = new THREE.Scene(); 

    var axisHelper = new THREE.AxisHelper(50); 
    scene.add(axisHelper); 

    camera = new THREE.PerspectiveCamera(50, height/width, 1, 10000); 
    camera.position.set(20, 20, 20); 
    //camera.up = new THREE.Vector3(0, 0, 1); 
    camera.lookAt(axisHelper.position); 
    scene.add(camera); 
    renderer = new THREE.WebGLRenderer({ 
    antialias: true 
    }); 
    renderer.setClearColor(bg); 
    renderer.setSize(width, height); 

    var d = document.createElement('div'); 
    document.body.appendChild(d); 
    d.appendChild(renderer.domElement); 
    var c = document.getElementsByTagName('canvas')[0]; 
    c.style.width = width + 'px'; 
    c.style.height = height + 'px' 
} 

function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 

function render() { 
    renderer.render(scene, camera); 
} 

이것은 축의 방향 (X는, Y는 녹색, 적색, Z가 청색) 된 게재 AxisHelper를 렌더링한다. 카메라의 위쪽 벡터를 설정하는 줄의 주석 처리를 제거하고 다시 실행하여 차이점을 확인하십시오.

관련 문제