javascript - 将相机放置在 Three.js 立方体内

Question

我开始学习 Three.js。我研究了网站上的入门部分并查看了一些示例，但我无法弄清楚很多事情。

我想做的是创建一个立方体(一个盒子)并将相机放在它的中间，这样我就可以看到每个面的内侧。这实际上可能吗？

查看文档、各种示例和 stackoverflow，现在我处于这一点:

var camera, scene, renderer;

var isUserInteracting = false,
    onMouseDownMouseX = 0, onMouseDownMouseY = 0,
    lon = 0, onMouseDownLon = 0,
    lat = 0, onMouseDownLat = 0,
    phi = 0, theta = 0;

init();
animate();

function init() {

    var container, mesh;

    container = document.getElementById( 'container' );

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
    camera.target = new THREE.Vector3(1, 1, 1);

    scene = new THREE.Scene();

    var geometry = new THREE.BoxGeometry(7, 7, 7);
    geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));


var material = [
    new THREE.MeshBasicMaterial( { color: 0x8bf2a7 } ),
    new THREE.MeshBasicMaterial( { color: 0x1ad9a5 } ),
    new THREE.MeshBasicMaterial( { color: 0xdadcad } ),
    new THREE.MeshBasicMaterial( { color: 0xb1b1b1 } ),
    new THREE.MeshBasicMaterial( { color: 0x3a3a3a } ), // front
    new THREE.MeshBasicMaterial( { color: 0xf5f5f5 } )
    ];
    mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(material) );

    scene.add( mesh );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );

    document.addEventListener( 'dragover', function ( event ) {

        event.preventDefault();
        event.dataTransfer.dropEffect = 'copy';

    }, false );

    document.addEventListener( 'dragenter', function ( event ) {

        document.body.style.opacity = 0.5;

    }, false );

    document.addEventListener( 'dragleave', function ( event ) {

        document.body.style.opacity = 1;

    }, false );

    document.addEventListener( 'drop', function ( event ) {

        event.preventDefault();

        var reader = new FileReader();
        reader.addEventListener( 'load', function ( event ) {

            material.map.image.src = event.target.result;
            material.map.needsUpdate = true;

        }, false );
        reader.readAsDataURL( event.dataTransfer.files[ 0 ] );

        document.body.style.opacity = 1;

    }, false );

    //

    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseDown( event ) {

    event.preventDefault();

    isUserInteracting = true;

    onPointerDownPointerX = event.clientX;
    onPointerDownPointerY = event.clientY;

    onPointerDownLon = lon;
    onPointerDownLat = lat;

}

function onDocumentMouseMove( event ) {

    if ( isUserInteracting === true ) {

        lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
        lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;

    }

}

function onDocumentMouseUp( event ) {

    isUserInteracting = false;

}

function onDocumentMouseWheel( event ) {

    // WebKit

    if ( event.wheelDeltaY ) {

        camera.fov -= event.wheelDeltaY * 0.05;

        // Opera / Explorer 9

    } else if ( event.wheelDelta ) {

        camera.fov -= event.wheelDelta * 0.05;

        // Firefox

    } else if ( event.detail ) {

        camera.fov += event.detail * 1.0;

    }

    camera.updateProjectionMatrix();

}

function animate() {

    requestAnimationFrame( animate );
    update();

}

function update() {

    if ( isUserInteracting === false ) {

        // lon += 0.1;

    }

    lat = Math.max( - 85, Math.min( 85, lat ) );
    phi = THREE.Math.degToRad( 90 - lat );
    theta = THREE.Math.degToRad( lon );

    camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
    camera.target.y = 500 * Math.cos( phi );
    camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

    camera.lookAt( camera.target );

    camera.position.z = 3;
    /*
    // distortion
    camera.position.copy( camera.target ).negate();
    */

    renderer.render( scene, camera );

}

我实际上可以从内部看到立方体，但这并不是我想要的。我试图将相机放在房间的正中心，并且希望它能够自行旋转，但我不知道如何精确地移动它。

Answer 1

如果你看看这个fiddle唯一的区别是 Material 。

注释并取消注释以下行以查看效果。

THREE.ImageUtils.crossOrigin = '';

您还可以在此处阅读更多内容 issue