main

分支 (2)

标签 (4)

管理

管理

main

models

1.0.1

0.2.1

0.1.2

0.1.1

web3d_models
/
load_animated.html

<!DOCTYPE html>
<html>

<head>
    <meta charset=UTF-8 />
    <link href="./styles/main.css" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="scene-container">
        <!-- Our <canvas> will be inserted here -->
    </div>
    <script>

    </script>
    <script type="module">
        import * as THREE from 'https://unpkg.com/three@0.122.0/build/three.module.js';
        import { OrbitControls } from 'https://unpkg.com/three@0.122.0/examples/jsm/controls/OrbitControls.js';
        import { GLTFLoader } from 'https://unpkg.com/three@0.122.0/examples/jsm/loaders/GLTFLoader.js';
        import { setupModel_scene_ani2, setupModel_scene_ani1, setupModel_child_ani0 } from './assets/js/exportModel.js';


        const container = document.querySelector('#scene-container');
        //有动画的数组
        const updatables = [];

        // 设立场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);
        // 设立相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 15;

        // 设立渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设立轨道控制
        const controls = new OrbitControls(camera, container);
        controls.tick = () => controls.update();
        // 灯光
        const light = new THREE.AmbientLight(0x404040, 5); // soft white light
        scene.add(light);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 5);
        scene.add(directionalLight);

        const setSize = (container, camera, renderer) => {
            camera.aspect = container.clientWidth / container.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(container.clientWidth, container.clientHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
        };
        // 渲染初始窗口大小
        setSize(container, camera, renderer);
        //窗口调整
        window.addEventListener('resize', () => {
            // set the size again if a resize occurs
            console.log('resizing');
            setSize(container, camera, renderer);
        });
        // 将实际内容挂载到container里
        container.appendChild(renderer.domElement);


        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        const radiansPerSecond = THREE.MathUtils.degToRad(30);
        console.log('radiansPerSecond', radiansPerSecond);
        // each frame, rotate the entire group of spheres
        cube.tick = (delta) => {
            // console.log('delta',delta);
            cube.rotation.x += delta * radiansPerSecond;
            cube.rotation.y += delta * radiansPerSecond;
        };

        async function loadBirds() {
            const loader = new GLTFLoader();

            const [parrotData, flamingoData, lowpolyData, person1Data] = await Promise.all([
                loader.loadAsync('/assets/models/Parrot.glb'),
                loader.loadAsync('/assets/models/Flamingo.glb'),
                loader.loadAsync('/assets/models/character/lowpoly/lowpoly.glb'),
                loader.loadAsync('/assets/models/character/3dperson1.glb'),
            ]);
            console.log('parrotData!', parrotData);
            console.log('lowpolyData!', lowpolyData);
            // console.log('person1Data!', person1Data);

            const parrot = setupModel_child_ani0(parrotData);
            parrot.position.set(0, 0, 2.5);
            parrot.rotation.set(0, 0, 1);

            const flamingo = setupModel_child_ani0(flamingoData);
            flamingo.position.set(7.5, 0, -10);

            const lowpoly = setupModel_scene_ani1(lowpolyData);
            lowpoly.position.set(3.5, 0, -10);

            const person1 = setupModel_scene_ani2(person1Data);
            person1.position.set(3.5, 0, -10);
            person1.scale.set(5, 5, 5);

            return {
                parrot, flamingo, lowpoly, person1
            }
        }


        async function init() {
            const { parrot, flamingo, lowpoly, person1 } = await loadBirds();
            updatables.push(controls);
            updatables.push(parrot, flamingo, cube);
            updatables.push(lowpoly);
            updatables.push(person1);


            scene.add(cube);
            scene.add(parrot);
            scene.add(person1);
            scene.add(lowpoly);
            scene.add(flamingo);


        }
        init();

        const clock = new THREE.Clock();
        function tick() {
            // only call the getDelta function once per frame!
            const delta = clock.getDelta();
            for (const object of updatables) {
                object.tick(delta);
            }
        }

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

    </script>
</body>

</html>