Three.js-鼠标移动时沿(0,0,0）旋转对象

Three.js - Rotate object along (0,0,0) on mouse move

本文关键字：旋转 对象 js- 鼠标 移动 Three      更新时间：2023-09-26

我在Three.js中有这个对象。这个对象已经在blender上实现，我已经以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");

我在这里找到了答案。在我的情况下，root必须成为组

    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;
}

我也添加了一个缩放函数，它在这里需要这个库

相关文章：