Get WordPress

Plugin Directory

Changeset 1608389

Timestamp:
03/06/2017 05:05:17 AM (7 years ago)
Author:
goldsounds
Message:

Add WebVR support

Location:
gltf-media-type/trunk
Files:
14 added
9 edited

Legend:

Unmodified
Added
Removed

  • gltf-media-type/trunk/README.txt

    r1563603 r1608389  
    22Contributors: goldsounds
    33Tags: comments, spam
    4 Requires at least: 4.5
     4Requires at least: 4.
    55Tested up to: 4.7
    6 Stable tag: 1.1
     6Stable tag: 1.
    77License: GPLv2 or later
    88License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    3636== Changelog ==
    3737
     38
     39
     40
     41
     42
     43
    3844= 1.1 =
    3945* Add gltf_scene post type

  • gltf-media-type/trunk/admin/class-gltf-admin.php

    r1563556 r1608389  
    8383     */
    8484    public function enqueue_scripts( $hook ) {
    85         wp_enqueue_script( 'threejs', plugin_dir_url( dirname( __FILE__ ) ) . 'js/three.min.js', null, $this->version, false );
    8685        wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/gltf-admin.js', array( 'jquery' ), $this->version, false );
    8786
    … …  
    9089        // if we're editing a gltf_scene, load the metabox js
    9190        if ( ( $hook == 'post-new.php' || $hook == 'post.php' ) && 'gltf_scene' === $post->post_type ) {
    92             wp_enqueue_script( 'gltf-admin-select-model-metabox', plugin_dir_url( __FILE__ ) . 'js/gltf-admin-select-model-metabox.js', array( 'jquery' ), $this->version, false );
    93 
    94             require_once dirname( dirname( __FILE__ ) ) . '/includes/class-gltf-model-utils.php';
    95             Gltf_Model_Utils::enqueue_scripts( $this->version );
     91            wp_enqueue_script( 'gltf-model', plugin_dir_url( dirname( __FILE__ ) ) . 'js/public.js', array( 'jquery', 'wp-api' ), $this->version, false );
     92            wp_enqueue_script( 'gltf-admin-select-model-metabox', plugin_dir_url( __FILE__ ) . 'js/gltf-admin-select-model-metabox.js', array( 'jquery', 'gltf-model' ), $this->version, false );
    9693        }
    9794    }

  • gltf-media-type/trunk/gltf.php

    r1563556 r1608389  
    1212 * Plugin URI:        http://goldsounds.com/plugins/gltf
    1313 * Description:       A plugin to upload and render glTF 3D models in WordPress.
    14  * Version:           1.1
     14 * Version:           1.
    1515 * Author:            Daniel Walmsley
    1616 * Author URI:        http://goldsounds.com

  • gltf-media-type/trunk/includes/class-gltf-model-utils.php

    r1563556 r1608389  
    22
    33class Gltf_Model_Utils {
    4     static function enqueue_common_gltf_scripts( $version ) {
    5         wp_enqueue_script( 'threejs', plugin_dir_url( dirname( __FILE__ ) ) . 'js/three.min.js', null, $version, false );
    6         wp_enqueue_script( 'gltf-loader', plugin_dir_url( dirname( __FILE__ ) ) . 'js/loaders/GLTFLoader.js', array( 'threejs' ), $version, false );
    7         wp_enqueue_script( 'orbitcontrols', plugin_dir_url( dirname( __FILE__ ) ) . 'js/OrbitControls.js', array( 'threejs' ), $version, false );
    8     }
    9 
    10     static function enqueue_scripts( $version ) {
    11         self::enqueue_common_gltf_scripts( $version );
    12         wp_enqueue_script( 'gltf-model-preview', plugin_dir_url( dirname( __FILE__ ) ) . 'js/gltf-model-preview.js', array( 'jquery', 'gltf-loader', 'orbitcontrols' ), $version, false );
    13     }
    144}

  • gltf-media-type/trunk/includes/class-gltf.php

    r1563556 r1608389  
    159159    public function upload_mime_types( $mimes ) {
    160160        foreach( $this->gltf_mime_types as $ext => $type ) {
     161
    161162            $mimes[ $ext ] = $type;
    162163        }
    … …  
    177178        ), $atts );
    178179
    179         return '<div class="gltf-model" style="height: 300px" data-scale="'.htmlspecialchars($a['scale']).'" data-model="'.htmlspecialchars($a['url']).'"></div>';
     180        return '<div class="gltf-model" style="height: 00px" data-scale="'.htmlspecialchars($a['scale']).'" data-model="'.htmlspecialchars($a['url']).'"></div>';
    180181    }
    181182
    … …  
    184185            array(
    185186                'labels' => array(
    186                     'name' => __( 'Scenes' ),
     187                    'name' => __( 'Scenes' ),
    187188                    'singular_name' => __( 'Scene' )
    188189                ),
    189                 'public' => true,
    190                 'has_archive' => true,
    191                 'rewrite' => array('slug' => 'scenes'),
     190                'public'             => true,
     191                'has_archive'        => true,
     192                'publicly_queryable' => true,
     193                'show_in_rest'       => true,
     194                'rewrite'            => array('slug' => 'scenes'),
     195                'menu_icon'          => 'dashicons-star-filled',
     196                'rest_base'          => 'scene',
     197                'rest_controller_class' => 'WP_REST_Posts_Controller'
    192198            )
    193199        );
    … …  
    305311        global $post;
    306312        if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'gltf_model') ) {
    307             require_once dirname( __FILE__ ) . '/class-gltf-model-utils.php';
    308             Gltf_Model_Utils::enqueue_scripts( $this->version );
     313            wp_enqueue_script( 'gltf-model', plugin_dir_url( dirname( __FILE__ ) ) . 'js/public.js', array( 'jquery', 'wp-api' ), $this->version, false );
    309314        }
    310315    }

  • gltf-media-type/trunk/public/class-gltf-public.php

    r1563556 r1608389  
    9696         * class.
    9797         */
    98         require_once dirname( dirname( __FILE__ ) ) . '/includes/class-gltf-model-utils.php';
    99         Gltf_Model_Utils::enqueue_common_gltf_scripts( $this->version );
    100         wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/gltf-public.js', array( 'jquery', 'orbitcontrols' ), $this->version, false );
    101 
     98        // wp_enqueue_script( $this->plugin_name, plugin_dir_url( dirname( __FILE__ ) ) . 'js/public.js', array( 'jquery', 'wp-api' ), $this->version, false );
    10299    }
    103100

  • gltf-media-type/trunk/public/css/gltf-public.css

    r1562406 r1608389  
    33 * included in this file.
    44 */
     5
     6

  • gltf-media-type/trunk/public/js/gltf-public.js

    r1563556 r1608389  
    1 (function( $ ) {
    2     'use strict';
     1'use strict';
    32
    4      window.GltfScene = function() {
     3window.GltfScene = wp.api.models.Post.extend({
     4    urlRoot: wpApiSettings.root + '/scene',
     5    defaults: {
     6        type: 'scene'
     7    }
     8});
    59
    6         var container, camera, scene, renderer, controls;
     10window.GltfScenes = wp.api.collections.Posts.extend({
     11    url: wpApiSettings.root + '/scenes',
     12    model: GltfScene
     13});
    714
    8         function addCamera() {
    9             camera = new THREE.PerspectiveCamera( 75, container.offsetWidth / container.offsetHeight, 1, 2000 );
    10             camera.position.set(0, 2, 3);
    11             scene.add( camera );
    12         }
     15// self.events = new MyEvents;
    1316
    14         function addLights() {
    15             // var ambient = new THREE.AmbientLight( 0x101030 );
    16             var ambient = new THREE.AmbientLight( 0xFFFFFF, 1 );
    17             scene.add( ambient );
     17// self.events.fetch({
     18//  filter: {
     19//     nopaging: true
     20//  }
     21// }).done( function() {
     22//  self.events.each( function( myevent ) {
     23//      console.log( myevent.attributes );
     24//  });
     25// });
    1826
    19             var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    20             directionalLight.position.set( 0, 0, 1 );
    21             scene.add( directionalLight );
    22         }
     27window.GltfSceneRenderer = function() {
    2328
    24         function addControls() {
     29    var container, camera, scene, renderer, controls;
     30
     31    function addCamera() {
     32        camera = new THREE.PerspectiveCamera( 75, container.offsetWidth / container.offsetHeight, 1, 2000 );
     33        camera.position.set(0, 2, 3);
     34        scene.add( camera );
     35    }
     36
     37    function addLights() {
     38        // var ambient = new THREE.AmbientLight( 0x101030 );
     39        var ambient = new THREE.AmbientLight( 0xFFFFFF, 1 );
     40        scene.add( ambient );
     41
     42        var directionalLight = new THREE.DirectionalLight( 0xffeedd );
     43        directionalLight.position.set( 0, 0, 1 );
     44        scene.add( directionalLight );
     45    }
     46
     47    function addWebVRButton( effect ) {
     48        var button = document.createElement( 'button' );
     49        button.style.position = 'absolute';
     50        button.style.left = 'calc(50% - 50px)';
     51        button.style.bottom = '20px';
     52        button.style.width = '100px';
     53        button.style.border = '0';
     54        button.style.padding = '8px';
     55        button.style.cursor = 'pointer';
     56        button.style.backgroundColor = '#000';
     57        button.style.color = '#fff';
     58        button.style.fontFamily = 'sans-serif';
     59        button.style.fontSize = '13px';
     60        button.style.fontStyle = 'normal';
     61        button.style.textAlign = 'center';
     62        button.style.zIndex = '999';
     63        button.textContent = 'ENTER VR';
     64        button.onclick = function() {
     65            effect.isPresenting ? effect.exitPresent() : effect.requestPresent();
     66        };
     67        window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
     68
     69            button.textContent = effect.isPresenting ? 'EXIT VR' : 'ENTER VR';
     70
     71        }, false );
     72
     73        container.appendChild( button );
     74    }
     75
     76    function addControls() {
     77        console.log("adding controls");
     78        // controls.autoRotateSpeed = -10.0;
     79
     80        // add WebVR controls
     81        if ( navigator.getVRDisplays !== undefined ) {
     82            console.log("doing VR");
     83            controls = new THREE.VRControls( camera );
     84            effect = new THREE.VREffect( renderer );
     85            navigator.getVRDisplays()
     86                .then( function ( displays ) {
     87                    effect.setVRDisplay( displays[ 0 ] );
     88                    controls.setVRDisplay( displays[ 0 ] );
     89                } )
     90                .catch( function () {
     91                    // no displays
     92                    console.error("Error initializing VR displays");
     93                } );
     94            addWebVRButton( effect );
     95        } else {
     96            console.log("doing regular");
    2597            controls = new THREE.OrbitControls( camera, renderer.domElement );
    2698            controls.userPan = false;
    … …  
    29101            controls.maxPolarAngle = Math.PI * 0.495;
    30102            controls.autoRotate = false;
    31             // controls.autoRotateSpeed = -10.0;
    32103        }
     104
    33105
    34         function addRenderer() {
    35             renderer = new THREE.WebGLRenderer({antialias:true});
    36             renderer.setClearColor( 0x222222 );
    37             renderer.setPixelRatio( window.devicePixelRatio );
    38             renderer.setSize( container.offsetWidth, container.offsetHeight );
     106    function addRenderer() {
     107        renderer = new THREE.WebGLRenderer({antialias:true});
     108        renderer.setClearColor( 0x222222 );
     109        renderer.setPixelRatio( window.devicePixelRatio );
     110        renderer.setSize( container.offsetWidth, container.offsetHeight );
     111    }
     112
     113    function addLoadingLogger() {
     114        var manager = new THREE.LoadingManager();
     115        manager.onProgress = function ( item, loaded, total ) {
     116            console.log( item, loaded, total );
     117        };
     118    }
     119
     120    function loadModel( modelUrl, modelScale ) {
     121        THREE.GLTFLoader.Shaders.removeAll(); // remove all previous shaders
     122        var loader = new THREE.GLTFLoader;
     123        loader.load( modelUrl, function( data ) {
     124            var object = data.scene;
     125            object.scale.set(modelScale, modelScale, modelScale);
     126
     127            var animations = data.animations;
     128            if ( animations && animations.length ) {
     129                mixer = new THREE.AnimationMixer( object );
     130                for ( var i = 0; i < animations.length; i ++ ) {
     131                    var animation = animations[ i ];
     132                    mixer.clipAction( animation ).play();
     133                }
     134            }
     135
     136            scene.add( object );
     137        } );
     138    }
     139
     140    function render() {
     141        renderer.render( scene, camera );
     142    }
     143
     144    function animate() {
     145        requestAnimationFrame( animate );
     146        THREE.GLTFLoader.Animations.update();
     147        THREE.GLTFLoader.Shaders.update(scene, camera);
     148        render();
     149        controls.update();
     150    }
     151
     152    function initScene( id ) {
     153        container = jQuery( '#'+id ).get(0);
     154
     155        scene = new THREE.Scene();
     156
     157        addLights(); // LIGHTS!
     158        addCamera(); // CAMERA!
     159        addRenderer(); // ACTION! :)
     160        addControls();
     161        addLoadingLogger();
     162
     163        container.appendChild( renderer.domElement );
     164    }
     165
     166
     167    return {
     168        render: function( id, scene_id ) {
     169            console.log("here we go");
     170            initScene( id );
     171            wp.api.loadPromise.done( function() {
     172                var scene = new window.GltfScene( { id: scene_id } );
     173                console.log(scene);
     174                scene.fetch();
     175                console.log(scene);
     176                loadModel( scene.main_model, scene.main_model_scale );
     177            } );
     178            animate();
    39179        }
    40 
    41         function addLoadingLogger() {
    42             var manager = new THREE.LoadingManager();
    43             manager.onProgress = function ( item, loaded, total ) {
    44                 console.log( item, loaded, total );
    45             };
    46         }
    47 
    48         function loadModel( modelUrl, modelScale ) {
    49             THREE.GLTFLoader.Shaders.removeAll(); // remove all previous shaders
    50             var loader = new THREE.GLTFLoader;
    51             loader.load( modelUrl, function( data ) {
    52                 var object = data.scene;
    53                 object.scale.set(modelScale, modelScale, modelScale);
    54 
    55                 var animations = data.animations;
    56                 if ( animations && animations.length ) {
    57                     mixer = new THREE.AnimationMixer( object );
    58                     for ( var i = 0; i < animations.length; i ++ ) {
    59                         var animation = animations[ i ];
    60                         mixer.clipAction( animation ).play();
    61                     }
    62                 }
    63 
    64                 scene.add( object );
    65             } );
    66         }
    67 
    68         function render() {
    69             renderer.render( scene, camera );
    70         }
    71 
    72         function animate() {
    73             requestAnimationFrame( animate );
    74             THREE.GLTFLoader.Animations.update();
    75             THREE.GLTFLoader.Shaders.update(scene, camera);
    76             render();
    77             controls.update();
    78         }
    79 
    80         function initScene( id ) {
    81             container = jQuery( '#'+id ).get(0);
    82 
    83             scene = new THREE.Scene();
    84 
    85             addLights(); // LIGHTS!
    86             addCamera(); // CAMERA!
    87             addRenderer(); // ACTION! :)
    88             addControls();
    89             addLoadingLogger();
    90 
    91             container.appendChild( renderer.domElement );
    92         }
    93 
    94         return {
    95             render: function( id, scene ) {
    96                 console.log("rendering "+id+": "+JSON.stringify( scene ));
    97 
    98                 initScene( id );
    99                 loadModel( scene.main_model, scene.main_model_scale );
    100                 animate();
    101             }
    102         }
    103      }();
    104 
    105 })( jQuery );
     180    }
     181}();

  • gltf-media-type/trunk/public/templates/single-gltf_scene.php

    r1563556 r1608389  
    1111function get_scene_as_json( $scene ) {
    1212
    13         $main_model_id = get_post_meta( $scene->ID, '_gltf_main_model', true );
    14         $main_model_url = wp_get_attachment_url( $main_model_id );
     13$main_model_id = get_post_meta( $scene->ID, '_gltf_main_model', true );
     14$main_model_url = wp_get_attachment_url( $main_model_id );
    1515
    1616    $scene_obj = array(
    1717        // TODO
    1818        // - "main" object, cube, something?
    19                 'main_model' => $main_model_url,
    20                 'main_model_scale' => get_post_meta( $scene->ID, '_gltf_main_model_scale', true ),
     19'main_model' => $main_model_url,
     20'main_model_scale' => get_post_meta( $scene->ID, '_gltf_main_model_scale', true ),
    2121        // - location, scale, lights?
    2222        // - form of locomotion - am I walking? Flying?
    … …  
    3434
    3535<div class="wrap">
    36         <div id="primary" class="content-area">
    37                 <main id="main" class="site-main" role="main">
     36<div id="primary" class="content-area">
     37<main id="main" class="site-main" role="main">
    3838
    39                         <?php
    40                                 /* Start the Loop */
    41                                 while ( have_posts() ) : the_post();
    42                                         $scene_dom_id = 'gltf-scene-'.get_the_ID();
    43                                         ?>The VR Scene
    44                                         <div class="gltf-scene" id="<?php echo $scene_dom_id; ?>" style="height: 600px"></div>
    45                                         <script type="text/javascript">
    46                                             jQuery( function() {
    47                                                 console.log("loading");
    48                                                 var scene = <?php echo get_scene_as_json( get_post() ); ?>;
    49                                                 var scene_dom_id = '<?php echo $scene_dom_id; ?>';
     39<?php
     40/* Start the Loop */
     41while ( have_posts() ) : the_post();
     42get_the_ID();
     43                    $scene_dom_id = 'gltf-scene-'.$scene_id; ?>
     44        <div class="gltf-scene" id="<?php echo $scene_dom_id; ?>" style="height: 600px"></div>
     45        <script type="text/javascript">
     46            jQuery( function() {
     47);
     48;
     49                    </script>
    5050
    51                                                 GltfScene.render( scene_dom_id, scene );
    52                                             } );
    53                                         </script>
     51                    <?php
     52                    the_post_navigation();
     53                endwhile; // End of the loop.
     54            ?>
    5455
    55                                         <?php
    56 
    57                                         // get_template_part( 'template-parts/post/content', get_post_format() );
    58 
    59                                         // If comments are open or we have at least one comment, load up the comment template.
    60                                         // if ( comments_open() || get_comments_number() ) :
    61                                         //         comments_template();
    62                                         // endif;
    63 
    64                                         // the_post_navigation( array(
    65                                         //         'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
    66                                         //         'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
    67                                         // ) );
    68 
    69                                 endwhile; // End of the loop.
    70                         ?>
    71 
    72                 </main><!-- #main -->
    73         </div><!-- #primary -->
     56        </main><!-- #main -->
     57    </div><!-- #primary -->
    7458</div><!-- .wrap -->
    7559
Note: See TracChangeset for help on using the changeset viewer.