質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

受付中

ThreeJSでblenderのファイル(.glb)をReact上で読み込めない

moimoi_sushi
moimoi_sushi

総合スコア26

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

189閲覧

投稿2022/04/13 06:04

編集2022/04/14 23:03

前提

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" を使用

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。