前提
React上でblenderのファイル(.glb)をローディングできているのですがブラウザ上で表示されません。
実現したいこと
・ブラウザにblenderのファイル(.glb)を表示させたい。
該当のソースコード
以下のコードをそのまま読み込んでいます。
Three.js
import { useEffect } from 'react'; import { WebGLRenderer, Scene, PerspectiveCamera, } from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; const Three: React.FC = () => { const onCanvasLoaded = (canvas: HTMLCanvasElement) => { if (!canvas) { return; } const width = window.innerWidth; const height = window.innerHeight; // init scene const scene = new Scene(); const camera = new PerspectiveCamera( 75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000 ); const renderer = new WebGLRenderer({ canvas: canvas, antialias: true }); renderer.setClearColor('#d2d0d0'); renderer.setSize(width, height); // ここでglbファイルを読み込んで設定します。 let model = null; loader.load( url, function (gltf) { model = gltf.scene; model.name = 'model_with_cloth'; model.scale.set(400.0, 400.0, 400.0); model.position.set(0, -400, 0); scene.add(model); console.log(model); // ここでmodelのオブジェクトデータの中身があることを確認できました。 }, function (error) { console.log('An error happened'); // glbがローディング完了するまではエラーになる console.log(error); } ); window.addEventListener('resize', () => handleResize({ camera, renderer })); renderer.render(scene, camera); }; // handle resize const handleResize = ({ camera, renderer }: any) => { const width = window.innerWidth; const height = window.innerHeight; camera.aspect = width / width; camera.updateProjectionMatrix(); renderer.setSize(width, width); }; useEffect(() => { return () => window.removeEventListener('resize', () => handleResize); }); return <canvas ref={onCanvasLoaded} />; }; export default Three;
App.tsx
略 const App = () => { return ( <Suspense fallback={null}> <Three /> </Suspense> ); };
結果としては、canvas(グレーの色にしている)のみが表示されてblenderの画像は表示されません。
試したこと
let model = null; loader.load( url, function (gltf) { model = gltf.scene; model.name = 'model_with_cloth'; model.scale.set(400.0, 400.0, 400.0); model.position.set(0, -400, 0); scene.add(gltf.scene); console.log(model); }, function (error) { console.log('An error happened'); // glbがローディング完了するまではエラーになる console.log(error); } );
ここの中身は色々と変えたりいじってみたのですが変わりませんでした。また3種類ほどのblenderファイルを入れ替えてみたのですが変わらずでした。
補足情報(FW/ツールのバージョンなど)
"three": "^0.139.2" を使用
まだ回答がついていません
会員登録して回答してみよう