Toute la documentation se trouve ici
1. Intégrer les fichiers indispensables .js et .css
Dans votre thème, retrouver le fichier functions.php
Editer-le, repérer la fonction:
/**
* Enqueue scripts and styles.
*/
function test_scripts() {
wp_enqueue_style( 'test-style', get_stylesheet_uri() );
wp_enqueue_script( 'test-navigation', get_template_directory_uri() . '/js/navigation.js', array(), array(), _S_VERSION, true );
wp_enqueue_script( 'test-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), _S_VERSION, true );
if ( is_singular() comments_open() ; get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'test_scripts' );Ajouter la ligne suivante avant celle qui charge votre css personnalisée
wp_enqueue_style( 'swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css' );Ajouter la ligne suivante avant celle qui charge vos scripts
wp_enqueue_script( 'swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), _S_VERSION, true );2. Préparer l’html requis
La structure requise est:
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
Éditez le fichier archive.php
Ajouter la structure dansla boucle « while »
<?php
/**
* The template for displaying archive pages
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package The_Way_Ball_Go_Theme
*/
get_header();
?>
<main id="primary" class="site-main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header><!-- .page-header -->
<?php
/* Start the Loop */
while ( have_posts() ) :
the_post();
/*
* Include the Post-Type-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Type name) and that will be used instead.
*/
get_template_part( 'template-parts/content-archive', get_post_type() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main><!-- #main -->
<?php
get_sidebar();
get_footer();Fichier modifié
<?php
/**
* The template for displaying archive pages
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package The_Way_Ball_Go_Theme
*/
get_header();
?>
<main id="primary" class="site-main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header><!-- .page-header -->
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<?php
/* Start the Loop */
while ( have_posts() ) :?>
<div class="swiper-slide">
<a href="<?php the_permalink(); ?>"
<?php the_post_thumbnail('thumbnail');?>
<?php the_title();?>
</a>
</div>
<? endwhile;?>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<?php the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main><!-- #main -->
<?php
get_sidebar();
get_footer();
/**
* Autoriser l'upload de tous types de format dans les médias
*/
add_filter('upload_mimes', 'wpm_myme_types', 1, 1);
function wpm_myme_types($mime_types){
$mime_types['svg'] = 'application/postscript'; //On autorise les .svg
$mime_types['glb'] = 'application/postscript'; //On autorise les .glb
return $mime_types;
}
3. Copier le script dans le header.php
Éditez le fichier header.php et copier ce script juste après le début su div id= »page »:
<div id="page" class="site">
ICI
<script type="importmap">
{
"imports": {
"three": "<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/build/three.module.js"
}
}
</script>
4. Intégrer le script dans le contenu de vos articles
Éditez le fichier content.php (l’affichage du contenu d’un article) et copier ce script JUSTE AVANT la fermeture de l’article </article><!-- #post-<?php the_ID(); ?> -->
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from '<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from '<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from '<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/examples/jsm/loaders/DRACOLoader.js';
let container, containerBox;
let cameraPersp, cameraOrtho, currentCamera;
let orbit, scene, raycaster, renderer, control;
const clock = new THREE.Clock();
init();
render();
animate();
function init() {
container = document.getElementById( 'capture-<?php the_ID(); ?>' );
containerBox = container.getBoundingClientRect();
console.log(containerBox.width, containerBox.height);
renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( containerBox.width, containerBox.height );
// setClearColor(Couleur de fond de la 3D, transparance de 0 à 1)
renderer.setClearColor( 0xffffff, 0 ); // the default
container.appendChild( renderer.domElement );
const aspect = containerBox.width / containerBox.height;
// THREE.PerspectiveCamera(Champ de Vision FOV, ratio, près, loin)
// currentCamera.position.set(x,y,z) // position de la caméra
cameraPersp = new THREE.PerspectiveCamera( 33, aspect, 0.1, 1500 );
currentCamera = cameraPersp;
currentCamera.position.set( 1, 1, 0);
currentCamera.lookAt( 0, 0, 0 );
scene = new THREE.Scene();
// THREE.Fog(Couleur du brouillard, transparance de 0 à 1, distance)
scene.fog = new THREE.Fog( 0xffffff, 1, 1500 );
// THREE.HemisphereLight(Couleur du la lumière, Couleur de l'ombre)
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff );
// hemiLight.position.set(x,y,z) // Position de la lumière en x,y,z
hemiLight.position.set( 0, 50, 0 );
scene.add( hemiLight );
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/examples/js/libs/draco/gltf/' );
const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );
loader.load( '<?php echo $captureUrl; ?>', function ( gltf ) {
const model = gltf.scene;
model.name = 'capture-<?php echo $captureId; ?>'
//position initiale
model.position.set( 0, 0, 0 );
//taille initiale
model.scale.set( 1, 1, 1 );
scene.add( model );
});
orbit = new OrbitControls( currentCamera, renderer.domElement );
orbit.update();
orbit.addEventListener( 'change', render );
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
const aspect = containerBox.width / containerBox.height;
cameraPersp.aspect = aspect;
cameraPersp.updateProjectionMatrix();
renderer.setSize( containerBox.width, containerBox.height );
render();
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, currentCamera );
}
function onPointerMove( event ) {
pointer.x = ( event.clientX / containerBox.width ) * 2 - 1;
pointer.y = - ( event.clientY / containerBox.height ) * 2 + 1;
}
function render() {
renderer.render( scene, currentCamera );
}
</script>
5. Intégrer la zone d’affichage de l’objet 3D
Éditez toujours le fichier content.php (l’affichage du contenu d’un article) et copier ce code JUSTE APRÈS l’ouverture de l’article <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div id="capture-<?php the_ID(); ?>" class="canvas-box"></div>
6. Définir la taille du canvas
Éditez le fichier style-custom.css et définissez la hauteur du canvas
/*
** 3D
*/
.canvas-box {
height: 500px;
}
7. Créer un champ personnalisé « url_3d »
Dans l’éditeur wordpress, dans un article, créez le champ personnalisé « url_3d ».
8. Récupérer la valeur du champ « url_3d » dans le script
Éditez le fichier content.php (l’affichage du contenu d’un article) et copier ce code DANS le php en haut de l’article de l’article <?php
/**
* Template part for displaying posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package Capture3d
*/
ICI
?>
<?php /** * Template part for displaying posts * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package The_Way_Ball_Go_Theme */ $captureUrl = get_post_meta($post->ID, 'url_3d', true); $captureId = 'capture3d-'.get_the_ID(); ?>;
8. Récupérer et renseigner le champ personnalisé pour chacun des articles
Dans la bibliothèque de média: uplaoder votre fichier 3D
Séléctionnez le et copier l’url du fichier
Copiez cet url dans le champ « url_3d »
Enregistrez et prévisualisez!
