three.jsの立方体に、データベースの値を代入した変数を使ってテクスチャを貼りつけたい。

前提・実現したいこと

three.jsの立方体を使って簡単なクイズサイトを作ろうとしています。
立方体の各面に画像を貼りつけて何が張り付けられているのか当てるという感じにしたいのですが、テクスチャの貼りつけがうまくできません。

直にファイルパスを指定した場合は問題ないのですが、今回データベースからランダムな画像を選び出して貼りつけようとしているので、
phpでデータベースから取得した値を変数に入れたものをファイル名として使用すると、テクスチャの貼りつけた面が真っ黒になってしまいます。

javascriptではphpの変数をそのまま使えないという事なので、
wrong1 = <?php echo $wrong1;?>;
というような形で一旦変換しているのですがうんともすんとも言わない感じです。

丸一日色々試したり調べても解決しなかったので、どなたか詳しい方いらっしゃいましたらご教授の程よろしくお願い致します。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

php
1<?php
2include('../setdb/selectTable.php');
3?>
4
5<!DOCTYPE html>
6<html lang="ja">
7<head>
8  <meta charset="UTF-8">
9  <title>ボックスの例</title>
10  <link rel="stylesheet" href="../css/gameScreen.css">
11  <script src="../src/three.min.js"></script>
12  <script src="../js/jquery-3.3.1.min.js"></script>
13  <script src="../src/three.min.js"></script>
14  
15  <script>
16  var wrong1 = "<?php echo $wrong1;?>;";
17  </script>
18  
19  <script type="text/javascript">
20        // ページの読み込みを待つ
21    window.addEventListener('load', init);
22      function init() {
23      //============ 表示サイズを指定 ======================
24      const width = 480;
25      const height = 480;
26      // レンダラーを作成
27      const renderer = new THREE.WebGLRenderer({
28        canvas: document.querySelector('#myCanvas')
29      });
30      renderer.setSize(width, height);
31
32      //============ シーンを作成 ===========================
33      const scene = new THREE.Scene();
34
35      //============ カメラを作成 ===========================
36      const camera = new THREE.PerspectiveCamera(45, width / height);
37      camera.position.set(0, -50, +800);//x,y
38
39    //=============== モデリング　===========================
40      //立方体を作成
41        const geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
42      // 配列の場合で渡す場合、面の数だけ値が必要？
43      //    const geometry = new THREE.BoxGeometry( 200, 200, 200, 1, 1, 1);
44      //cube = new THREE.CubeGeometry(1, 1, 1);
45
46      // 球体を作成
47      //const geometry = new THREE.SphereGeometry(300, 30, 30);
48
49      // 画像を読み込む　テクスチャ1個に対して1回ずつlorderを呼ぶ必要がある　このやり方は問題ない
50      //ここで読み込むデータをデータベースから取得したランダムなものに変える     
51        var loader = new THREE.TextureLoader();
52        var texture1 = loader.load("../imgs/wrong1");
53        var texture2 = loader.load('../imgs/2.jpg');
54        var texture3 = loader.load('../imgs/3.jpg');
55        var texture4 = loader.load('../imgs/4.jpg');
56        var texture5 = loader.load('../imgs/5.jpg');
57        var texture6 = loader.load('../imgs/6.jpg');
58
59      // マテリアルにテクスチャーを設定
60     /*const material = new THREE.MeshStandardMaterial({
61        map: texture1
62      });*/
63
64     const materials =
65      [
66          new THREE.MeshStandardMaterial({ map: texture1}),
67          new THREE.MeshStandardMaterial({ map: texture2}),
68          new THREE.MeshStandardMaterial({ map: texture3}),
69          new THREE.MeshStandardMaterial({ map: texture4}),
70          new THREE.MeshStandardMaterial({ map: texture5}),
71          new THREE.MeshStandardMaterial({ map: texture6}),
72      ] ;
73      // メッシュを作成 　テクスチャにあたる配列をそのまま第二引数に渡せる
74      const mesh = new THREE.Mesh(geometry, materials);
75      // 3D空間にメッシュを追加
76      scene.add(mesh);
77
78    //================ 光源の設定 ===============================
79        // ①平行光源
80        const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
81        directionalLight.position.set(1, 1, 1);
82        // ②環境光源を作成
83        // new THREE.AmbientLight(色, 光の強さ)
84        const light = new THREE.AmbientLight(0xFFFFFF, 1.0);
85
86        // シーンに追加
87        scene.add(directionalLight, light);
88
89
90    //================ 動作 ====================================
91      tick();
92      // 毎フレーム時に実行されるループイベントです
93      function tick() {
94        // レンダリング
95        mesh.rotation.y += 0.01;
96        mesh.rotation.x += 0.02;
97        renderer.render(scene, camera);
98        requestAnimationFrame(tick);
99      }
100    }
101  </script>
102<!--------------------------------------------------------------------------ここまで画面の読み込み----->
103</head>
104
105
106<body>
107
108	<div class="box1">box1</div>
109
110	<div class="boxcenter">
111		<div class="box2">残り問題数</div>
112		<div class="box3">
113		      <canvas id="myCanvas"></canvas>
114		</div>
115		<!--  タイマー  作業中-------------------------------------------------------------------------------------->
116		<div class="box4">
117            <div id="timer">00:00.000</div>
118            <div class="controls">
119            	<button id="min">Min</button>
120            	<button id="min">Sec</button>
121            	<button id="min">Reset</button>
122            	<button id="min">Start</button>
123            	
124       		</div>
125		<!-----------------------------------------------------------------------------------   タイマー  -->
126	</div>
127		<div class="box5">選択肢</div>
128
129</body>
130</html>
131
132
133includeしているファイル
134<?php
135include('../config.php');
136include($config_path.$config_file);
137try{
138	$db = new PDO($database_dsn, $database_user, $database_password);
139	$db->exec("SET NAMES utf8");//->アロー演算子　プロパティやメソッドにアクセスする際に使用
140	$db->setAttribute(PDO::ATTR_CASE, PDO::CASE_LOWER);//全部小文字にするｖ
141	//セレクト文--------問題によってテーブルが異なるのでここだけ分岐させる----------------------------------------------
142	$sql ="SELECT * FROM k1_img ORDER BY RAND() LIMIT 7;";
143	//セレクト文------------------------------------------------------
144	$stmt = $db->query($sql);
145	if ($stmt !== FALSE){
146		//	echo "SELECT文の実行に成功しました"."<br>";
147	}else{
148		echo "SQL ERROR:".$sql;
149	}
150	//	$db = NULL;
151}catch(Exception $e){
152	echo "MSG:".$e->getMessage()."<br>";
153	echo "CODE:".$e->getCode()."<br>";
154	echo "LINE:".$e->getLine()."<br>";
155	$db = NULL;
156}
157// foreach文で配列の中身を一行ずつ出力
158$i=1;
159foreach ($stmt as $row) {
160	// データベースのフィールド名で出力
161	//配列に画像の名前を取り出して入れる
162	$mondai[$i]= $row['imgname'];
163	$i++;
164}
165var_dump($mondai);//後で非表示
166//-------正解と不正解の代入--------------------------
167$wrong1 = $mondai[1];
168$wrong2 = $mondai[2];
169$wrong3 = $mondai[3];
170$wrong4 = $mondai[4];
171$wrong5 = $mondai[5];
172$wrong6 = $mondai[6];
173$right = $mondai[7];
174//=============================================================================
175?>

試したこと

JavaScript内で使用した変数ならファイルパスとして使えることは確認しました。
しかしJavaScript内でphpを記述すると画面そのものが表示されなります。
別のJavaScriptタグ内で書いた変数だと画面は表示されますがテクスチャの面が真っ黒になります。

補足情報（FW/ツールのバージョンなど）

eclipse photon
firefox
Google Chrome
xamp3.2.2
MariaDB

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

回答3件

さらりと「該当のソースコード」をみた限りで、問題のありそうな部分をピックアップです。

** ■　phpの書き出し近辺**

  var wrong1 = "<?php echo $wrong1;?>;";

ダブルコーテーションの中にいる2個目の　;　が、邪魔そうに見えます。

いまだと、

  var wrong1 = "test.png;";

みたいになりますが、問題ないですか？

** ■　javascriptのテクスチャのパス設定のところ**

せっかく用意した変数名が、文字列の一部として書かれています。

var texture1 = loader.load("../imgs/wrong1");

変数をダブルコーテーションの中に書いても、phpのように変数展開する機能はjavascriptにはないので、変数を使いたいなら文字列と連結させないとダメです。

var texture1 = loader.load("../imgs/" + wrong1);

投稿2018/12/20 06:11

mix-peach

総合スコア1910

退会済みユーザー

2018/12/20 07:01

回答ありがとうございます。修正してみたのですが先ほどはサイコロの1面にテクスチャが貼りつけられない状態だったのですが、今度は画面そのものが表示されなくなってしまいました。たぶんご指摘の箇所は正しいかと思うのですが、他の部分にも不具合があるのだと思います。

mix-peach

2018/12/20 07:14

画面が出なくなったなら、phpのところの直し方が違うのかもです。 "<?php echo $wrong1;?>;"; ↓ "<?php echo $wrong1;?>"; 　　　　　　　　　　　　 ↑　>　の後ろの;を削除で合ってますか？

退会済みユーザー

2018/12/20 07:30

var wrong1 = "<?php echo $wrong1; ?>"; になっているので合っているかと思います。

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

あくまでヒント回答です。

データベースにどういう状態で入っているかは知らないですが、
例えばこうなっていたとして

php
1<?php
2$test = "あ";
3?>
4<script>
5var hoge = <?php echo $test ?>;
6<script>

ブラウザのソース上はこう出力されますよね。

html
1<script>
2var hoge = あ;
3<script>

エラーにはなりませんが、右辺の「あ」は「”あ”という名前の変数」になります。

「”あ”という文字列としてJavaScriptに解釈させたい」のであれば、例えばこうします。

php
1<?php
2$test = "あ";
3?>
4<script>
5var hoge = "<?php echo $test ?>";
6<script>

同じような現象起きていませんか？
ブラウザの「ソースを表示｣して確認してみてください。

投稿2018/12/20 05:42

m.ts10806

総合スコア80890

退会済みユーザー

2018/12/20 06:41

早速の回答ありがとうございます。参照しているデータベースのテーブルですが id imgname 1 neko01.jpg 2 neko02.jpg 3 neko03.jpg........... のような感じで30枚程度画像名が入力されています。現在の状態ですが //------------------エディタの記述------------------------------ <script> let wrong1 = "<?php echo $wrong1 ?>"; console.log(wrong1); </script> //------------------ブラウザのソース--------------------------- <script> let wrong1 = "neko10.jpg ";　←なぜか改行 console.log(wrong1); </script> こんな感じになっていてなぜか改行されています。ブラウザでのエラー表記は SyntaxError: "" string literal contains an unescaped line break となっていて、謎の改行が何か影響していそうな気はするのですがよく分からない状態です。 phpからincludeして取得しているのは配列をばらして代入した変数で、改行やスペースなどは含まれていません。また、この変数の代入の後にconsole.log()やalert()を記述しても表示されません。もし何かお気づきの点がございましたら、再度ご指摘の程よろしくお願い致します。

m.ts10806

2018/12/20 06:50

改行部分はこれだけでは何とも言えません。データベース内に改行コード込みで入ってたりするのではないでしょうか。ひとまず「ブラウザ（JavaScript）が解釈できるような文字列に出力」という基本は変わらないので。

m.ts10806

2018/12/20 06:59

ひとまず、includeされているPHPにechoなりvar_dump()なり画面出力のコマンドが散見されますし、この部分があるとうまくいくものもうまくいかなくなる可能性もあるので、想定の情報があることが確認できたら早めにコメントアウトなり削除なりしておくことを強くすすめます。

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

ベストアンサー

皆さまから得た情報をまとめます。
phpの変数をJavaScriptで使用する方法。

①JavaScript用の変数にphpで呼び出した変数を文字列として代入。

var js用変数名= "<?php echo php変数名; ?>";

②今回はファイル名をパスの一部として使いたかったのでパスの部分と結合させる。

var texture1 = loader.load("../imgs/" + wrong1);
※JavaScriptの場合は文字列の結合に+を使用する。

③ソースをみると謎の改行、ブラウザ表示の変数と変数の間にも謎のスペース問題

データベースに読み込むCSVファイルの文字コードが「SJISとCR+LF」になっていたのが問題だった。
一度該当テーブルの中身を全削除し、
同じcsvファイルを開き、文字コードを「UTF-8NとLF」上書き保存。
再度csv ファイルからテーブルにデータを入れるとペースや改行が消え、無事画像データが読み込まれました。

今回はteratailでmix-peachさんmts10806さにお手伝い頂いたのと、周囲の友人と先生方の協力も得て無事解決出来ました。
皆さん本当にありがとうございました！

投稿2018/12/20 08:07

編集2018/12/23 17:14

退会済みユーザー

総合スコア0