1

这是我的演示： 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

我是否正确导出了模型？它使用不同的（默认）模型为我工作。或者我可以以某种方式改变旋转轴心吗？

4

1 回答 1

4

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

THREE.GeometryUtils.center( geometry );

查看源代码，以便您了解此函数的作用。

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

相反，您将不得不创建一个类似于 的新函数，该函数THREE.GeometryUtils.center()计算单个偏移矢量以平等地应用于所有四个网格几何体。

三.js r.59

于 2013-08-05T23:06:46.867 回答