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

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

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

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

JavaScript

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

Q&A

1回答

906閲覧

three.jsでdaeファイルを読み込みたい

sgc_o_

総合スコア15

Three.js

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

JavaScript

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

0グッド

0クリップ

投稿2020/04/22 20:01

js勉強中で、3dオブジェクトをウェブ上に載せたいと考えています。
こちらの、
このコードを参考に
製作しているのですが、オブジェクトが出ません。読み込んでも真っ暗です。
原因を教えて頂きたいです、、、
daeファイルは、48MBぐらいです、c4dで書き出しました。COLLADA1.4です。

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="css/style.css"> 6 <script src="js/three.min.js"></script> 7 <script src="js/OrbitControls.js"></script> 8 <script src="js/ColladaLoader.js"></script> 9 <script src="js/index.js"></script> 10</head> 11<body> 12 <canvas id="myCanvas"></canvas> 13</body></html>

javascript

1window.addEventListener(`load`, init); 2 3function init() 4{ 5 const width = 960; 6 const height = 540; 7 8 // レンダラーを作成 9 const renderer = new THREE.WebGLRenderer({ 10 canvas: document.querySelector('#myCanvas') 11 }); 12 renderer.setPixelRatio(window.devicePixelRatio); 13 renderer.setSize(width, height); 14 15 // シーンを作成 16 const scene = new THREE.Scene(); 17 18 // カメラを作成 19 const camera = new THREE.PerspectiveCamera( 20 45, 21 width / height, 22 1, 23 10000 24 ); 25 //カメラの初期座標 26 camera.position.set(0, 10, +10); 27 28 //カメラコントローラーを作成 29 const controls = new THREE.OrbitControls(camera); 30 controls.target.set(0, 3, 0); 31 controls.update(); 32 33 // 平行光源 34 const light = new THREE.DirectionalLight(0xffffff); 35 light.intensity = 2; // 光の強さを倍に 36 light.position.set(1, 1, 1); 37 // シーンに追加 38 scene.add(light); 39 //環境光を追加 40 const ambientLight = new THREE.ambientLight(0x333333); 41 scene.add(ambientLight); 42 43 // 3DS形式のモデルデータを読み込む 44 const loader = new THREE.ColladaLoader(); 45 // 3dsファイルのパスを指定 46 loader.load('obj/SDS.dae', (collada) => 47 { 48 // 読み込み後に3D空間に追加 49 const model = collada.scene; 50 scene.add(model); 51 }); 52 53 54 // 初回実行 55 tick(); 56 57 function tick() 58 { 59 // レンダリング 60 renderer.render(scene, camera); 61 requestAnimationFrame(tick); 62 } 63}

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

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

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

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

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

guest

回答1

0

daeファイルは、48MBぐらいです、c4dで書き出しました。COLLADA1.4です。

daeファイルを扱ったことがないので、わかりませんが。ファイルサイズが大きすぎるように見受けられます。
もう少し小さいファイルサイズで一度お試しください。

投稿2020/04/22 20:52

kyoya0819

総合スコア10429

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問