在 mousedown (OBJLoader) 三个.js 上沿其轴旋转 obj答案

【问题标题】：rotate obj on its axis on mousedown (OBJLoader) THREE.js在 mousedown (OBJLoader) 三个.js 上沿其轴旋转 obj
【发布时间】：2023-03-14 19:06:01
【问题描述】：

当鼠标被拖动时，我想在它的轴上旋转我的对象。我只能在函数内部访问我的头骨对象，所以我可以在 render() 中放置一个旋转增量。

谁能告诉我如何让我的对象根据我的变量 mouseY 和 mouseX 更新其旋转？

var loader = new THREE.OBJLoader();
    loader.load(
        'images/SKULL.obj',
        function(object) {
            var skull = object;
            scene.add(skull);
           skull.position.y = -50;
           skull.rotation.y += mouseY;
           skull.rotation.x += mouseX;




            skull.traverse(function (child) {
                //console.log(child);
                if (child instanceof THREE.Mesh) {
                    child.material = chrome;
                }
            });



        },
        function(xhr) {
            var loaded = (xhr.loaded / xhr.total * 100);
            loadPercentageText.innerHTML = parseInt(loaded) + "%";
            //console.log(loaded + " % loaded");
            if (loaded == 100) {
                document.body.classList.remove("loading");
                animate();
            }
        },
        function (error) {
            //console.log("Error");
        }
    );

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );


   function onDocumentMouseMove( event ) {
        mouseX = ( event.clientX - windowHalfX ) / 2;
        mouseY = ( event.clientY - windowHalfY ) / 2;

      }



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

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您必须设置网格的旋转，并且您必须像这样更新对象矩阵 (Object3D.updateMatrix)：

function onDocumentMouseMove( event ) {
    var mouseX = window.innerWidth / 2 - event.clientX;
    var mouseY = window.innerHeight / 2 - event.clientY;
    mesh.rotation.y = Math.PI*2*mouseX/window.innerWidth;
    mesh.rotation.x = -Math.PI*2*mouseY/window.innerHeight;
    mesh.updateMatrix();
}

见代码sn-p：

var renderer, camera, controls, scene;
var mesh;

function init(){
    renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});   
    renderer.setClearColor(0x000044);        

    scene = new THREE.Scene();        
    camera = new THREE.OrthographicCamera(window.innerWidth/-2,window.innerWidth/2,window.innerHeight/-2,window.innerHeight/2, -1000, 1000);    
    
    resize();
    window.onresize = resize;

    var geometry = new THREE.BoxGeometry(100, 100, 1);
    var material = new THREE.MeshBasicMaterial({
        color: 0xFF1111,
    });
    mesh = new THREE.Mesh(geometry,material);
    scene.add(mesh);

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}

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

function onDocumentMouseMove( event ) {
    var mouseX = window.innerWidth / 2 - event.clientX;
    var mouseY = window.innerHeight / 2 - event.clientY;
    mesh.rotation.y = Math.PI*2*mouseX/window.innerWidth;
    mesh.rotation.x = -Math.PI*2*mouseY/window.innerHeight;
    mesh.updateMatrix();
}   

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

init(); render();

<script src="https://threejs.org/build/three.min.js"></script>
<canvas id="myCanvas"></canvas>

【讨论】：

我在遍历函数里面添加材质：child.material = chrome;我忘了删除我没有使用的网格变量。你知道我如何旋转我的对象吗？似乎与移动 BoxGeometry 的过程不同，因为模型对象是 load() 函数的本地对象
在 onDocumentMouseMove() 函数内部？不，因为头骨对于 loader.load 是本地的。我无法在外面访问它
天啊！我太笨了我发誓我最初尝试过，但它没有用......好吧，谢谢一堆哈哈。我会将您的答案标记为正确答案。
嘿，我发布了另一个问题。也许你可以帮忙：stackoverflow.com/questions/47858392/…

【解决方案2】：

我在我的一个项目中做过类似的事情。这是我所做的：

声明一个用于处理移动相关数据的变量：

var mouseRotationData = {
    startX : 0,
    startY : 0,
    endX : 0,
    endY : 0,
    x : 0,
    y : 0
};

然后在onDocumentMouseMove() 上添加：

mouseRotationData.endX = event.clientX;
mouseRotationData.endY = event.clientY;
mouseRotation();
mouseRotationData.startX = event.clientX;
mouseRotationData.startY = event.clientY;

最后在mouseRotation() 函数中旋转你的对象：

var lim = 360;
var rFactor = lim / window.innerWidth;

mouseRotationData.y = (mouseRotationData.endX - mouseRotationData.startX)* rFactor;
mouseRotationData.x = (mouseRotationData.endY - mouseRotationData.startY)* rFactor;

var rot_x = mouseRotationData.x * (Math.PI / 180); // in radians
var rot_y = mouseRotationData.y * (Math.PI / 180);

现在您获得了 x 和 y 轴的旋转量。

【讨论】：