main

分支 (2)

标签 (4)

管理

管理

main

models

1.0.1

0.2.1

0.1.2

0.1.1

web3d_models
/
load_portal.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 {getObjectSize} from './assets/js/tool.js';
        import {   setupModel_child_ani0,setupModel_scene_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, portal_4_data] = await Promise.all([
                loader.loadAsync('/assets/models/Parrot.glb'),
                loader.loadAsync('/assets/models/outdoor/portal/portal_4.glb'),
            ]);
            console.log('portal_4_data!', portal_4_data);

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


            const portal_4 = setupModel_scene_ani0(portal_4_data);

            return {
                parrot, portal_4
            }
        }

        async function init() {
            const { parrot, portal_4 } = await loadBirds();
            updatables.push(controls);

            updatables.push(cube);
            scene.add(cube);

            updatables.push(parrot);
            scene.add(parrot);

            updatables.push(portal_4);
            scene.add(portal_4);

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