zhangyupeng
/
Babylon.js


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
							<!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>
        </style>
    </head>

    <body>
        <!-- <babylon>
            <model normalize.unit-size="true" title="Modèle 3D" subtitle="DS STEEL" thumbnail="http://strains.fr/wp-content/uploads/2018/01/icon_3D-DESIGN.png"
                url="/assets/ycone2.babylon">
            </model>
            <camera behaviors.auto-rotate="0">
            </camera>
            <templates nav-bar="false" overlay="false" loading-screen="false"></templates>
        </babylon> -->

        <babylon id="viewer" templates.main.params.fill-screen="true" templates.loading-screen="false" extends="extended" model.loader=".gltf"></babylon>
        <div id="viewport" touch-action="none"></div>
        <script src="viewer.js"></script>
        <script>
            // The following lines are redundant. 
            // They are only here to show how you could achive the tag initialization on your own.

            // a simple way of disabling auto init 
            // BabylonViewer.viewerGlobals.disableInit = true;
            // Initializing the viewer on specific HTML tags.
            //BabylonViewer.InitTags('babylon');

            // this model - https://ugcorigin.s-microsoft.com/18/g009sv831rsm/953/003/004/08586805844133072215834575026/1521022566175.gltf
            // has a problem with its materials / texures. should be rendered only after onComplete


            // https://babylonjs.com/Assets/FlightHelmet/glTF/FlightHelmet_Materials.gltf
            /*var config = {
                extends: 'extended',
                model: {
                    url: "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf",
                },
                templates: {
                    loadingScreen: false
                },
                camera: {
                    behaviors: {
                        autoRotate: false,
                        framing: false,
                        bouncing: false
                    }
                },
                engine: {
                    disableResize: true
                }
            }*/

            var config = {
                extends: 'extended',
                // configuration: "./assets/environment/config.json",
                model: {
                    url: "https://babylonjs.com/Assets/FlightHelmet/glTF/FlightHelmet_Materials.gltf",
                },
                templates: {
                    main: {
                        params: {
                            fillScreen: true
                        }
                    }
                },
                lab: {
                    assetsRootURL: "./assets/environment/"
                }
            }
            // create viewer
            var viewerElement = document.getElementById("viewport");
            // var viewer = new BabylonViewer.DefaultViewer(viewerElement, config);
            /*viewer.onModelLoadedObservable.add(() => {
                //viewer.engine.setHardwareScalingLevel(0.5);
                var canvas = viewer.engine.getRenderingCanvas();
                var filesInput = new BABYLON.FilesInput(viewer.engine, null, canvas, null);
                filesInput._onReloadCallback = function (modelFile) {
                    viewer.loadModel(modelFile, true);
                };
                filesInput.monitorElementForDragNDrop(canvas);
            });*/

            /*viewer.onInitDoneObservable.add(() => {

            });*/

            BabylonViewer.viewerManager.getViewerPromiseById("viewer").then((viewer) => {
                viewer.onInitDoneObservable.add(() => {

                })

                document.addEventListener("keyup", (evt) => {
                    if (evt.key === 'l')
                        viewer.initModel("https://api.remix3d.com/v3/creations/0000000900000000801e172a00000000/gltf/streams/manifest?parameters=eyJmb3JtYXQiOiJHTFRGIiwiY2xpZW50Ijoid2ViIiwidXNhZ2UiOiJWaWV3In01");
                    if (evt.key === 'a') {
                        viewer.updateConfiguration({
                            camera: {
                                behaviors: {
                                    autoRotate: false
                                }
                            }
                        })
                    }
                    if (evt.key === 'p') {
                        viewer.updateConfiguration({
                            camera: {
                                panningSensibility: 0
                            }
                        })
                    }
                    if (evt.key === 't') {
                        viewer.updateConfiguration()
                    }
                    if (evt.key === 'r') {
                        //viewer.sceneManager.scene.registerBeforeRender(() => {
                        viewer.updateConfiguration({
                            lab: {
                                globalLightRotation: 0.01
                            }
                        })
                        //});
                    }
                    if (evt.key === 'd') {
                        viewer.sceneManager.scene.debugLayer.show();
                    }
                });
            })

            // create viewer
            //var viewerElement = document.getElementById("viewport");

            /*let config = {
                // any other configuration you already have
                model: {
                    loader: '.gltf'
                }
            }
            let viewer = new BabylonViewer.DefaultViewer(viewerElement, config);*/

        </script>
    </body>

</html>