Создание мобильного приложения с помощью cordova и tree.js - 3D-объекта, созданного с использованием 3DStudioMax - PullRequest
0 голосов
/ 31 марта 2019

У нас есть объект, который мы создали с помощью 3D studio max, и выводим его в виде javascript.

Мы хотим создать мобильное приложение, используя этот объект с Cordova и tree.js.Мы хотим изменить формы на 3d-объекте с помощью плагина Cordova Camera.

Объект в браузере запущен.В этом нет ничего плохого.

Я создал новый проект Cordova.Я добавил Cordova Camera Plugin в проект и создал его как Android.Здесь все в порядке.Эмулятор дал общий скриншот Cordova.

Когда я хочу добавить в проект коды JavaScript из 3D Studio Max, на экране появляется только логотип cordova.Больше ничего не происходит.

Почему это не работает?Где я мог ошибиться?

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>3DScarf</title>
    </head>
    <body>
        <div class="app"></div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/three.js"></script>
        <script type="text/javascript" src="js/libs/inflate.min.js"></script>
        <script type="text/javascript" src="js/loaders/FBXLoader.js"></script>
        <script type="text/javascript" src="js/controls/OrbitControls.js"></script>
        <script type="text/javascript" src="js/WebGL.js"></script>
        <script type="text/javascript" src="js/libs/stats.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

index.js file

//if ( WEBGL.isWebGLAvailable() === false ) {
    //document.body.appendChild( WEBGL.getWebGLErrorMessage() );
//}

var app = {

    var container, stats, controls;
    var camera, scene, renderer, light;

    var clock = new THREE.Clock();

    var mixers = [];

    // Application Constructor
    initialize: function() {
       // document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
       document.addEventListener('deviceready', this.onDeviceReady, false)
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        //this.receivedEvent('deviceready');
        app.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {

        container = document.getElementsByClassName( 'app' );
        //document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.set( 100, 200, 300 );

        controls = new THREE.OrbitControls( camera );
        controls.target.set( 0, 100, 0 );
        controls.update();

        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xa0a0a0 );
        scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

        light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
        light.position.set( 0, 200, 0 );
        scene.add( light );

        light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( 0, 200, 100 );
        light.castShadow = false;
        light.shadow.camera.top = 180;
        light.shadow.camera.bottom = -100;
        light.shadow.camera.left = -120;
        light.shadow.camera.right = 120;
        scene.add( light );

        // scene.add( new THREE.CameraHelper( light.shadow.camera ) );

        // ground
        var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
        mesh.rotation.x = - Math.PI / 2;
        mesh.receiveShadow = true;
        scene.add( mesh );

        var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
        grid.material.opacity = 0.2;
        grid.material.transparent = true;
        scene.add( grid );

        // model
        var loader = new THREE.FBXLoader();
        loader.load( 'img/fbx/obje.fbx', function ( object ) {

            object.mixer = new THREE.AnimationMixer( object );
            mixers.push( object.mixer );

            var action = object.mixer.clipAction( object.animations[ 0 ] );
            action.play();
            object.traverse( function ( child ) {
                if ( child.isMesh ) {
                    child.castShadow = true;
                    child.receiveShadow = true;
                }
            } );
            scene.add( object );
        } );
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.shadowMap.enabled = true;
        container.appendChild( renderer.domElement );
        window.addEventListener( 'resize', onWindowResize, false );
        stats = new Stats();
        container.appendChild( stats.dom );
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
        requestAnimationFrame( animate );
        if ( mixers.length > 0 ) {
            for ( var i = 0; i < mixers.length; i ++ ) {
                mixers[ i ].update( clock.getDelta() );
            }
        }
        renderer.render( scene, camera );
        stats.update();
    }
};

app.initialize();

Версия эмулятора Android: 7.0

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...