三.js 对象旋转枢轴 [英] Three.js object rotation pivot

问题描述

这是我的演示:http://www.edar.com.pl/test-3d/>

var scene, camera, renderer, loader, ambient, directionalLight;
var object;

var windowHalfX = 300;
var windowHalfY = 145;

var targetRotation = 0;
var targetRotationOnMouseDown = 0;

var mouseX = 0;
var mouseXOnMouseDown = 0;

init();

function init() {
    container = document.createElement('div');
    document.getElementById("3dbox").appendChild(container);

    scene = new THREE.Scene();
    //camera = new THREE.PerspectiveCamera( 45, 600 / 290, 0.1, 100000 );

    camera = new THREE.OrthographicCamera(-300, 300, 145, -145, -500, 10000000);

    //camera.position.set( -15, 10, 15 );
    renderer = new THREE.WebGLRenderer();

    renderer.setSize(600, 290);
    container.appendChild(renderer.domElement);


    // MODEL
    var loader = new THREE.OBJMTLLoader();
    loader.addEventListener('load', function (event) {
        object = event.content;
        object.scale.x = 1;
        object.scale.y = 1;
        object.scale.z = 1;
        object.position.x = -50;
        object.position.z = -50;
        camera.position.z = 3000;
        camera.position.y = 1500;
        camera.lookAt(new THREE.Vector3(0, 0, 100));
        scene.add(object);
        animate();
    });
    loader.load('http://www.edar.com.pl/wp-content/themes/edar_v1/obj/springk2.obj', 'http://www.edar.com.pl/wp-content/themes/edar_v1/obj/springk2.mtl');



    ambient = new THREE.AmbientLight(0x101030);
    scene.add(ambient);

    directionalLight = new THREE.DirectionalLight(0xffeedd);
    directionalLight.position.set(0, 0, 1000);
    scene.add(directionalLight);


    document.addEventListener('mousedown', onDocumentMouseDown, false);
    document.addEventListener('touchstart', onDocumentTouchStart, false);
    document.addEventListener('touchmove', onDocumentTouchMove, false);
}

function render() {
    //object.rotation.y += ( targetRotation - object.rotation.y ) * 0.05;
    renderer.render(scene, camera);
}

function animate() {
    object.rotation.y += (targetRotation - object.rotation.y) * 0.05;
    requestAnimationFrame(animate);
    render();
}

function onDocumentMouseDown(event) {

    event.preventDefault();

    document.addEventListener('mousemove', onDocumentMouseMove, false);
    document.addEventListener('mouseup', onDocumentMouseUp, false);
    document.addEventListener('mouseout', onDocumentMouseOut, false);

    mouseXOnMouseDown = event.clientX - windowHalfX;
    targetRotationOnMouseDown = targetRotation;

}

function onDocumentMouseMove(event) {

    mouseX = event.clientX - windowHalfX;

    targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;

}

function onDocumentMouseUp(event) {

    document.removeEventListener('mousemove', onDocumentMouseMove, false);
    document.removeEventListener('mouseup', onDocumentMouseUp, false);
    document.removeEventListener('mouseout', onDocumentMouseOut, false);

}

function onDocumentMouseOut(event) {

    document.removeEventListener('mousemove', onDocumentMouseMove, false);
    document.removeEventListener('mouseup', onDocumentMouseUp, false);
    document.removeEventListener('mouseout', onDocumentMouseOut, false);

}

function onDocumentTouchStart(event) {

    if (event.touches.length === 1) {

        event.preventDefault();

        mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
        targetRotationOnMouseDown = targetRotation;

    }

}

function onDocumentTouchMove(event) {

    if (event.touches.length === 1) {

        event.preventDefault();

        mouseX = event.touches[0].pageX - windowHalfX;
        targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;

    }

}

这是我想要的:http://threejs.org/examples/canvas_geometry_cube.html

我是否正确导出了模型?它使用不同的(默认)模型为我工作.或者我可以以某种方式改变旋转支点吗?

Did I export my model properly? It was working for me with different(default) model. Or can I change rotation pivot somehow?

推荐答案

您需要在加载器回调函数中将几何图形居中.

You need to center your geometry in the loader callback function.

THREE.GeometryUtils.center( geometry );

查看源代码，了解此函数的作用.

Look at the source code so you understand what this function does.

在您的情况下，它有点复杂，因为您的 object 有四个子网格对象，并且您不能单独居中它们的几何图形.

In your case it is a bit more complicated, because your object has four children mesh objects, and you can't center their geometries individually.

相反，您必须创建一个类似于 THREE.GeometryUtils.center() 的新函数，该函数计算单个偏移向量以同样地应用于所有四个网格几何体.

Instead, you will have to create a new function, similar to THREE.GeometryUtils.center(), that computes a single offset vector to be applied equally to all four mesh geometries.

three.js r.59

three.js r.59

这篇关于三.js 对象旋转枢轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！