three.jsでの３Ｄモデルの「色」の読み込みはできますか？

three.jsを使用し、３Ｄモデルを読み込んで表示・動作はちゃんとできているのですが、
３Ｄソフトで設定した色をそのまま引き継ぐ事ができません。
色をそのまま引き継ぐ方法はありますでしょうか？
そもそも引き継ぐ事は不可能でしょうか？(プログラミングでマテリアルを作成していくしかないのでしょうか？)
どなたかご教授下さい。よろしくお願い致します。
・３Ｄモデルの形式は、３つ試しましたが、どれも引き継げませんでした(「.dae」「.stl」「.objと.mtl」)
・３Ｄソフトは、solidworksとblenderで試しました。
・「.objと.mtl」を読み込んだ場合のhtmlを、一応下に記載させて頂きます。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    
    <title>題名</title>
    
    <!-- three.jsを使用できるようにするためのライブラリ読み込み -->  
    <script src="./three/three.js"></script>

    <!-- ３Ｄをマウスでくるくる回せるようにするライブラリ読み込み -->
    <script src="./three/OrbitControls.js"></script>
   
    <!-- objファイルを読みこめるようにするライブラリ読み込み -->
    <script src="./three/OBJLoader.js"></script>
    
    <!-- mtlファイルを読みこめるようにするライブラリ読み込み -->
    <script src="./three/MTLLoader.js"></script>
    

	<script>
		
	
    	//ページの読み込みを待ってから、init関数を実行
    	window.addEventListener('load', init);
		
    	function init() {

      		// サイズを指定
      		const width = 400;
      		const height = 540;

      		// レンダラーを作成
      		const renderer = new THREE.WebGLRenderer({
        	canvas: document.querySelector('#myCanvas')
      		});
			renderer.setClearColor(0xeeeeee);　　
      		renderer.setPixelRatio(window.devicePixelRatio);
      		renderer.setSize(width, height);
	  
      		// シーンを作成
      		const scene = new THREE.Scene();

      		// カメラを作成
      		const camera = new THREE.PerspectiveCamera(45, width / height);
      		camera.position.set(0, 0, +300);　　
			
			// 平行光源を作成
        	const directionalLight = new THREE.DirectionalLight(0xffffff);　
        	directionalLight.position.set(1, 1, 1); 
        	scene.add(directionalLight); 
			
		
			
	  		//objとmtlファイルの読み込み、メッシュ作成
	  		const mtlLoader = new THREE.MTLLoader();
			mtlLoader.load('./test.mtl', function(materials){
  				materials.preload();
  				const objLoader = new THREE.OBJLoader();
  				objLoader.setMaterials(materials);
  				objLoader.load('./test.obj', function(object){
    				const mesh = object;
    				scene.add(mesh);
  				});
			});
			
	  	  
	  		//３Ｄをマウスでくるくる回せるようにする処理
	  		controls = new THREE.OrbitControls(camera);
	  		render();
	  		function render() {
      			requestAnimationFrame(render);
      			controls.update(); 
      			renderer.render(scene, camera);
      		} 

    	}	
	

	</script>

</head>
<body>
     <canvas id="myCanvas"></canvas>
</body>
</html>

m.ts10806

2020/10/05 00:39

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

AkitoshiManabe

2020/10/05 20:45 編集

確認できていないのでこちらで。WebGLはOpenGLのサブセットになります。シェーダー周辺は全て自前で用意する必要があったり、ネイティブ環境で動く最新のOpenGLでできることができなかったりします。前者（シェーダー）について言及すると、3dライブラリには、よく使われる表現はすぐに使えるようにシェーダー言語として実装されています（WebGL APIを介してのバッファ転送時に JavaScript <=> Shader言語間の変数を固定する役割もあります）。色を引き継ぐとなると、シェーダー付近の深いところも探ってみるのが良いのかもしれません（表現したい内容によっては引き継ぎが不可能なものもありそうですが、なんとも言えません）。

AkiKoi

2020/10/05 23:51

貴重な情報ありがとうございます。他の方とはまた違うアプローチになりますが、どちらも一筋縄ではいかなそうですね。上記を参考に色々調べてみます。

行動規範の内容に同意します

回答1件

ベストアンサー

色をそのまま引き継ぐ方法はありますでしょうか？

そのような時はオブジェクトに対してクラスを作成しておきます
JavaScriptのクラス（class）を理解する

処理を行わせたい時にはそのクラスを渡せばプロパティから設定するように設計しておいて
必要な場合はクラスをコピーすれば良いわけです。

カメラ位置もクラス対応にしとけば視点切り替えとかできるでしょ？

なれるまで時間がかかるかもしれませんが
情報や処理が一塊になるので今後の作業が判りやすくなります。

投稿2020/10/05 02:29

kuma_kuma_

総合スコア2506

AkiKoi

2020/10/05 14:57

貴重な情報ありがとうございます。classは一応ですが一通り勉強しました。３Ｄソフトにて表示される色をそのまま取り込むのと、classを使用するのといまいち結びつかないのですが、部分的にでもよいのでコードを記載して頂けたら助かります。

kuma_kuma_

2020/10/05 15:31

今回three.js使っているでしょ？本来の3Dソフトならオブジェクトという数個の塊を作ってそこにモーションとかかけていくわけだけど「three.js」とかにはそこまでの機能が無いんですよ。でオブジェクトの変わりになるのがJSのクラスというわけクラス勉強されたらクラスごとにプロパティ設定やメゾットの内蔵とかわかるでしょ？発想的に「質問者様は描写した内容」をコピーしたい。でも「three.js」にはその機能がない。 (3D描写自身の処理について講義しだすときりないから勘弁ね) そうしたら自分でオブジェクト機能作るしかないよ？という話。

kuma_kuma_

2020/10/05 15:48 編集

簡単に言うと今 objとmtlファイルの読み込み、メッシュ作成で形と色の情報を取得してるでしょ？それをクラスのプロパティで格納しておく。いまファイル状態でデータ取得しているけどプログラムで位置情報や色を設定できることは知っているでしょ？その情報をクラスで持っておきましょう。そうすればクラスの複製で色情報や形も引き継げるでしょ？あとOBJ、mtl形式がテキスト形式で書かれている事は知ってるよね？そうしたら結果クラス化してテキスト分析すれば目的の色の取得はできるよというだけです。

kuma_kuma_

2020/10/05 18:38 編集

ここまで書いてなんだけど > ３Ｄソフトで設定した色をそのまま引き継ぐ事これってまさか光源とかの話じゃないよね？(物体が暗く表示されるとか...)

AkiKoi

2020/10/05 23:45

光源とかの話ではないです。classを使って色を引き継ぐ機能を自分で作るというわけですね。かなりハードル高そうですが、勉強してみます。

行動規範の内容に同意します