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

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

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

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

JavaScript

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

3DCG

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

Q&A

解決済

1回答

950閲覧

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

IM1

総合スコア1

Three.js

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

JavaScript

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

3DCG

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

0グッド

0クリップ

投稿2022/10/04 04:10

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

HTML,

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Hello Three.js</title> 6 <style> 7 html, body { margin: 0; height: 100%; } 8 #c { width: 100%; height: 100%; display: block; } 9 </style> 10</head> 11<body> 12 <canvas id="c"></canvas> 13 <script type="module"> 14 import * as THREE from 15 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js'; 16 import {OrbitControls} from 17 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js'; 18 import {OBJLoader} from 19 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/loaders/OBJLoader.js'; 20 21 function main() { 22 const canvas = document.querySelector('#c'); 23 const renderer = new THREE.WebGLRenderer({canvas}); 24 25 //カメラ 26 const fov = 45; 27 const aspect = 2; // the canvas default 28 const near = 0.1; 29 const far = 100; 30 const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); 31 //camera_position_z0=0 32 camera.position.set(0, 10, 20); 33 //camera.position.set(0, 0, 0); 34 35 const controls = new OrbitControls(camera, canvas); 36 controls.target.set(0, 5, 0); 37 controls.update(); 38 39 const scene = new THREE.Scene(); 40 scene.background = new THREE.Color('black'); 41 42 var axis = new THREE.AxisHelper(1000); 43 axis.position.set(0,0,0); 44 scene.add(axis); 45 46 { //チェック板のロード 47 const planeSize = 40; 48 49 const loader = new THREE.TextureLoader(); 50 const texture = loader.load('https://threejsfundamentals.org/threejs/resources/images/checker.png'); 51 texture.wrapS = THREE.RepeatWrapping; 52 texture.wrapT = THREE.RepeatWrapping; 53 texture.magFilter = THREE.NearestFilter; 54 const repeats = planeSize / 2; 55 texture.repeat.set(repeats, repeats); 56 57 const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize); 58 const planeMat = new THREE.MeshPhongMaterial({ 59 map: texture, 60 side: THREE.DoubleSide, 61 }); 62 const mesh = new THREE.Mesh(planeGeo, planeMat); 63 mesh.rotation.x = Math.PI * -.5; 64 scene.add(mesh); 65 } 66 67 { 68 const skyColor = 0xB1E1FF; // light blue 69 const groundColor = 0xB97A20; // brownish orange 70 const intensity = 1; 71 const light = new THREE.HemisphereLight(skyColor, groundColor, intensity); 72 scene.add(light); 73 } 74 75 { //ライト 76 const color = 0xFFFFFF; 77 const intensity = 1; 78 const light = new THREE.DirectionalLight(color, intensity); 79 light.position.set(0, 10, 0); 80 light.target.position.set(-5, 0, 0); 81 scene.add(light); 82 scene.add(light.target); 83 } 84 85 { //OBJのロード 86 const objLoader = new OBJLoader(); 87 //objLoader.setPath('./steak/' ); 88 objLoader.load( 89 'a_steak__raw_132.obj', 90 //'https://threejsfundamentals.org/threejs/resources/models/windmill/windmill.obj', 91 (root) => { 92 root.scale.set(5, 5, 5); 93 scene.add(root); 94 }); 95 } 96 97 function resizeRendererToDisplaySize(renderer) { 98 const canvas = renderer.domElement; 99 const width = canvas.clientWidth; 100 const height = canvas.clientHeight; 101 const needResize = canvas.width !== width || canvas.height !== height; 102 if (needResize) { 103 renderer.setSize(width, height, false); 104 } 105 return needResize; 106 } 107 108 function render() { 109 110 if (resizeRendererToDisplaySize(renderer)) { 111 const canvas = renderer.domElement; 112 camera.aspect = canvas.clientWidth / canvas.clientHeight; 113 camera.updateProjectionMatrix(); 114 } 115 116 renderer.render(scene, camera); 117 118 requestAnimationFrame(render); 119 } 120 121 requestAnimationFrame(render); 122 } 123 124 main(); 125 </script> 126</body> 127</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'が表示されるようになるのでしょうか。教えていただけましたら幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

拡張機能が何もついていないchromeで実行したら上手く表示されました!

投稿2022/10/04 14:42

IM1

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問