Three.js：マウスを使ってキューブを回転する

Question

キューブのレンダリングに3jsを使用しています。現在、私は異なるテクスチャで回転キューブを達成しました。今私はマウスを使って回転する立方体を作ろうとしています。私の場合は、今、キューブが回転している：

function animate() { 
    mesh.rotation.x += .015; 
    mesh.rotation.y += .015; 
    mesh.rotation.y += .015; 

    render(); 
    requestAnimationFrame(animate); 
} 

を今私は2つのオプションがあります。

1. をマウス
2. を移動して保持しながら、私はキューブwhilte保持/移動を回転させ、カメラを回転させますハツカネズミ。

私はまた2つの状態を目指しています。キューブが自動的に回転するキューブとキューブがマウスをドラッグして回転するキューブ。 私はすでにOrbitControlerを試しましたが、うまくいきませんでした。マウスを使って浮動回転キューブを持つだけの簡単なソリューションはありますか？

マイコード：

THREE.JS

var camera; 
var scene; 
var renderer; 
var mesh; 
var geometry; 
var material1; 
var material2; 
var material3; 
var material4; 
var material5; 
var material6; 
var materials; 
var meshFaceMaterial; 



init(); 
animate(); 

function init() { 

    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(30, window.innerWidth/window.innerHeight, 1, 1000); 

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

    geometry = new THREE.CubeGeometry(10, 10, 10); 
    material1 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub1.jpg') }); 
    material2 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub2.jpg') }); 
    material3 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub3.jpg') }); 
    material4 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub4.jpg') }); 
    material5 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub5.jpg') }); 
    material6 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub6.jpg') }); 

    materials = [material1, material3, material5, material6, material4, material2]; 

    meshFaceMaterial = new THREE.MeshFaceMaterial(materials); 

    mesh = new THREE.Mesh(geometry, meshFaceMaterial); 
    mesh.position.z = -50; 
    scene.add(mesh); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.getElementById('render').appendChild(renderer.domElement); 
    window.addEventListener('resize', onWindowResize, false); 

    render(); 
} 

function animate() { 
    mesh.rotation.x += .015; 
    mesh.rotation.y += .015; 
    mesh.rotation.y += .015; 

    render(); 
    requestAnimationFrame(animate); 
} 

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

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

Answer 1

コードを見てみましょう。 https://codepen.io/kranzy/pen/pEjGqV

<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/three.min.js"></script> 
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script> 

<div id="container"></div> 
<script> 
var container, stats; 

var camera, controls, scene, renderer; 

var cross; 

init(); 
animate(); 

function init() { 

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

    controls = new THREE.OrbitControls(camera); 
    controls.addEventListener('change', render); 

    scene = new THREE.Scene(); 
    // world 

    geometry = new THREE.CubeGeometry(10, 10, 10); 
    /* 
    material1 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub1.jpg') }); 
    material2 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub2.jpg') }); 
    material3 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub3.jpg') }); 
    material4 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub4.jpg') }); 
    material5 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub5.jpg') }); 
    material6 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('img/cub6.jpg') }); 

    materials = [material1, material3, material5, material6, material4, material2]; 
*/ 
    meshFaceMaterial = /*new THREE.MeshFaceMaterial(materials)*/ new THREE.MeshPhongMaterial({color: 0xff00ff}); 

    mesh = new THREE.Mesh(geometry, meshFaceMaterial); 
    mesh.position.z = 0; 
    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); 


    // renderer 

    renderer = new THREE.WebGLRenderer({ antialias: false }); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

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

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

} 

function onWindowResize() { 

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

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

    render(); 

} 

function animate() { 

    requestAnimationFrame(animate); 
    controls.update(); 

} 

function render() { 
    renderer.render(scene, camera); 
} 
</script> 

あなたがゼロよりcamera.position.z大きなを設定する必要があります。 OrbitControlを使用できないのはこのためです。