如何实现Three.js中的模型世界轴旋转和自旋转

Three.js中使用四元数来实现模型旋转。也可以通过参考轴和角度来旋转。

three, axis, rotate

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 17622
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* Referrer links:
1. http://graphic-sim.com/23_body_axis_rotation.php 
2. http://rwoodley.org/?p=1073
3. http://stackoverflow.com/questions/25199173/how-to-find-rotation-matrix-between-two-vectors-in-three-js */

function fixMatrix(mesh) {
    bakeRotation(mesh);
    rotate180(mesh);
    bakeRotation(mesh);
}

function rotate180(mesh) {
    var m = new THREE.Matrix4();
    m.makeRotationY(Math.PI);
    mesh.matrix.multiplyMatrices(mesh.matrix, m);
    mesh.matrix.decompose(mesh.position, mesh.quaternion, mesh.scale);
}

function bakeRotation(mesh) {
    mesh.updateMatrixWorld();
    var geom = mesh.geometry;
    var rotMatrix = mesh.matrix.clone();
    rotMatrix.setPosition(new THREE.Vector3(0, 0, 0));
    var pos = new THREE.Vector3();
    pos.setFromMatrixPosition(mesh.matrix);
    geom.applyMatrix(rotMatrix);
    mesh.matrix.identity();
    mesh.matrix.setPosition(pos);
    mesh.matrix.decompose(mesh.position, mesh.quaternion, mesh.scale);
    mesh.updateMatrixWorld();
}

var init = function() {
    var canv = document.getElementsByTagName("canvas")[0];
    var w = canv.clientWidth;
    var h = canv.clientHeight;

renderer = new THREE.WebGLRenderer({
        canvas: canv
    });
    renderer.setSize(w, h);
    renderer.setClearColor(new THREE.Color(0xeeeeee), 1);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
        15, // Field of view
        w / h, // Aspect ratio
        0.1, // Near
        10000 // Far
    );
    camera.position.set(0, 1, 15);
    scene.add(camera);

var light = new THREE.PointLight(0xFFFFDD);
    light.position.set(-15, 10, 15);
    scene.add(light);

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

var loader = new THREE.ObjectLoader();
    var mesh;
    var onScene = function(scn) {
        mesh = scn.getObjectByName("Bug");
        mesh.material.shininess = 5;
        fixMatrix(mesh);
        scene.add(mesh);
        requestAnimationFrame(animate);
    };
    loader.load("/uploads/160801/vwbug-scene.json", onScene);

var rotationSpeed = 1.0;

function onKeyDown(evt) {
        switch (evt.keyCode) {
            case 88: // 'x'
                xRot = true;
                break;
            case 89: // 'y'
                yRot = true;
                break;
            case 90: // 'z'
                zRot = true;
                break;
            case 16: // SHIFT
                shiftOn = true;
                break;
        }
    }

function onKeyUp(evt) {
        switch (evt.keyCode) {
            case 88: // 'x'
                xRot = false;
                break;
            case 89: // 'y'
                yRot = false;
                break;
            case 90: // 'z'
                zRot = false;
                break;
            case 16: // SHIFT
                shiftOn = false;
                break;
        }
    }

var shiftOn = false;
    var xRot = false;
    var yRot = false;
    var zRot = false;
    window.onkeydown = onKeyDown;
    window.onkeyup = onKeyUp;

var xUnit = new THREE.Vector3(1, 0, 0);
    var yUnit = new THREE.Vector3(0, 1, 0);
    var zUnit = new THREE.Vector3(0, 0, 1);

var axis = new THREE.Vector3();

var quat = new THREE.Quaternion();

var clock = new THREE.Clock();

function animate() {
        var dt = clock.getDelta();
        var dTheta = dt * rotationSpeed;
        if (xRot)
            axis = xUnit;
        if (yRot)
            axis = yUnit;
        if (zRot)
            axis = zUnit;
        var moving = xRot || yRot || zRot;
        if (mesh && moving) {
            quat.setFromAxisAngle(axis, dTheta);
            if (shiftOn) // world axes
                mesh.quaternion.multiplyQuaternions(quat, mesh.quaternion);
            else // body axes
                mesh.quaternion.multiply(quat);
        }
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }

requestAnimationFrame(animate);
};

window.onload = init;
window.onresize = init;

编译

CSS

HTML

Three.js中使用四元数来实现模型旋转。也可以通过参考轴和角度来旋转。

three, axis, rotate

编辑器支持Emmet

快捷键

Three.js中使用四元数来实现模型旋转。也可以通过参考轴和角度来旋转。

three, axis, rotate

学习如何用Three.js和React将三维空间中的SVG分离出来并把3D场景分解为可重用组件

基于Three.js实现的体积光线前进特效 - 麻花（沙琪玛）模型

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：