前提・実現したいこと
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
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/12/20 07:01
2018/12/20 07:14
退会済みユーザー
2018/12/20 07:30