Question

我正在用three.js模拟一个房间，我想围绕房间的中间旋转相机。此时相机仅围绕原点旋转。我不确定相机是否需要移动或是否需要翻译世界。当我要显示将从服务器流式传输的各种对象时，坐标系需要保持积极的一面。

我还想把房间搬走。我知道我需要做一些翻译，但我找不到怎么做。一些对翻译的呼吁只是扭曲了房间的视角而不是移动它。

var renderer,
scene,
camera,
controls;

renderer = new THREE.WebGLRenderer({ antialias: true });

document.body.appendChild( renderer.domElement );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 1.0 );

scene = new THREE.Scene();



//build room
var room = buildRoom(500, 500, 500);
scene.add(room);

camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(250, -500, 500); 

camera.up.set(0.16608561365563415,-0.25348683041890424,  1.5868711339427681);
camera.lookAt( new THREE.Vector3( 500, 500, 000 ) );


controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 0.8;
controls.panSpeed = 0.8;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;

animate();

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );
}

function buildRoom( xlen, ylen, zlen ) {
    var axes = new THREE.Object3D();
    //put x lines
    axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( xlen, 0, 0 ), 0xFF0000, false ) ); // +X
    axes.add( buildAxis( new THREE.Vector3( 0, ylen, 0 ), new THREE.Vector3( xlen, ylen, 0 ), 0xFF0000, false ) ); // parallel +X
    //y lines 
    axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, ylen, 0 ), 0x00FF00, false ) ); // +Y
    axes.add( buildAxis( new THREE.Vector3( xlen, 0, 0 ), new THREE.Vector3( xlen, ylen, 0 ), 0x00FF00, false ) ); // prallel+Y
    //z lines    //are four
    axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, zlen ), 0x0000FF, false ) ); // +Z
    axes.add( buildAxis( new THREE.Vector3( xlen, 0, 0 ), new THREE.Vector3( xlen, 0, zlen ), 0x0000FF, false ) ); // +Z
    axes.add( buildAxis( new THREE.Vector3( 0, ylen, 0 ), new THREE.Vector3( 0, ylen, zlen ), 0x0000FF, false ) ); // +Z
    axes.add( buildAxis( new THREE.Vector3( xlen, ylen, 0 ), new THREE.Vector3( xlen, ylen, zlen ), 0x0000FF, false ) ); // +Z
    return axes;
}


function buildAxis( src, dst, colorHex, dashed ) {
    var geom = new THREE.Geometry(),
        mat;

    if(dashed) {
        mat = new THREE.LineDashedMaterial({ linewidth: 3, color: colorHex, dashSize: 3, gapSize: 3 });
    } else {
        mat = new THREE.LineBasicMaterial({ linewidth: 3, color: colorHex });
    }

    geom.vertices.push( src.clone() );
    geom.vertices.push( dst.clone() );
    geom.computeLineDistances(); // This one is SUPER important, otherwise dashed lines will appear as simple plain lines

    var axis = new THREE.Line( geom, mat, THREE.LinePieces );

    return axis;
}

如何围绕原点以外的其他点旋转世界轴？

0 个答案: