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

作者: Codifier | 来源:发表于2020-06-23 15:51 被阅读0次

局部坐标系下的平移和世界坐标系下的平移
Unity3d--Transform
左右手坐标系下三维位姿（旋转、平移）的转换
图形学复习知识点2
SVG 动画
二维渲染流程
Qt 绘图转换
[3D数学]
超简单的canvas绘制地图
HTML5 Canvas笔记——变换坐标系后的绘图

<!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>