Three.js: Würfel mit der Maus drehen

Question

Ich benutze threejs, um einen Würfel zu rendern. Momentan habe ich einen rotierenden Würfel mit verschiedenen Texturen erreicht. Jetzt versuche ich, den Würfel mit der Maus rotieren zu lassen. In meinem Fall jetzt, dreht den Würfel:

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

    render(); 
    requestAnimationFrame(animate); 
} 

Jetzt habe ich zwei Möglichkeiten:

1. ich die Kamera drehen, während Bewegen und Halten der Maus
2. ich den Würfel whilte Halte drehen/bewegen Die Maus.

Ich strebe auch zwei Staaten. Eine, in der sich der Würfel automatisch dreht und eine, in der sich der Würfel durch Ziehen der Maus dreht. Ich habe schon OrbitControler versucht, aber es hat nicht geklappt. Gibt es eine einfache Lösung, um einfach mit der Maus einen rotierenden rotierenden Würfel zu haben?

Mein Code:

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

Blick auf den Code: 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> 

Sie müssen als Null camera.position.z größer einzustellen. Deshalb können Sie OrbitControls nicht verwenden.