Question

拖动鼠标时，我想在轴上旋转对象。我只能在函数内部访问我的头骨对象，所以我可以在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 );
    }

Answer 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();
}

请参阅代码段：

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>

Answer 2

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

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

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);函数中旋转你的对象：

现在你获得了y＆amp;的轮换金额。 interface轴。

在mousedown（OBJLoader）THREE.js上旋转其轴上的obj

2 个答案: