108 THREE.JS 使用矩阵对3D对象进行位置设置

2019-01-22 19:32:31 人阅读

案例查看有问题?
全屏试试!

案例源代码


                        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>three.js矩阵变换</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
    <script src="https://cdn.bootcss.com/three.js/100/three.js"></script>
    <script src="https://cdn.bootcss.com/dat-gui/0.7.5/dat.gui.js"></script>
</head>
<body>

</body>
<script>
    //创建渲染器,添加到dom当中, antialias(是否启用抗锯齿)
    var renderer = new THREE.WebGLRenderer({antialias: true});
    //设置渲染器的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    //将渲染器放置到页面当中
    document.body.appendChild(renderer.domElement);

    //创建场景
    var scene = new THREE.Scene();

    //创建相机,设置位置
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
    //设置相机的位置
    camera.position.set(2, 3, 30);
    scene.add(camera);

    //创建一个平行光光源照射到物体上
    var light = new THREE.PointLight(0xffffff, 1.5);
    //将灯光放到场景当中
    camera.add(light);
    //添加环境光
    scene.add(new THREE.AmbientLight(0x333333));

    //然后创建一个phong材质来处理着色,并传递给纹理映射
    var material = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});

    //创建一个立方体的几何体
    var geometry = new THREE.CubeGeometry(1, .5, 1);

    //将集合体和材质放到一个网格中
    var cube = new THREE.Mesh(geometry, material);

    //添加辅助线
    var axesHelper = new THREE.AxesHelper(50);
    scene.add(axesHelper);

    //将立方体网格添加到场景中
    scene.add(cube);

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

    //生成设置
    var params = {
        positionX:0,
        positionY:0,
        positionZ:0,
        rotationX:0,
        rotationY:0,
        rotationZ:0,
        scaleX:1,
        scaleY:1,
        scaleZ:1,
        transformation: "缩放旋转平移"
    };

    var gui = new dat.GUI();

    //位移
    gui.add(params, "positionX", -2, 5).name("沿x轴移动").onChange(update);
    gui.add(params, "positionY", -2, 5).name("沿y轴移动").onChange(update);
    gui.add(params, "positionZ", -5, 2).name("沿z轴移动").onChange(update);

    //旋转
    gui.add(params, "rotationX", 0, Math.PI*2).name("沿x轴旋转").onChange(update);
    gui.add(params, "rotationY", 0, Math.PI*2).name("沿y轴旋转").onChange(update);
    gui.add(params, "rotationZ", 0, Math.PI*2).name("沿z轴旋转").onChange(update);

    //缩放
    gui.add(params, "scaleX", 1, 5).name("沿x轴缩放").onChange(update);
    gui.add(params, "scaleY", 1, 5).name("沿x轴缩放").onChange(update);
    gui.add(params, "scaleZ", 1, 5).name("沿x轴缩放").onChange(update);

    //修改变换顺序
    gui.add(params, "transformation", ["缩放旋转平移", "平移旋转缩放", "缩放平移旋转", "旋转平移缩放", "旋转缩放平移", "平移缩放旋转", "平移旋转缩放"]).name("修改变换顺序").onChange(update);

    function update() {

        //生成缩放矩阵
        var scaleM = new THREE.Matrix4();
        scaleM.makeScale(params.scaleX, params.scaleY, params.scaleZ);

        //生成旋转矩阵
        var rotaMX = new THREE.Matrix4();
        rotaMX.makeRotationX(params.rotationX);

        var rotaMY = new THREE.Matrix4();
        rotaMY.makeRotationY(params.rotationY);

        var rotaMZ = new THREE.Matrix4();
        rotaMZ.makeRotationZ(params.rotationZ);

        rotaMZ.multiply(rotaMY);
        rotaMZ.multiply(rotaMX);

        //生成位移矩阵
        var translationM = new THREE.Matrix4();
        translationM.makeTranslation(params.positionX, params.positionY, params.positionZ);

        //判断使用的矩阵
        var matrix = new THREE.Matrix4();
        //用后进行的操作进行乘先进行的矩阵变换

        switch (params.transformation) {
            case "缩放旋转平移":
                matrix.multiply(translationM);
                matrix.multiply(rotaMZ);
                matrix.multiply(scaleM);
                break;
            case "缩放平移旋转":
                matrix.multiply(rotaMZ);
                matrix.multiply(translationM);
                matrix.multiply(scaleM);
                break;
            case "旋转平移缩放":
                matrix.multiply(scaleM);
                matrix.multiply(translationM);
                matrix.multiply(rotaMZ);
                break;
            case "旋转缩放平移":
                matrix.multiply(translationM);
                matrix.multiply(scaleM);
                matrix.multiply(rotaMZ);
                break;
            case "平移缩放旋转":
                matrix.multiply(rotaMZ);
                matrix.multiply(scaleM);
                matrix.multiply(translationM);
                break;
            case "平移旋转缩放":
                matrix.multiply(scaleM);
                matrix.multiply(rotaMZ);
                matrix.multiply(translationM);
                break;

        }

        //将矩阵赋值给模型
        cube.matrix = matrix;

        //使用矩阵更新模型的信息
        cube.matrix.decompose(cube.position, cube.quaternion, cube.scale);
    }
</script>
</html>
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多