Three.js - 在鼠標移動時沿（0,0,0）旋轉對象

Question

我在Three.js中有此對象。該對象已在攪拌機上實施，我已經以three.js格式導入。我想要的是用我的鼠標旋轉對象。如果有人能幫助我，我會非常感激！謝謝

function init(x, y, z, base, small, big, corners) { 
    scene = new THREE.Scene(); 

    initMesh(x, y, z, base, small, big, corners); 
    initCamera(); 
    initLights(); 
    initRenderer(); 
    var e = document.body.appendChild(renderer.domElement); 
    e.style.marginLeft="300px"; 
    e.style.position="absolute"; 

    render(); 

} 

function initCamera() { 
    camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT, 1, 10); 
    camera.position.set(0, 3.5, 3); 
    camera.lookAt(scene.position); 
} 


function initRenderer() { 
    renderer = new THREE.WebGLRenderer({ antialias: true}); 
    renderer.setSize(WIDTH, HEIGHT); 
    renderer.setClearColor("white"); 
} 
var mesh = null; 
var mesh1 = null; 
var mesh2 = null; 
var mesh3 = null; 

var group; 
function initMesh(x, y, z, base, small, big, corners) { 
    group = new THREE.Object3D(); 
    var loader = new THREE.JSONLoader(); 
    loader.load(base, function(geometry, materials) { 
     mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
     mesh.scale.x = x; 
     mesh.scale.y = y; 
     mesh.scale.z = z; 
     mesh.opacity=1; 
     mesh.castShadow = false; 
     var model = new THREE.Object3D(); 
     model.add(mesh); 
     model.position.set(0,0,0); 
     //mesh.translation = THREE.GeometryUtils.center(geometry); 
     group.add(model); 
    }); 
    loader.load(small, function(geometry, materials) { 
     mesh1 = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
     mesh1.scale.x = x; 
     mesh1.scale.y = y; 
     mesh1.scale.z = z; 
     mesh1.opacity=1; 
     mesh1.castShadow = false; 

     var model1 = new THREE.Object3D(); 
     model1.add(mesh1); 
     model1.position.set(0,0,0); 
     //mesh1.translation = THREE.GeometryUtils.center(geometry); 
     group.add(model1); 
    }); 
    loader.load(big, function(geometry, materials) { 
     mesh2 = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
     mesh2.scale.x = x; 
     mesh2.scale.y = y; 
     mesh2.scale.z = z; 
     mesh2.opacity=1; 
     mesh2.castShadow = false; 

     var model2 = new THREE.Object3D(); 
     model2.add(mesh2); 
     model2.position.set(0,0,0); 
     //mesh1.translation = THREE.GeometryUtils.center(geometry); 
     group.add(model2); 
    }); 
    loader.load(corners, function(geometry, materials) { 
     mesh3 = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
     mesh3.scale.x = x; 
     mesh3.scale.y = y; 
     mesh3.scale.z = z; 
     mesh3.opacity=1; 
     mesh3.castShadow = false; 

     var model3 = new THREE.Object3D(); 
     model3.add(mesh3); 
     model3.position.set(0,0,0); 
     //mesh1.translation = THREE.GeometryUtils.center(geometry); 
     group.add(model3); 
    }); 

    scene.add(group); 
} 
function initLights() { 
    var light; // A light shining from the direction of the camera. 
    light = new THREE.DirectionalLight(); 
    light.position.set(0,100,10); 
    group.castShadow = false; 
    group.receiveShadow = false; 
    scene.add(light); 

} 

function rotateMesh() { 
    if (!mesh) { 
     return; 
    } 
    //group.rotation.y -= 0.4* (Math.PI/180); 
} 

function render() { 
    requestAnimationFrame(render); 
    rotateMesh(); 
    renderer.render(scene, camera); 
} 
init(0.5, 0.5, 0.5, "base.js", "small.js", "big.js", "corners.js"); 

Answer 1

向誰可能關心我找到答案here。在我的情況根必須成爲組

var mouseDown = false, 
    mouseX = 0, 
    mouseY = 0; 

function onMouseMove(evt) { 
    if (!mouseDown) { 
     return; 
    } 

    evt.preventDefault(); 

    var deltaX = evt.clientX - mouseX, 
     deltaY = evt.clientY - mouseY; 
    mouseX = evt.clientX; 
    mouseY = evt.clientY; 
    rotateScene(deltaX, deltaY); 
} 

function onMouseDown(evt) { 
    evt.preventDefault(); 

    mouseDown = true; 
    mouseX = evt.clientX; 
    mouseY = evt.clientY; 
} 

function onMouseUp(evt) { 
    evt.preventDefault(); 

    mouseDown = false; 
} 
var ee = document.body.appendChild(renderer.domElement); 
ee.addEventListener('mousemove', function (e) { 
    onMouseMove(e); 
}, false); 
ee.addEventListener('mousedown', function (e) { 
    onMouseDown(e); 
}, false); 
ee.addEventListener('mouseup', function (e) { 
    onMouseUp(e); 
}, false); 
var c=1; 
var cc=3; 
var ccc=3; 
ee.addEventListener('wheel', function (e) { 
    console.log(e.deltaY); 
    if(e.deltaY>0){ 
    c=c*0.95 
    cc=cc*0.95; 
    ccc=ccc*0.95 
    camera.position.set(c, cc, ccc); 
    }else{ 
    c=c*1.05 
    cc=cc*1.05; 
    ccc=ccc*1.05 
    camera.position.set(c, cc, ccc);} 
}); 

function rotateScene(deltaX, deltaY) { 
    group.rotation.y += deltaX/100; 
    group.rotation.x += deltaY/100; 
} 

我加入了變焦功能也一樣，它需要這個LIB here