Changeset 1563556

Timestamp:

12/28/2016 03:41:07 PM (9 years ago)

Author:

goldsounds

Message:

Added gltf_scene post type

Location:

gltf-media-type/trunk

Files:

• README.txt (modified) (3 diffs)
• admin/class-gltf-admin.php (modified) (2 diffs)
• admin/js/gltf-admin-select-model-metabox.js (added)
• gltf.php (modified) (2 diffs)
• includes/class-gltf-activator.php (modified) (1 diff)
• includes/class-gltf-deactivator.php (modified) (1 diff)
• includes/class-gltf-model-utils.php (added)
• includes/class-gltf.php (modified) (2 diffs)
• js/gltf-model-preview.js (modified) (1 diff)
• public/class-gltf-public.php (modified) (1 diff)
• public/js/gltf-public.js (modified) (1 diff)
• public/templates (added)
• public/templates/single-gltf_scene-notheme.php (added)
• public/templates/single-gltf_scene.php (added)

gltf-media-type/trunk/README.txt

@@ -4 +4 @@
 Requires at least: 4.5
 Tested up to: 4.7
-Stable tag: 1.0.1
+Stable tag: 1.1
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -18 +18 @@
 == Installation ==
 
-1. Upload `gltf.php` to the `/wp-content/plugins/` directory
-1. Activate the plugin through the 'Plugins' menu in WordPress
+1. Unzip this plugin in the `/wp-content/plugins/` directory
+1. Activate the "glTF Media Type" plugin through the 'Plugins' menu in WordPress
 1. Upload .gltf or .glb files via the Media browser, or via the Add Media button for posts/pages.
 1. Embed the 3D object in posts using a shortcode, like `[gltf_model scale="1.0" url="http://mywordpresssite.com/wp-content/uploads/2016/12/model.gltf"]. Note: You may get that full URL from the Media browser by selecting the file and copying the link.
@@ -33 +33 @@
 == Changelog ==
 
+= 1.1 =
+* Add gltf_scene post type
+
 = 1.0 =
 * First version, just basic rendering

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

@@ -52 +52 @@
         $this->plugin_name = $plugin_name;
         $this->version = $version;
-
     }
 
@@ -83 +82 @@
      * @since    1.0.0
      */
-    public function enqueue_scripts() {
-        wp_enqueue_script( $this->plugin_name, plugin_dir_url( dirname( __FILE__ ) ) . 'js/three.min.js', null, $this->version, false );
+    public function enqueue_scripts( $hook ) {
+        wp_enqueue_script( 'threejs', plugin_dir_url( dirname( __FILE__ ) ) . 'js/three.min.js', null, $this->version, false );
         wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/gltf-admin.js', array( 'jquery' ), $this->version, false );
 
+        global $post;
+
+        // if we're editing a gltf_scene, load the metabox js
+        if ( ( $hook == 'post-new.php' || $hook == 'post.php' ) && 'gltf_scene' === $post->post_type ) {
+            wp_enqueue_script( 'gltf-admin-select-model-metabox', plugin_dir_url( __FILE__ ) . 'js/gltf-admin-select-model-metabox.js', array( 'jquery' ), $this->version, false );
+
+            require_once dirname( dirname( __FILE__ ) ) . '/includes/class-gltf-model-utils.php';
+            Gltf_Model_Utils::enqueue_scripts( $this->version );
+        }
     }
 

gltf-media-type/trunk/gltf.php

@@ -12 +12 @@
  * Plugin URI:        http://goldsounds.com/plugins/gltf
  * Description:       A plugin to upload and render glTF 3D models in WordPress.
- * Version:           1.0.1
+ * Version:           1.1
  * Author:            Daniel Walmsley
  * Author URI:        http://goldsounds.com
@@ -51 +51 @@
  * admin-specific hooks, and public-facing site hooks.
  */
-require plugin_dir_path( __FILE__ ) . 'includes/class-gltf.php';
+require_once plugin_dir_path( __FILE__ ) . 'includes/class-gltf.php';
 
 /**

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

@@ -31 +31 @@
      */
     public static function activate() {
-
+        require_once plugin_dir_path( __FILE__ ) . 'class-gltf.php';
+        $plugin = new Gltf();
+        $plugin->register_scene_post_type();
+        flush_rewrite_rules();
     }
 

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

@@ -31 +31 @@
      */
     public static function deactivate() {
-
+        flush_rewrite_rules();
     }
 

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

@@ -140 +140 @@
         // add three.js if the current post has our shortcode
         add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_model_render_script' ) );
+        add_action( 'init', array( $this, 'register_scene_post_type' ) );
+        add_action( 'add_meta_boxes_gltf_scene', array( $this, 'add_scene_metaboxes' ) );
+        add_action( 'save_post_gltf_scene', array( $this, 'save_scene_metaboxes' ), 10, 3 );
+        add_filter( 'single_template', array( $this, 'register_scene_template' ) );
+
+        // remove the sidebars before rendering a scene
+        add_filter( 'body_class', function( $classes ) {
+            global $post;
+            
+            if ( $post && $post->post_type == 'gltf_scene' && in_array( 'has-sidebar', $classes ) ) {
+                $classes = array_diff( $classes, array('has-sidebar') );
+            }
+            
+            return $classes;
+        }, 99, 1 );
     }
 
@@ -165 +180 @@
     }
 
+    public function register_scene_post_type() {
+        register_post_type( 'gltf_scene',
+            array(
+                'labels' => array(
+                    'name' => __( 'Scenes' ),
+                    'singular_name' => __( 'Scene' )
+                ),
+                'public' => true,
+                'has_archive' => true,
+                'rewrite' => array('slug' => 'scenes'),
+            )
+        );
+    }
+
+    function add_scene_metaboxes() {
+        add_meta_box( 'gltf_select_scene_model', __( 'Select Scene Model', 'gltf-media-type' ), array( $this, 'select_scene_model_callback' ), 'gltf_scene' );
+        // add_meta_box( 'scene_select_model', 'Select Model', 'swp_file_upload', 'podcasts', 'normal', 'default' );
+    }
+
+    function select_scene_model_callback( $post ) {
+        wp_nonce_field( basename( __FILE__ ), 'gltf_nonce' );
+
+        // global $post;
+        // Get WordPress' media upload URL
+        $upload_link = esc_url( get_upload_iframe_src( 'image', $post->ID ) );
+
+        // See if there's a media id already saved as post meta
+        $main_model_id = get_post_meta( $post->ID, '_gltf_main_model', true );
+        $main_model_scale = get_post_meta( $post->ID, '_gltf_main_model_scale', true );
+
+        // Get the image src
+        $main_model_url = wp_get_attachment_url( $main_model_id );
+
+        // For convenience, see if the array is valid
+        $main_model_is_set = !! $main_model_url;
+        ?>
+
+        <!-- Your image container, which can be manipulated with js -->
+        <div class="gltf-main-model-container">
+            <?php if ( $main_model_is_set ) : ?>
+                <div class="gltf-model" data-model="<?php echo $main_model_url ?>" data-scale="1.0" style="width: 300px; height: 300px;"></div>
+            <?php endif; ?>
+        </div>
+
+        <!-- Your add & remove image links -->
+        <p class="hide-if-no-js">
+            <a class="upload-main-model <?php if ( $main_model_is_set  ) { echo 'hidden'; } ?>" 
+               href="<?php echo $upload_link ?>">
+                <?php _e('Set main 3D model') ?>
+            </a>
+            <a class="delete-main-model <?php if ( ! $main_model_is_set  ) { echo 'hidden'; } ?>" 
+              href="#">
+                <?php _e('Remove this 3D model') ?>
+            </a>
+        </p>
+
+        <!-- A hidden input to set and post the chosen image id -->
+        <input class="main-model-id" name="main-model-id" type="hidden" value="<?php echo esc_attr( $main_model_id ); ?>" />
+
+        <p>
+            <label for="main-model-scale">
+                <?php _e( 'Model Scale', 'gltf-media-type '); ?>
+                <input class="main-model-scale" name="main-model-scale" value="<?php echo esc_attr( $main_model_scale ? $main_model_scale : 1.0 ); ?>" />
+            </label>
+        </p>
+        <?php
+        /* 
+        
+        $gltf_stored_meta = get_post_meta( $post->ID );
+        ?>
+        <p>
+            <span class="gltf-row-title"><?php _e( 'Example Radio Buttons', 'gltf-media-type' )?></span>
+            <div class="gltf-row-content">
+                <label for="meta-radio-one">
+                    <input type="radio" name="meta-radio" id="meta-radio-one" value="radio-one" <?php if ( isset ( $gltf_stored_meta['meta-radio'] ) ) checked( $gltf_stored_meta['meta-radio'][0], 'radio-one' ); ?>>
+                    <?php _e( 'Radio Option #1', 'gltf-media-type' )?>
+                </label>
+                <label for="meta-radio-two">
+                    <input type="radio" name="meta-radio" id="meta-radio-two" value="radio-two" <?php if ( isset ( $gltf_stored_meta['meta-radio'] ) ) checked( $gltf_stored_meta['meta-radio'][0], 'radio-two' ); ?>>
+                    <?php _e( 'Radio Option #2', 'gltf-media-type' )?>
+                </label>
+            </div>
+        </p><?php
+        */
+    }
+
+    public function save_scene_metaboxes( $post_id, $post, $update ) {
+        $is_autosave = wp_is_post_autosave( $post_id );
+        $is_revision = wp_is_post_revision( $post_id );
+        $is_valid_nonce = ( isset( $_POST[ 'gltf_nonce' ] ) && wp_verify_nonce( $_POST[ 'gltf_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';
+     
+        // Exits script depending on save status
+        if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
+            return;
+        }
+     
+        // Checks for input and sanitizes/saves if needed
+        // if( isset( $_POST[ 'meta-text' ] ) ) {
+        //  update_post_meta( $post_id, 'meta-text', sanitize_text_field( $_POST[ 'meta-text' ] ) );
+        // }
+        if( isset( $_POST[ 'main-model-id' ] ) ) {
+            update_post_meta( $post_id, '_gltf_main_model', $_POST[ 'main-model-id' ] );
+        }
+        if( isset( $_POST[ 'main-model-scale' ] ) ) {
+            update_post_meta( $post_id, '_gltf_main_model_scale', $_POST[ 'main-model-scale' ] );
+        }
+        if( isset( $_POST[ 'meta-radio' ] ) ) {
+            update_post_meta( $post_id, 'meta-radio', $_POST[ 'meta-radio' ] );
+        }
+    }
+
+    public function register_scene_template( $single ) {
+        global $wp_query, $post;
+
+        /* Checks for single template by post type */
+        if ($post->post_type == 'gltf_scene'){
+            return dirname( dirname( __FILE__ ) ) . '/public/templates/single-gltf_scene.php';
+        }
+
+        return $single;
+    }
+
     public function enqueue_model_render_script() {
         global $post;
-        if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'gltf_model') ) {
-            wp_enqueue_script( 'threejs', plugin_dir_url( dirname( __FILE__ ) ) . 'js/three.min.js', null, $this->version, false );
-            wp_enqueue_script( 'gltf-loader', plugin_dir_url( dirname( __FILE__ ) ) . 'js/loaders/GLTFLoader.js', array( 'threejs' ), $this->version, false );
-            wp_enqueue_script( 'orbitcontrols', plugin_dir_url( dirname( __FILE__ ) ) . 'js/OrbitControls.js', array( 'threejs' ), $this->version, false );
-            wp_enqueue_script( 'gltf-model-preview', plugin_dir_url( dirname( __FILE__ ) ) . 'js/gltf-model-preview.js', array( 'jquery', 'gltf-loader', 'orbitcontrols' ), $this->version, false );
-        }
+        if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'gltf_model') ) {
+            require_once dirname( __FILE__ ) . '/class-gltf-model-utils.php';
+            Gltf_Model_Utils::enqueue_scripts( $this->version );
+        }
     }
 

gltf-media-type/trunk/js/gltf-model-preview.js

@@ -12 +12 @@
 
     function addLights() {
-        var ambient = new THREE.AmbientLight( 0x101030 );
+        // var ambient = new THREE.AmbientLight( 0x101030 );
+        var ambient = new THREE.AmbientLight( 0xFFFFFF, 1 );
         scene.add( ambient );
 

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

@@ -96 +96 @@
          * class.
          */
-
-        wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/gltf-public.js', array( 'jquery' ), $this->version, false );
+        require_once dirname( dirname( __FILE__ ) ) . '/includes/class-gltf-model-utils.php';
+        Gltf_Model_Utils::enqueue_common_gltf_scripts( $this->version );
+        wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/gltf-public.js', array( 'jquery', 'orbitcontrols' ), $this->version, false );
 
     }

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

@@ -2 +2 @@
     'use strict';
 
-    /**
-     * All of the code for your public-facing JavaScript source
-     * should reside in this file.
-     *
-     * Note: It has been assumed you will write jQuery code here, so the
-     * $ function reference has been prepared for usage within the scope
-     * of this function.
-     *
-     * This enables you to define handlers, for when the DOM is ready:
-     *
-     * $(function() {
-     *
-     * });
-     *
-     * When the window is loaded:
-     *
-     * $( window ).load(function() {
-     *
-     * });
-     *
-     * ...and/or other possibilities.
-     *
-     * Ideally, it is not considered best practise to attach more than a
-     * single DOM-ready or window-load handler for a particular page.
-     * Although scripts in the WordPress core, Plugins and Themes may be
-     * practising this, we should strive to set a better example in our own work.
-     */
+     window.GltfScene = function() {
+
+        var container, camera, scene, renderer, controls;
+
+        function addCamera() {
+            camera = new THREE.PerspectiveCamera( 75, container.offsetWidth / container.offsetHeight, 1, 2000 );
+            camera.position.set(0, 2, 3);
+            scene.add( camera );
+        }
+
+        function addLights() {
+            // var ambient = new THREE.AmbientLight( 0x101030 );
+            var ambient = new THREE.AmbientLight( 0xFFFFFF, 1 );
+            scene.add( ambient );
+
+            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
+            directionalLight.position.set( 0, 0, 1 );
+            scene.add( directionalLight );
+        }
+
+        function addControls() {
+            controls = new THREE.OrbitControls( camera, renderer.domElement );
+            controls.userPan = false;
+            controls.userPanSpeed = 0.0;
+            controls.maxDistance = 5000.0;
+            controls.maxPolarAngle = Math.PI * 0.495;
+            controls.autoRotate = false;
+            // controls.autoRotateSpeed = -10.0;
+        }
+
+        function addRenderer() {
+            renderer = new THREE.WebGLRenderer({antialias:true});
+            renderer.setClearColor( 0x222222 );
+            renderer.setPixelRatio( window.devicePixelRatio );
+            renderer.setSize( container.offsetWidth, container.offsetHeight );
+        }
+
+        function addLoadingLogger() {
+            var manager = new THREE.LoadingManager();
+            manager.onProgress = function ( item, loaded, total ) {
+                console.log( item, loaded, total );
+            };
+        }
+
+        function loadModel( modelUrl, modelScale ) {
+            THREE.GLTFLoader.Shaders.removeAll(); // remove all previous shaders
+            var loader = new THREE.GLTFLoader;
+            loader.load( modelUrl, function( data ) {
+                var object = data.scene;
+                object.scale.set(modelScale, modelScale, modelScale);
+
+                var animations = data.animations;
+                if ( animations && animations.length ) {
+                    mixer = new THREE.AnimationMixer( object );
+                    for ( var i = 0; i < animations.length; i ++ ) {
+                        var animation = animations[ i ];
+                        mixer.clipAction( animation ).play();
+                    }
+                }
+
+                scene.add( object );
+            } );
+        }
+
+        function render() {
+            renderer.render( scene, camera );
+        }
+
+        function animate() {
+            requestAnimationFrame( animate );
+            THREE.GLTFLoader.Animations.update();
+            THREE.GLTFLoader.Shaders.update(scene, camera);
+            render();
+            controls.update();
+        }
+
+        function initScene( id ) {
+            container = jQuery( '#'+id ).get(0);
+
+            scene = new THREE.Scene();
+
+            addLights(); // LIGHTS!
+            addCamera(); // CAMERA!
+            addRenderer(); // ACTION! :)
+            addControls();
+            addLoadingLogger();
+
+            container.appendChild( renderer.domElement );
+        }
+
+        return {
+            render: function( id, scene ) {
+                console.log("rendering "+id+": "+JSON.stringify( scene ));
+
+                initScene( id );
+                loadModel( scene.main_model, scene.main_model_scale );
+                animate();
+            }
+        }
+     }();
 
 })( jQuery );