zhangyupeng
/
Babylon.js


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
							<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>BabylonJS Viewer - Basic usage</title>
        <style>
            babylon {
                max-width: 800px;
                max-height: 500px;
                width: 100%;
                height: 600px;
            }
        </style>
    </head>

    <body>
        <babylon id="babylon-viewer" camera.behaviors.auto-rotate="0"></babylon>
        <script src="viewer.js"></script>
        <script>
            BabylonViewer.viewerManager.getViewerPromiseById('babylon-viewer').then(function (viewer) {
                // this will resolve only after the viewer with this specific ID is initialized

                viewer.onEngineInitObservable.add(function (scene) {
                    viewer.loadModel({
                        title: "Helmet",
                        subtitle: "BabylonJS",
                        thumbnail: "https://www.babylonjs.com/img/favicon/apple-icon-144x144.png",
                        url: "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/DamagedHelmet.gltf"
                    });
                });

                // load another model after 20 seconds. Just for fun.
                setTimeout(() => {
                    viewer.loadModel({
                        title: "Rabbit",
                        subtitle: "BabylonJS",
                        thumbnail: "https://www.babylonjs.com/img/favicon/apple-icon-144x144.png",
                        url: "https://playground.babylonjs.com/scenes/Rabbit.babylon"
                    });
                }, 20000)
            });
        </script>
    </body>

</html>