<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer class="mviewer" name="modelname" loading="lazy" type="model/gltf-binary" exposure="0.6"></model-viewer>document.addEventListener("DOMContentLoaded", () => {
var mvlist = document.querySelectorAll(".mviewer");
if(mvlist){
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting){
loadmodel(entry.target);
observer.unobserve(entry.target);
}
})
})
mvlist.forEach(mv => {observer.observe(mv);});
}
});
function loadmodel(target){
const fileName = target.getAttribute("name") + ".glb";
const url = `/wp/response.php`;
fetch(url, {
method: "POST",
headers: { 'Content-Type': 'model/gltf-binary' },
body : fileName
})
.then(res => {
if (!res.ok) throw new Error("取得失敗" + url);
return res.blob();
})
.then(blob => {
const objectURL = URL.createObjectURL(blob);
target.src = objectURL;
})
.catch(err => console.error("モデル読み込みエラー: ", err + url));
}<?php
if (class_exists( 'loadmodel' ) ) {
error_log("double exist ");
return;
}
$filename = file_get_contents('php://input');
if (!preg_match('/^[a-zA-Z0-9_\-]+\.glb$/', $filename)) {
error_log("loadmodel not glb : " . $filename);
http_response_code(400);
exit("Invalid file name");
}
$baseDir = __DIR__ . '/wp-content/uploads/model/';
$filePath = $baseDir . $filename;
if (!$filePath || strpos($filePath, realpath($baseDir)) !== 0) {
error_log("loadmodel access denied : " . $filePath);
http_response_code(403);
exit("Access denied");
}
if (!file_exists($filePath)) {
error_log("loadmodel not found : " . $filePath);
http_response_code(404);
exit("File not found");
}
header('Content-Type: model/gltf-binary');
header('Content-Disposition: inline; filename="'.$filename.'"');
header('Content-Length:' . filesize($filePath));
readfile($filePath);
exit;
?>
