{"id":34031,"date":"2024-12-13T16:10:43","date_gmt":"2024-12-13T07:10:43","guid":{"rendered":"https:\/\/gri.jp\/media\/?p=34031"},"modified":"2024-12-13T16:10:43","modified_gmt":"2024-12-13T07:10:43","slug":"%e3%80%90%e8%b6%85%e7%b0%a1%e5%8d%98%ef%bc%81%e3%80%91three-js%e3%81%a7%e3%81%af%e3%81%98%e3%82%81%e3%82%8b3d%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84-%ef%bd%9egltf%e3%81%ae%e3%82%a4%e3%83%b3","status":"publish","type":"post","link":"https:\/\/gri.jp\/media\/entry\/34031","title":{"rendered":"\u3010\u8d85\u7c21\u5358\uff01\u3011three.js\u3067\u306f\u3058\u3081\u308b3D\u30b3\u30f3\u30c6\u30f3\u30c4 \uff5eglTF\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\uff5e"},"content":{"rendered":"

\u3053\u3093\u306b\u3061\u306f\uff01
\nWeb\u30c7\u30b6\u30a4\u30ca\u30fc\u306eNK\u7d30\u80de\u3067\u3059\uff01
\n\u4eca\u65e5\u306fThree.js\u3092\u4f7f\u3063\u3066\u3001\u7c21\u5358\u306a3D\u30e2\u30c7\u30eb\u3092Web\u30da\u30fc\u30b8\u306b\u8868\u793a\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002\u30c7\u30e2\u30b5\u30a4\u30c8\u306f\u3053\u3061\u3089<\/a>\u3002<\/p>\n

\n
\"NK\u7d30\u80de\"<\/div>\n
NK\u7d30\u80de<\/div>\n
\n
\n\u4eca\u56de\u306fglTF\uff08.glb\uff09\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u5f62\u5f0f\u3092\u4f7f\u3044\u307e\u3059\uff01glTF\u306e\u66f8\u304d\u51fa\u3057\u306b\u3064\u3044\u3066\u306f\u3001\u4e0b\u8a18\u306e\u8a18\u4e8b\u3067\u8a73\u3057\u304f\u66f8\u3044\u3066\u307e\u3059\uff5e<\/div>\n<\/div><\/div>\n

https:\/\/gri.jp\/media\/?p=34033&preview=1&_ppp=0a68325446<\/a><\/p>\n

Three.js\u3068\u306f<\/h2>\n

Three.js\u3068\u306f\u3001WebGL\u3092\u7c21\u5358\u306b\u6271\u3046\u305f\u3081\u306bJavascript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u30013D\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u624b\u8efd\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002\u4e0b\u8a18\u304c\u3001Three.js\u306e\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306b\u306a\u308a\u307e\u3059\u3002
\n

<\/tr>

Three.js \u2013 JavaScript 3D library<\/a> - threejs.org<\/td><\/tr><\/tbody><\/table><\/div>\n

\u89e3\u8aac<\/h2>\n

1.<\/strong><\/span> html\u306e\u57fa\u672c\u69cb\u9020<\/h3>\n

\u307e\u305a\u3001HTML\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001\u57fa\u672c\u7684\u306a\u69cb\u9020\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u3053\u306e\u6bb5\u968e\u3067\u3001Three.js\u3092\u542b\u3080\u3044\u304f\u3064\u304b\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8aad\u307f\u8fbc\u3080\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u4eca\u56de\u306fCDN\u304b\u3089\u4ee5\u4e0b3\u3064\u306escript\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n\n\n\n\n\n
Three.min.js<\/td>\nThree.js\u306e\u4e3b\u8981\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u30023D\u30b7\u30fc\u30f3\u306e\u4f5c\u6210\u3001\u30ab\u30e1\u30e9\u306e\u8a2d\u5b9a\u3001\u30e9\u30a4\u30c8\u306e\u8ffd\u52a0\u3001\u30e2\u30c7\u30eb\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306a\u3069\u304c\u53ef\u80fd\u3002<\/td>\n<\/tr>\n
OrbitControls.js<\/td>\nThree.js\u306e\u8ffd\u52a0\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30de\u30a6\u30b9\u64cd\u4f5c\u3067\u30b7\u30fc\u30f3\u3092\u56de\u8ee2\u3001\u30ba\u30fc\u30e0\u3001\u30d1\u30f3\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u3002\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30ab\u30e1\u30e9\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u304c\u53ef\u80fd\u3002<\/td>\n<\/tr>\n
GTLFLoader.js<\/td>\nThree.js\u306e\u8ffd\u52a0\u30e2\u30b8\u30e5\u30fc\u30eb\u3067\u3001GLTF\/GLB\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u306e3D\u30e2\u30c7\u30eb\u3092\u30ed\u30fc\u30c9\u3092\u53ef\u80fd\u3068\u3059\u308b\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
<\/div>\n
\n
<\/i> CDN\u3068\u306f<\/div>\n

CDN\uff08Contents Delivery Network\uff09\u3068\u306f\u3001\u6570\u591a\u304f\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u30b5\u30fc\u30d0\u30fc\u306a\u3069\u3067\u69cb\u6210\u3055\u308c\u305f\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3092\u7528\u3044\u308b\u3053\u3068\u306b\u3088\u308a\u3001Web\u30b5\u30a4\u30c8\u4e0a\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8fc5\u901f\u306b\u30a8\u30f3\u30c9\u30e6\u30fc\u30b6\u30fc\u306b\u5c4a\u3051\u308b\u305f\u3081\u306e\u4ed5\u7d44\u307f\u3067\u3059\u3002
\n\u53c2\u8003\uff1ahttps:\/\/www.ntt.com\/bizon\/glossary\/e-c\/cdn.html<\/a><\/p>\n<\/div>\n

<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u30bf\u30a4\u30c8\u30eb\u3092\u5165\u529b<\/title>\r\n    <style>\r\n        body {\r\n            margin: 0;\r\n            overflow: hidden;\r\n        }\r\n\r\n        #myCanvas {\r\n            display: block;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n\r\n<body>\r\n    <canvas id=\"myCanvas\"><\/canvas>\r\n\r\n    <!-- Three.js\u3068\u5fc5\u8981\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u3092CDN\u304b\u3089\u8aad\u307f\u8fbc\u307f\u307e\u3059 -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/OrbitControls.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\r\n    <script>\r\n        \/\/ JavaScript\u306e\u30b3\u30fc\u30c9\u306f\u3053\u3053\u306b\u8a18\u8ff0\u3057\u307e\u3059\r\n    <\/script>\r\n<\/body>\r\n\r\n<\/html>\r\n<\/code><\/pre>\n
<\/div>\n
2.<\/strong><\/span> Three.js\u57fa\u672c\u8a2d\u5b9a<\/h3>\n
Three.js\u306e\u57fa\u672c\u8a2d\u5b9a\u3092\u884c\u3044\u307e\u3059\u3002\u30b7\u30fc\u30f3\u3001\u30ab\u30e1\u30e9\u3001\u30ec\u30f3\u30c0\u30e9\u30fc\u3092\u8a2d\u5b9a\u3057\u3001\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u884c\u3046\u6e96\u5099\u3092\u3057\u307e\u3059\u3002<\/p>\n
\u30b7\u30fc\u30f3\u306e\u4f5c\u6210<\/h4>\n
Three.js\u3067\u306f\u3001\u307e\u305a\u30b7\u30fc\u30f3\uff08THREE.Scene\uff09\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30b7\u30fc\u30f3\u306f\u3001\u3059\u3079\u3066\u306e3D\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3084\u30e9\u30a4\u30c8\u304c\u914d\u7f6e\u3055\u308c\u308b\u30b3\u30f3\u30c6\u30ca\u3067\u3059\u3002<\/p>\n
    \/\/ \u30b7\u30fc\u30f3\u306e\u4f5c\u6210\r\n    const scene = new THREE.Scene();\r\n    \/\/\u30b7\u30fc\u30f3\u306e\u80cc\u666f\u8272\u3092\u6307\u5b9a\r\n    scene.background = new THREE.Color(0x000000);\r\n<\/code><\/pre>\n
<\/div>\n
\u30ab\u30e1\u30e9\u306e\u4f5c\u6210<\/h4>\n
\u30ab\u30e1\u30e9\uff08THREE.Camera\uff09\u306f\u3001\u30b7\u30fc\u30f3\u5185\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u3069\u306e\u3088\u3046\u306b\u898b\u308b\u304b\u3092\u6c7a\u5b9a\u3057\u307e\u3059\u3002\u4e00\u822c\u7684\u306b\u3001\u30d1\u30fc\u30b9\u30da\u30af\u30c6\u30a3\u30d6\u30ab\u30e1\u30e9\uff08THREE.PerspectiveCamera\uff09\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n
    \/\/ \u30ab\u30e1\u30e9\u306e\u4f5c\u6210\r\n    const camera = new THREE.PerspectiveCamera(30, width \/ height, 1, 500);\r\n    camera.position.set(60, 15, 30);<\/code><\/pre>\n
<\/div>\n
\u30ec\u30f3\u30c0\u30e9\u30fc\u306e\u4f5c\u6210<\/h4>\n
\u30ec\u30f3\u30c0\u30e9\u30fc\uff08THREE.WebGLRenderer\uff09\u306f\u3001\u30b7\u30fc\u30f3\u3068\u30ab\u30e1\u30e9\u3092\u3082\u3068\u306b\u63cf\u753b\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n
    \/\/ \u30ec\u30f3\u30c0\u30e9\u30fc\u306e\u8a2d\u5b9a\r\n    const canvasElement = document.querySelector('#myCanvas');\r\n    const renderer = new THREE.WebGLRenderer({\r\n        antialias: true,\r\n        canvas: canvasElement,\r\n    });\r\n\r\n    \/\/\u30ec\u30f3\u30c0\u30e9\u30fc\u306e\u30d4\u30af\u30bb\u30eb\u6bd4\r\n    renderer.setPixelRatio(window.devicePixelRatio);\r\n    \/\/\u30b5\u30a4\u30ba\r\n    renderer.setSize(width, height);\r\n    \/\/\u5f71\u306e\u6295\u5f71\r\n    renderer.shadowMap.enabled = true;\r\n    \/\/\u7269\u7406\u7684\u306a\u30e9\u30a4\u30c6\u30a3\u30f3\u30b0\r\n    renderer.physicallyCorrectLights = true;\r\n    \/\/sRGB\u30a8\u30f3\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\uff08\u8272\u306e\u8abf\u6574\uff09\r\n    renderer.outputEncoding = THREE.sRGBEncoding;\r\n    \/\/\u30c8\u30fc\u30f3\u30de\u30c3\u30d4\u30f3\u30b0\uff08\u8272\u306e\u8abf\u6574\uff09\r\n    renderer.toneMapping = THREE.ACESFilmicToneMapping;\r\n<\/code><\/pre>\n
<\/div>\n
\u30ab\u30e1\u30e9\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u8a2d\u5b9a<\/h4>\n
\u30ab\u30e1\u30e9\u306e\u64cd\u4f5c\u3092\u7c21\u5358\u306b\u3059\u308b\u305f\u3081\u306b\u3001OrbitControls\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n
    \/\/ \u30ab\u30e1\u30e9\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4f5c\u6210\r\n    const controls = new THREE.OrbitControls(camera, canvasElement);\r\n    controls.enableDamping = true;\r\n    controls.dampingFactor = 0.2;\r\n<\/code><\/pre>\n
<\/div>\n
3.<\/strong><\/span> \u30e9\u30a4\u30c8\u306e\u4f5c\u6210<\/h3>\n
\u30b7\u30fc\u30f3\u306b\u5149\u6e90\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30e2\u30c7\u30eb\u3092\u898b\u3084\u3059\u304f\u3057\u307e\u3059\u3002\u4eca\u56de\u306f\u3001\u4e3b\u5149\u6e90\u306f\u30e2\u30c7\u30eb\u304b\u3089\u8aad\u307f\u8fbc\u3080\u305f\u3081\u3001\u74b0\u5883\u5149\u6e90(ambientLight)\u306e\u307f\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
\n
<\/div>\n<\/div>\n
    \/\/ \u74b0\u5883\u5149\u6e90\u306e\u4f5c\u6210\r\n    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\r\n    scene.add(ambientLight);\r\n<\/code><\/pre>\n
<\/div>\n
4.<\/strong><\/span> \u30a6\u30a4\u30f3\u30c9\u30a6\u306e\u30ea\u30b5\u30a4\u30ba\u5bfe\u5fdc<\/h3>\n
\u30a6\u30a3\u30f3\u30c9\u30a6\u30b5\u30a4\u30ba\u304c\u5909\u66f4\u3055\u308c\u305f\u3068\u304d\u306b\u3001\u30ec\u30f3\u30c0\u30e9\u30fc\u3068\u30ab\u30e1\u30e9\u306e\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n
    \/\/ \u30a6\u30a3\u30f3\u30c9\u30a6\u30b5\u30a4\u30ba\u5909\u66f4\u6642\u306e\u5bfe\u5fdc\r\n    window.addEventListener('resize', () => {\r\n        const width = window.innerWidth;\r\n        const height = window.innerHeight;\r\n        renderer.setSize(width, height);\r\n        camera.aspect = width \/ height;\r\n        camera.updateProjectionMatrix();\r\n    });\r\n<\/code><\/pre>\n
<\/div>\n
5.<\/strong><\/span> 3D\u30e2\u30c7\u30eb\u306e\u8aad\u307f\u8fbc\u307f<\/h3>\n
GLTFLoader\u306e\u4f7f\u7528<\/h4>\n
\u4eca\u56de\u306fGLTF\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u305f\u3081\u306b\u3001GLTFLoader\u3092\u4f7f\u7528\u3057\u3066\u3001\u30e2\u30c7\u30eb\u3092\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002<\/p>\n
\n
<\/div>\n<\/div>\n
    \/\/ 3D\u30e2\u30c7\u30eb\u306e\u8aad\u307f\u8fbc\u307f\r\n    const gltfLoader = new THREE.GLTFLoader();\r\n    gltfLoader.load('your\/path.glb', (gltf) => {\r\n        const model = gltf.scene;\/\/your\/path.glb\u306bglb\u30d5\u30a1\u30a4\u30eb\u306e\u30d1\u30b9\u3092\u633f\u5165\r\n\r\n        \/\/ \u30e2\u30c7\u30eb\u306e\u8a2d\u5b9a\r\n        model.traverse((child) => {\r\n            if (child instanceof THREE.Mesh) {\r\n                child.material.side = THREE.DoubleSide;\r\n                child.castShadow = true;\r\n                child.receiveShadow = true;\r\n            }\r\n        });\r\n\r\n        \/\/ \u30e2\u30c7\u30eb\u3092\u30b7\u30fc\u30f3\u306b\u8ffd\u52a0\r\n        scene.add(model);\r\n        model.scale.set(1, 1, 1);\r\n        model.position.set(0, -7, 0);\r\n    }, undefined, (error) => {\r\n        console.error('GLB\u30e2\u30c7\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f', error);\r\n    });\r\n<\/code><\/pre>\n
<\/div>\n
\u30e2\u30c7\u30eb\u5185\u306e\u30e9\u30a4\u30c8\u306e\u8aad\u307f\u8fbc\u307f<\/h4>\n
\u30e2\u30c7\u30eb\u5185\u306e\u30e9\u30a4\u30c8\uff08\u4eca\u56de\u306fPointLight\uff09\u3092\u8aad\u307f\u8fbc\u307f\u3001\u660e\u308b\u3055\u3084\u9670\u5f71\u306e\u8a2d\u5b9a\u3092\u884c\u3044\u307e\u3059\u3002\u30e2\u30c7\u30eb\u5185\u306b\u30e9\u30a4\u30c8\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u306a\u3051\u308c\u3070\u3001\u3053\u306e\u5de5\u7a0b\u306f\u5fc5\u8981\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n
        \/\/ \u30e2\u30c7\u30eb\u5185\u306e\u30e9\u30a4\u30c8\u3092\u30ea\u30b9\u30c8\u306b\u53ce\u96c6\r\n        model.traverse((obj) => {\r\n            if (obj.isMesh) {\r\n                obj.castShadow = true;\r\n                obj.receiveShadow = true;\r\n            }\r\n            if (obj.isLight) {\r\n                lights.push(obj);\r\n            }\r\n        });\r\n\r\n        \/\/ GLB\u30d5\u30a1\u30a4\u30eb\u5185\u306e\u30e9\u30a4\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u3082\u3068\u306b\u65b0\u3057\u3044\u30e9\u30a4\u30c8\u3092\u4f5c\u6210\u3057\u3066\u30b7\u30fc\u30f3\u306b\u8ffd\u52a0\r\n        lights.forEach((light) => {\r\n            let newLight = new THREE.PointLight(light.color, light.intensity, light.distance, light.decay);\r\n            newLight.position.copy(light.position);\r\n            newLight.castShadow = true;\r\n            newLight.shadow.mapSize.width = 1024;\r\n            newLight.shadow.mapSize.height = 1024;\r\n            newLight.shadow.radius = 30;\r\n\r\n            \/\/ \u660e\u308b\u3055\uff08intensity\uff09\u306e\u8abf\u6574\r\n            newLight.intensity = light.intensity = 400;\r\n            scene.add(newLight);\r\n        });<\/code><\/pre>\n
<\/div>\n
6.<\/strong><\/span> \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30d7\u306e\u4f5c\u6210<\/h3>\n
\u30ab\u30e1\u30e9\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3092\u66f4\u65b0\u3057\u3001\u30b7\u30fc\u30f3\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u305f\u3081\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30d7\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
    \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30d7\r\n    function tick() {\r\n        controls.update();\r\n        renderer.render(scene, camera);\r\n        requestAnimationFrame(tick);\r\n    }\r\n\r\n    tick(); \/\/ \u521d\u56de\u547c\u3073\u51fa\u3057\r\n}\r\n<\/code><\/pre>\n
<\/div>\n
\u30b3\u30fc\u30c9\u5168\u4f53<\/h2>\n
\u5b8c\u6210\u3057\u305f\u30b3\u30fc\u30c9\u306b\u306a\u308a\u307e\u3059\u3002glTF\u30d5\u30a1\u30a4\u30eb\u3092\u201dyour\/path.glb\u201d\u3068\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u4f7f\u7528\u3059\u308b\u30e2\u30c7\u30eb\u306e\u30d1\u30b9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"ja\">\r\n\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u30bf\u30a4\u30c8\u30eb<\/title>\r\n    <style>\r\n        body {\r\n            margin: 0;\r\n            overflow: hidden;\r\n        }\r\n\r\n        #myCanvas {\r\n            display: block;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n\r\n<body>\r\n    <canvas id=\"myCanvas\"><\/canvas>\r\n\r\n    <!-- cdn\u306e\u8aad\u307f\u8fbc\u307f -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/OrbitControls.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\r\n    <script>\r\n\r\n        \/\/init \u95a2\u6570\u3092\u5b9f\u884c\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u8a2d\u5b9a     \r\n        window.addEventListener(\"DOMContentLoaded\", init);\r\n\r\n        function init() {\r\n\r\n            \/\/\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u5e45\u3068\u9ad8\u3055\u3092\u53d6\u5f97\u3057\u3001width \u3068 height \u3068\u3044\u3046\u5909\u6570\u306b\u683c\u7d0d\r\n            const width = window.innerWidth;\r\n            const height = window.innerHeight;\r\n\r\n            \/\/ \u30ec\u30f3\u30c0\u30e9\u30fc\u306e\u8a2d\u5b9a\r\n            const canvasElement = document.querySelector('#myCanvas');\r\n            const renderer = new THREE.WebGLRenderer({\r\n                antialias: true,\r\n                canvas: canvasElement,\r\n            });\r\n\r\n            renderer.setPixelRatio(window.devicePixelRatio);\r\n            renderer.setSize(width, height);\r\n            renderer.shadowMap.enabled = true;\r\n            renderer.physicallyCorrectLights = true;\r\n            renderer.outputEncoding = THREE.sRGBEncoding;\r\n            renderer.toneMapping = THREE.ACESFilmicToneMapping;\r\n\r\n            \/\/ \u30b7\u30fc\u30f3\u306e\u4f5c\u6210\r\n            const scene = new THREE.Scene();\r\n            scene.background = new THREE.Color(0x000000);\r\n\r\n            \/\/ \u30ab\u30e1\u30e9\u306e\u4f5c\u6210\r\n            const camera = new THREE.PerspectiveCamera(30, width \/ height, 1, 500);\r\n            camera.position.set(60, 15, 30);\r\n\r\n            \/\/ \u30ab\u30e1\u30e9\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4f5c\u6210\r\n            const controls = new THREE.OrbitControls(camera, canvasElement);\r\n            controls.enableDamping = true;\r\n            controls.dampingFactor = 0.2;\r\n\r\n            \/\/ \u74b0\u5883\u5149\u6e90\u306e\u4f5c\u6210\r\n            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\r\n            scene.add(ambientLight);\r\n            \r\n            let model; \/\/ \u30e2\u30c7\u30eb\u3092\u683c\u7d0d\u3059\u308b\u5909\u6570\r\n            const lights = []; \/\/ \u30e9\u30a4\u30c8\u3092\u683c\u7d0d\u3059\u308b\u914d\u5217\r\n\r\n            \/\/ \u30a6\u30a3\u30f3\u30c9\u30a6\u30b5\u30a4\u30ba\u5909\u66f4\u6642\u306e\u5bfe\u5fdc\r\n            window.addEventListener('resize', () => {\r\n                const width = window.innerWidth;\r\n                const height = window.innerHeight;\r\n                renderer.setSize(width, height);\r\n                camera.aspect = width \/ height;\r\n                camera.updateProjectionMatrix();\r\n            });\r\n\r\n            \/\/ 3D\u30e2\u30c7\u30eb\u306e\u8aad\u307f\u8fbc\u307f\r\n            const gltfLoader = new THREE.GLTFLoader();\r\n            gltfLoader.load('your\/path.glb', (gltf) => {\r\n                model = gltf.scene;\r\n\r\n                \/\/ \u30e2\u30c7\u30eb\u5185\u306e\u30e9\u30a4\u30c8\u3092\u30ea\u30b9\u30c8\u306b\u53ce\u96c6\r\n                model.traverse((obj) => {\r\n                    if (obj.isMesh) {\r\n                        obj.castShadow = true;\r\n                        obj.receiveShadow = true;\r\n                    }\r\n                    if (obj.isLight) {\r\n                        lights.push(obj);\r\n                    }\r\n                });\r\n\r\n                \/\/ GLB\u30d5\u30a1\u30a4\u30eb\u5185\u306e\u30e9\u30a4\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u3082\u3068\u306b\u65b0\u3057\u3044\u30e9\u30a4\u30c8\u3092\u4f5c\u6210\u3057\u3066\u30b7\u30fc\u30f3\u306b\u8ffd\u52a0\r\n                lights.forEach((light) => {\r\n                    let newLight = new THREE.PointLight(light.color, light.intensity, light.distance, light.decay);\r\n                    newLight.position.copy(light.position);\r\n                    newLight.castShadow = true;\r\n                    newLight.shadow.mapSize.width = 1024;\r\n                    newLight.shadow.mapSize.height = 1024;\r\n                    newLight.shadow.radius = 30;\r\n\r\n                    \/\/ \u660e\u308b\u3055\uff08intensity\uff09\u306e\u8abf\u6574\r\n                    newLight.intensity = light.intensity = 400;\r\n                    scene.add(newLight);\r\n                });\r\n\r\n                \/\/ \u30e2\u30c7\u30eb\u3092\u30b7\u30fc\u30f3\u306b\u8ffd\u52a0\r\n                scene.add(model);\r\n                model.scale.set(1, 1, 1);\r\n                model.position.set(0, -7, 0);\r\n\r\n\r\n            }, undefined, (error) => {\r\n                console.error('GLB\u30e2\u30c7\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f', error);\r\n            });\r\n\r\n            \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30d7\r\n            function tick() {\r\n                controls.update();\r\n                renderer.render(scene, camera);\r\n                requestAnimationFrame(tick);\r\n            }\r\n\r\n            tick(); \/\/ \u521d\u56de\u547c\u3073\u51fa\u3057\r\n        }\r\n    <\/script>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
\u307e\u3068\u3081<\/h2>\n
\u4eca\u56de\u306f\u3001Three.js\u3092\u4f7f\u7528\u3057\u30663D\u30e2\u30c7\u30eb\u3092Web\u30da\u30fc\u30b8\u306b\u8868\u793a\u3059\u308b\u624b\u9806\u3092\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3057\u305f\u3002\u3053\u308c\u3092\u57fa\u306b\u3001\u3055\u3089\u306b\u8907\u96d1\u306a3D\u30b7\u30fc\u30f3\u3084\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u8981\u7d20\u3092\u8ffd\u52a0\u3057\u3066\u3001\u72ec\u81ea\u306eWebGL\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff01\u307e\u305f\u3001\u79c1\u81ea\u8eab\u3082\u3001Three.js\u306e\u521d\u5b66\u8005\u306a\u306e\u3067\u3001\u300c\u3082\u3063\u3068\u3053\u3046\u3057\u305f\u307b\u3046\u304c\u3044\u3044\uff01\uff01\u300d\u306a\u3069\u304c\u3042\u308c\u3070\u3001\u305c\u3072\u30b3\u30e1\u30f3\u30c8\u3092\u304a\u9858\u3044\u3057\u307e\u3059\uff01<\/p>\n
\u53c2\u8003\u30b5\u30a4\u30c8<\/h2>\n
<\/tr>

three.js docs<\/a> - threejs.org<\/td><\/tr><\/tbody><\/table><\/div>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u3053\u3093\u306b\u3061\u306f\uff01 Web\u30c7\u30b6\u30a4\u30ca\u30fc\u306eNK\u7d30\u80de\u3067\u3059\uff01 \u4eca\u65e5\u306fThree.js\u3092\u4f7f\u3063\u3066\u3001\u7c21\u5358\u306a3D\u30e2\u30c7\u30eb\u3092Web\u30da\u30fc\u30b8\u306b\u8868\u793a\u3059\u308b\u65b9\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002\u30c7\u30e2\u30b5\u30a4\u30c8\u306f\u3053\u3061\u3089\u3002 https:\/\/gri.jp\/media\/?p=340<\/p>\n","protected":false},"author":47,"featured_media":34788,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[123,84,100,130],"tags":[],"class_list":["post-34031","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","category-design","category-technical","category-try"],"acf":[],"meta_field":{"_edit_lock":["1734481150:1"],"_edit_last":["47"],"hidden_toppage":["0"],"_hidden_toppage":["field_61933136630d2"],"note_url":[""],"_note_url":["field_61243c8278b90"],"_thumbnail_id":["34788"],"_oembed_101ece7b072ffe2362d472e25bdb414e":["{{unknown}}"],"_oembed_4ac916e728d037f895d15588f69e7b1e":["{{unknown}}"],"_oembed_251e0fdb37db609fffd2ca331b53d166":["{{unknown}}"],"_oembed_f93cac2b0d43e80d78ef424b24c87893":["{{unknown}}"],"_oembed_9d0b73a65ab8a627a6ad9d72f841c696":["{{unknown}}"],"_oembed_a70102f212e60da218f0f48a67276d6e":["{{unknown}}"],"_oembed_e85e1081d0bab3c91de27c197c115ba7":["{{unknown}}"],"_oembed_215dc2b35f3c0074a3c2cb8b46fe3076":["{{unknown}}"],"_oembed_32a92795eed22f53611c802efd2e65a1":["{{unknown}}"],"_oembed_9997192e4f39e03a71f73d2dc51c1cdb":["{{unknown}}"],"_oembed_e8f35ac2990f81e4382a19770095d132":["{{unknown}}"],"_pv_count":["a:24:{i:20;i:126;i:22;i:132;i:23;i:135;i:9;i:143;i:19;i:152;i:11;i:210;i:17;i:233;i:16;i:234;i:18;i:232;i:2;i:60;i:4;i:50;i:7;i:61;i:13;i:190;i:14;i:246;i:12;i:151;i:15;i:255;i:21;i:126;i:0;i:83;i:3;i:48;i:5;i:29;i:8;i:81;i:10;i:183;i:1;i:67;i:6;i:27;}"],"pv_count":["3254"],"_oembed_39e266d156f12f534d6c7b2d1080a133":["{{unknown}}"],"_oembed_559e07fab5242320ba39297b5070a5bc":["{{unknown}}"],"_oembed_ba51a9fa783fc240889e40712a52c52b":["{{unknown}}"],"_oembed_38f8725a4464b0ead9d6a4c4e4e8bbf7":["{{unknown}}"],"_oembed_88bde79cbfc1c34f0efa8c6e310adb71":["{{unknown}}"],"_oembed_0caf8757fa61edb9cc7e2ee687cdd3e2":["{{unknown}}"],"_oembed_2bf542a2a371cfad7f21ae67e42181c7":["{{unknown}}"]},"_links":{"self":[{"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/posts\/34031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/comments?post=34031"}],"version-history":[{"count":65,"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/posts\/34031\/revisions"}],"predecessor-version":[{"id":34942,"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/posts\/34031\/revisions\/34942"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/media\/34788"}],"wp:attachment":[{"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/media?parent=34031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/categories?post=34031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gri.jp\/media\/wp-json\/wp\/v2\/tags?post=34031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}