three.jsのサンプルをいじってカメラの動きを確認してみた

カメラ位置を自動で動かすなら、OrbitControlsは使えない
カメラ位置を自動で動かさないなら、OrbitControlsを使える

カメラ自動回転

render()部分のカメラの自動回転に着目。

javascript

// Detector.js webgl使えないブラウザへのサポート
// http://gupuru.hatenablog.jp/entry/2014/01/05/224813 
if ( ! Detector.webgl ) {
    Detector.addGetWebGLMessage();
    document.getElementById( 'container' ).innerHTML = "";
}

var container, stats;
var camera, controls, scene, renderer;
var sphere;
var parameters = {
    width: 2000,
    height: 2000,
    widthSegments: 250,
    heightSegments: 250,
    depth: 1500,
    param: 4,
    filterparam: 1
};
var waterNormals;

var clock = new THREE.Clock();

init();
animate();

function init() {
    container = document.createElement( 'div' );
    document.body.appendChild( container );

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

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
    camera.position.set( 2000, 10000, 2000 );

    scene.add( new THREE.AmbientLight( 0x444444 ) );

    // 球の上のライト
    var light = new THREE.DirectionalLight( 0xffffbb, 1 );
    light.position.set( - 1, 1, - 1 );
    scene.add( light );

    // 水面
    waterNormals = new THREE.TextureLoader().load( 'img/waternormals.jpg' );
    waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;

    water = new THREE.Water( renderer, camera, scene, {
        textureWidth: 512,
        textureHeight: 512,
        waterNormals: waterNormals,
        alpha:  1.0,
        sunDirection: light.position.clone().normalize(),
        sunColor: 0xffffff,
        waterColor: 0x001e0f,
        distortionScale: 50.0,
    } );

    // 水面反射
    mirrorMesh = new THREE.Mesh(
        new THREE.PlaneBufferGeometry( parameters.width * 500, parameters.height * 500 ),
        water.material
    );

    mirrorMesh.add( water );
    mirrorMesh.rotation.x = - Math.PI * 0.5;
    scene.add( mirrorMesh );

    // load skybox 環境マッピング
    // http://www.atmarkit.co.jp/ait/articles/1210/04/news142_3.html
    var cubeMap = new THREE.CubeTexture( [] );
    cubeMap.format = THREE.RGBFormat;

    var loader = new THREE.ImageLoader();
    loader.load( 'img/skyboxsun25degtest.png', function ( image ) {

        var getSide = function ( x, y ) {

            var size = 1024;

            var canvas = document.createElement( 'canvas' );
            canvas.width = size;
            canvas.height = size;

            var context = canvas.getContext( '2d' );
            context.drawImage( image, - x * size, - y * size );

            return canvas;

        };

        cubeMap.images[ 0 ] = getSide( 2, 1 ); // px
        cubeMap.images[ 1 ] = getSide( 0, 1 ); // nx
        cubeMap.images[ 2 ] = getSide( 1, 0 ); // py
        cubeMap.images[ 3 ] = getSide( 1, 2 ); // ny
        cubeMap.images[ 4 ] = getSide( 1, 1 ); // pz
        cubeMap.images[ 5 ] = getSide( 3, 1 ); // nz
        cubeMap.needsUpdate = true;

    } );

    var cubeShader = THREE.ShaderLib[ 'cube' ];
    cubeShader.uniforms[ 'tCube' ].value = cubeMap;

    var skyBoxMaterial = new THREE.ShaderMaterial( {
        fragmentShader: cubeShader.fragmentShader,
        vertexShader: cubeShader.vertexShader,
        uniforms: cubeShader.uniforms,
        depthWrite: false,
        side: THREE.BackSide
    } );
    var skyBox = new THREE.Mesh(
        new THREE.BoxGeometry( 1000000, 1000000, 1000000 ),
        skyBoxMaterial
    );
    scene.add( skyBox );

    // 球体をつくる
    // http://threejs.org/docs/#Reference/Extras.Geometries/IcosahedronGeometry
    var geometry = new THREE.IcosahedronGeometry( 800, 1 ); 

    // 一面づつ色を変える
    for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
        geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
    }

    var material = new THREE.MeshPhongMaterial( {
        vertexColors: THREE.FaceColors,
        shininess: 100,
        envMap: cubeMap
    } );

    sphere = new THREE.Mesh( geometry, material );
    scene.add( sphere );

    // stats.js FPSを表示する
    // http://tmlife.net/programming/javascript/lasted-stats-js-usage.html
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );

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

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

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

function animate() {
    stats.update();
    render();

    requestAnimationFrame( animate );
}

function render() {
    // カメラ回転 
    var theta = clock.getElapsedTime();
    camera.position.x = 10000 * Math.sin(theta);
    camera.position.y = 3000 * Math.cos(theta) + 3100; // 水面下に入らないように+100
    camera.position.z = 10000 * Math.cos(theta);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    // 球
    var time = performance.now() * 0.002; // 球のスピード
    sphere.position.y = Math.sin( time ) * 1000 + 500;
    sphere.rotation.x = time * 0.5;
    sphere.rotation.z = time * 0.51;

    // 海
    water.material.uniforms.time.value += 50.0 / 60.0; // 波のスピード
    water.render();

    renderer.render( scene, camera );
}

カメラ手動回転

OrbitControlsの記述に着目。

javascript

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var stats;
var camera, controls, scene, renderer;

init();
animate();

function init() {

    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2( 0xB7B5DA, 0.002 );

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( scene.fog.color );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );

    var container = document.getElementById( 'container' );
    container.appendChild( renderer.domElement );

    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 500;

    // OrbitControls
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.enablePan = true;
    controls.enableZoom = true;
    controls.minDistance = -500.0;
    controls.maxDistance = 800.0;
    controls.target.set( 0, 0, 0 );
    controls.maxPolarAngle = Math.PI * 1; // 0.5なら下からのぞき込めなくなる

    // world
    var geometry = new THREE.BoxGeometry(10, 25, 0);
    var texture = new THREE.TextureLoader().load( 'img/hat.png' );
    var material = new THREE.MeshPhongMaterial( { map: texture, transparent: true, side: THREE. BackSide } );

    // ばらばらに配置
    for ( var i = 0; i < 2000; i ++ ) {
        mesh = new THREE.Mesh( geometry, material );
        mesh.position.x = ( Math.random() - 0.5 ) * 1000;
        mesh.position.y = ( Math.random() - 0.5 ) * 1000;
        mesh.position.z = ( Math.random() - 0.5 ) * 1000;
        scene.add( mesh );
    }

    // lights
    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 1, 1, 1 );
    scene.add( light );

    light = new THREE.DirectionalLight( 0x002288 );
    light.position.set( -1, -1, -1 );
    scene.add( light );

    light = new THREE.AmbientLight( 0x222222 );
    scene.add( light );

    // stats
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );

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

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    stats.update();
    render();
}

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