美文网首页
局部坐标系下的平移和世界坐标系下的平移

局部坐标系下的平移和世界坐标系下的平移

作者: Codifier | 来源:发表于2020-06-23 15:51 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平移</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="container">
        <button id="btn1" style="position: absolute; margin-top: 10px; margin-left: 10px; z-index: 1000;">局部坐标系下的平移</button>
        <button id="btn2" style="position: absolute; margin-top: 40px; margin-left: 10px; z-index: 1000;">世界坐标系下的平移</button>
    </div>
    <script type="module">
        import * as THREE from '../three-part/three/build/three.module.js';
        import { OrbitControls } from '../three-part/three/examples/jsm/controls/OrbitControls.js';

        let camera, orbitControls, scene, renderer;

        init();
        animate();

        function init() {
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xcccccc);

            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById("container").appendChild(renderer.domElement);

            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10000);
            camera.position.set( 0, 50, 50 );

            orbitControls = new OrbitControls(camera, renderer.domElement);
            orbitControls.enableDamping = true;
            orbitControls.dampingFactor = 0.05;
            orbitControls.screenSpacePanning = false;
            orbitControls.maxPolarAngle = Math.PI / 2;

            const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
            scene.add(ambientLight);

            let directionalLight = new THREE.DirectionalLight("#ffffff");
            directionalLight.position.set(0, 30, 0);
            scene.add(directionalLight);

            let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
            let planeMaterial = new THREE.MeshLambertMaterial({
                color: 0x666666
            });
            let plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.receiveShadow = true;
            plane.rotation.x = -0.5 * Math.PI;
            scene.add(plane);

            let cubeGeometry = new THREE.BoxGeometry(8, 8, 8);
            let cubeRedMaterial = new THREE.MeshLambertMaterial({
                color: 0xff0000
            });
            let cubeRed = new THREE.Mesh(cubeGeometry, cubeRedMaterial);
            cubeRed.position.set(0, 4, -10);
            cubeRed.rotation.set(0, Math.PI/4, 0);
            const boxRedLocalAxes = new THREE.AxesHelper(10);
            cubeRed.add(boxRedLocalAxes);
            scene.add(cubeRed);

            let cubeBlueMaterial = new THREE.MeshLambertMaterial({
                color: 0x0000ff
            });

            let cubeBlue = new THREE.Mesh(cubeGeometry, cubeBlueMaterial);
            cubeBlue.position.set(0, 4, 10);
            cubeBlue.rotation.set(0, Math.PI/4, 0);
            const boxBlueLocalAxes = new THREE.AxesHelper(10);
            cubeBlue.add(boxBlueLocalAxes);
            scene.add(cubeBlue);

            const worldAxes = new THREE.AxesHelper(15);
            scene.add(worldAxes);

            window.addEventListener('resize', onWindowResize, false);

            document.getElementById("btn1").onclick = () => {
                cubeRed.translateX(1);
            };
            document.getElementById("btn2").onclick = () => {
                cubeBlue.position.add(new THREE.Vector3(1, 0, 0));
            };
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            requestAnimationFrame(animate);
            orbitControls.update();
            render();
        }

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

    </script>
</body>
</html>

相关文章

  • 局部坐标系下的平移和世界坐标系下的平移

  • Unity3d--Transform

    三种变换方式: transform component方法Translate():平移,可以指定按照世界坐标系平移...

  • 左右手坐标系下三维位姿(旋转、平移)的转换

    太长不看 假设右(或左)手坐标系下的旋转矩阵和平移向量分别为和,左(或右)手坐标系下分别为和,假设,则有 推导 右...

  • 图形学复习知识点2

    二维几何变换(待补) 平移 二维观察流水线 C代表coordinate建模坐标系-> 世界坐标系-> 观察坐标系-...

  • SVG 动画

    1、平移变换(translate)平移表达式transform="translate(x,y)",即新坐标系的原点...

  • 二维渲染流程

    物体的摆放问题: 即将物体从本地坐标系转换到世界坐标系需要使用世界变化矩阵(物体自身的旋转缩放平移或组合矩阵) 物...

  • Qt 绘图转换

    转换 QTransform 用于指定坐标系的 2D 转换 - 平移、缩放、扭曲(剪切)、旋转或投影坐标系。绘制图形...

  • [3D数学]

    一:坐标系 1.笛卡尔坐标系 2D坐标系都是‘’等价‘’的,无论原点在哪里,我们都可以通过平移将两个坐标系重合 3...

  • 超简单的canvas绘制地图

        本文使用geojson数据,通过缩放和平移把地图的地理坐标系转换canvas的屏幕坐标系,然后将转换后的数...

  • HTML5 Canvas笔记——变换坐标系后的绘图

    变换坐标系后的绘图: (1)提供四个文本框(x,y,angle,scale),输入参数值后,将坐标系变换(平移+旋...

网友评论

      本文标题:局部坐标系下的平移和世界坐标系下的平移

      本文链接:https://www.haomeiwen.com/subject/rxehfktx.html