美文网首页
将一个物体从A组移动到B组后保持其原来的位置不变

将一个物体从A组移动到B组后保持其原来的位置不变

作者: Codifier | 来源:发表于2020-06-23 16:10 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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;">编辑组1</button>
        <button id="btn2" style="position: absolute; margin-top: 40px; margin-left: 10px; z-index: 1000;">编辑组2</button>
        <button id="btn3" style="position: absolute; margin-top: 70px; margin-left: 10px; z-index: 1000;">编辑组3</button>
        <button id="btn4" style="position: absolute; margin-top: 110px; margin-left: 10px; z-index: 1000;">组3移除花模型</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';
        import { TransformControls } from '../three-part/three/examples/jsm/controls/TransformControls.js';
        import { GLTFLoader } from '../three-part/three/examples/jsm/loaders/GLTFLoader.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 transformControls = new TransformControls(camera, renderer.domElement);
            scene.add(transformControls);
            transformControls.addEventListener('change', render);
            transformControls.addEventListener('dragging-changed', function (event) {
                orbitControls.enabled = ! event.value;
            });

            const loader = new GLTFLoader();

            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);

            const group1 = new THREE.Group();
            scene.add(group1);
            const group2 = new THREE.Group();
            scene.add(group2);
            const group3 = new THREE.Group();
            scene.add(group3);

            let duck, nefertiti, monster, flower, helmet;

            loader.load("../three-part/three/examples/models/gltf/Duck/glTF/Duck.gltf", gltf => {
                duck = gltf.scene || gltf.scenes[0];
                duck.position.set(-10, 10, 0);
                group1.add(duck);
            });

            loader.load("../three-part/three/examples/models/gltf/Nefertiti/Nefertiti.glb", gltf => {
                nefertiti = gltf.scene || gltf.scenes[0];
                nefertiti.position.set(-10, 10, -10);
                nefertiti.scale.set(0.2, 0.2, 0.2);
                group1.add(nefertiti);
                group3.add(nefertiti);
            });

            loader.load("../three-part/three/examples/models/gltf/Monster/glTF/Monster.gltf", gltf => {
                monster = gltf.scene || gltf.scenes[0];
                monster.position.set(0, 10, 0);
                monster.scale.set(0.1, 0.1, 0.1);
                group3.add(monster);
            });

            loader.load("../three-part/three/examples/models/gltf/Flower/Flower.glb", gltf => {
                flower = gltf.scene || gltf.scenes[0];
                flower.position.set(10, 10, 0);
                flower.scale.set(10, 10, 10);
                group2.add(flower);
                group3.add(flower);
            });

            loader.load("../three-part/three/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf", gltf => {
                helmet = gltf.scene || gltf.scenes[0];
                helmet.position.set(10, 10, 10);
                group2.add(helmet);
            });

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

            document.getElementById("btn1").onclick = () => transformControls.attach(group1);
            document.getElementById("btn2").onclick = () => transformControls.attach(group2);
            document.getElementById("btn3").onclick = () => transformControls.attach(group3);
            document.getElementById("btn4").onclick = () => {
                const offset = new THREE.Vector3().subVectors(group3.position, group2.position);
                flower.position.add(offset);
                group2.add(flower);
            };
        }

        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>

相关文章

网友评论

      本文标题:将一个物体从A组移动到B组后保持其原来的位置不变

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