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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3DCG

コンピュータの演算により、3次元空間の仮想物体を、2次元平面上で表現する手法である。

解決済

OBJファイルをthree.jsで表示したいがエラーが発生した。

IM1
IM1

総合スコア1

Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3DCG

コンピュータの演算により、3次元空間の仮想物体を、2次元平面上で表現する手法である。

1回答

0リアクション

0クリップ

184閲覧

投稿2022/10/04 04:10

javascriptそのもの、three.js共に初心者です。
Three.jsでobj形式の3Dモデルを表示するために以下のkoma_2.htmlファイルをサイト(https://end0tknr.hateblo.jp/entry/20210822/1629582366)
を元に作成しました。

HTML,

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Hello Three.js</title> <style> html, body { margin: 0; height: 100%; } #c { width: 100%; height: 100%; display: block; } </style> </head> <body> <canvas id="c"></canvas> <script type="module"> import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js'; import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js'; import {OBJLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/loaders/OBJLoader.js'; function main() { const canvas = document.querySelector('#c'); const renderer = new THREE.WebGLRenderer({canvas}); //カメラ const fov = 45; const aspect = 2; // the canvas default const near = 0.1; const far = 100; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); //camera_position_z0=0 camera.position.set(0, 10, 20); //camera.position.set(0, 0, 0); const controls = new OrbitControls(camera, canvas); controls.target.set(0, 5, 0); controls.update(); const scene = new THREE.Scene(); scene.background = new THREE.Color('black'); var axis = new THREE.AxisHelper(1000); axis.position.set(0,0,0); scene.add(axis); { //チェック板のロード const planeSize = 40; const loader = new THREE.TextureLoader(); const texture = loader.load('https://threejsfundamentals.org/threejs/resources/images/checker.png'); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.magFilter = THREE.NearestFilter; const repeats = planeSize / 2; texture.repeat.set(repeats, repeats); const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize); const planeMat = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide, }); const mesh = new THREE.Mesh(planeGeo, planeMat); mesh.rotation.x = Math.PI * -.5; scene.add(mesh); } { const skyColor = 0xB1E1FF; // light blue const groundColor = 0xB97A20; // brownish orange const intensity = 1; const light = new THREE.HemisphereLight(skyColor, groundColor, intensity); scene.add(light); } { //ライト const color = 0xFFFFFF; const intensity = 1; const light = new THREE.DirectionalLight(color, intensity); light.position.set(0, 10, 0); light.target.position.set(-5, 0, 0); scene.add(light); scene.add(light.target); } { //OBJのロード const objLoader = new OBJLoader(); //objLoader.setPath('./steak/' ); objLoader.load( 'a_steak__raw_132.obj', //'https://threejsfundamentals.org/threejs/resources/models/windmill/windmill.obj', (root) => { root.scale.set(5, 5, 5); scene.add(root); }); } function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } function render() { if (resizeRendererToDisplaySize(renderer)) { const canvas = renderer.domElement; camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render); } main(); </script> </body> </html>

ローカルにファイルが存在する状態でchrome, firefoxを開くと以下コードの「//OBJのロード」内objLoader.load()にコメントアウトしている、('https://threejsfundamentals.org/threejs/resources/models/windmill/windmill.obj') (上記の元にしたサイトで使用されていた3dモデルurl)と同じく外部URLのチェック板pngはコメントアウトしていない状態で表示されたのですが、その上にある'a_steak__raw_132.obj'(ローカルにあるファイル)はCORSエラーになってしまい表示されませんでした。('a_steak__raw_132.obj'ファイルはkoma_2.htmlと同じ階層にそのまま配置しています。)

そこでCORSエラーを回避するためにサーバーに挙げて開発者ツールのコンソールを確認したところ以下の画像のようなエラーが出て、
イメージ説明
Failed to load resource: the server responded with a status of 404 ()
は3Dモデルファイルのパスが原因だと考えて、createObjectURLを使用してファイルのURLを生成したのですがFailed to execute 'createObjectURL' on 'URL'のようなエラーが出てしまい、八方ふさがり状態になっております。

どうしたら3Dモデルファイル'a_steak__raw_132.obj'が表示されるようになるのでしょうか。教えていただけましたら幸いです。

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3DCG

コンピュータの演算により、3次元空間の仮想物体を、2次元平面上で表現する手法である。