エラーがないはずなのに、画面が真っ白になります。

前提・実現したいこと

three.jsを使って動く街のアニメーションを作ろうとしています。
現在、決まった時間にバスを見立てたモデルをアニメーションさせようとしています。
自分なりに作ってみたのですが、ブラウザの画面には何も表示さず、白いままになってしまいます。

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

console
1エラーメッセージはありません。

該当のソースコード※要点のみ掲載

    <script>
      // ページの読み込みを待つ
     // window.addEventListener('load', init);

     /* function init() {
        // サイズを指定
        const width = 960;
        const height = 540;

        const canvasElement = document.querySelector('#myCanvas');
        // レンダラーを作成
        const renderer = new THREE.WebGLRenderer({
          canvas: canvasElement,
        });
        renderer.setSize(width, height);

        // シーンを作成
        const scene = new THREE.Scene();

        // カメラを作成
        const camera = new THREE.PerspectiveCamera(45, width / height);
        // カメラの初期座標を設定
        camera.position.set(-160, 80, 600);

        // カメラコントローラーを作成
        const controls = new THREE.OrbitControls(camera, canvasElement);

        // 滑らかにカメラコントローラーを制御する
        controls.enableDamping = true;
        controls.dampingFactor = 0.2;

        // 平行光源を作成
        const directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);
     
        
        //いじった。
        // 地面を作成
        const floor1 = new THREE.GridHelper(3000,10000);
        scene.add(floor1);
        //const floor2 = new THREE.AxesHelper(300);
        //scene.add(floor2);

        const group = new THREE.Group();
        scene.add(group);
        //ここまで
        
        const loader = new THREE.TextureLoader();
        
        const materials = [
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('http://tetsudo-japan.main.jp/usertest/railway-livecamera/3350BE92-7229-42B6-B8AF-B6C39B95B6E4.png')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/C07BEB10-4D27-4A55-AA76-F1323F7F27C1.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/C07BEB10-4D27-4A55-AA76-F1323F7F27C1.gif')}),
];
        // 形状とマテリアルからメッシュを作成します
        const mesh = new THREE.Mesh(new THREE.BoxGeometry(60, 60, 1200),materials);
// new THREE.MeshNormalMaterial(), これが第二引数として存在していた。
mesh.position.set(0, 0, -2700);
mesh.position.y = 60/2; // 位置を調整

        scene.add(mesh);
        
        var ZZ = 0.000000000000000000001;

        tick();

        // 毎フレーム時に実行されるループイベントです
        function tick() {
          //mesh.rotation.y += 0.01;
          
          ZZ++
          mesh.translateZ(5.5);
          mesh.translateX(0);

          // カメラコントローラーを更新
          controls.update();

          // レンダリング
          renderer.render(scene, camera);

          requestAnimationFrame(tick);
        }
      }*/
    </script>
<script>
function goToPage02(){
//まずは現在の時刻を得る
var now = new Date();
var hour = now.getHours(); //時
var min = now.getMinutes();//分

//もし21時 45分なら 指定ページへ飛ぶ
if( hour==20 && min==45){
      function init() {
        // サイズを指定
        const width = 960;
        const height = 540;

        const canvasElement = document.querySelector('#myCanvas');
        // レンダラーを作成
        const renderer = new THREE.WebGLRenderer({
          canvas: canvasElement,
        });
        renderer.setSize(width, height);

        // シーンを作成
        const scene = new THREE.Scene();

        // カメラを作成
        const camera = new THREE.PerspectiveCamera(45, width / height);
        // カメラの初期座標を設定
        camera.position.set(-160, 80, 600);

        // カメラコントローラーを作成
        const controls = new THREE.OrbitControls(camera, canvasElement);

        // 滑らかにカメラコントローラーを制御する
        controls.enableDamping = true;
        controls.dampingFactor = 0.2;

        // 平行光源を作成
        const directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);
     
        
        //いじった。
        // 地面を作成
        const floor1 = new THREE.GridHelper(3000,10000);
        scene.add(floor1);
        //const floor2 = new THREE.AxesHelper(300);
        //scene.add(floor2);

        const group = new THREE.Group();
        scene.add(group);
        //ここまで
        
        const loader = new THREE.TextureLoader();
        
        const materials = [
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('http://tetsudo-japan.main.jp/usertest/railway-livecamera/3350BE92-7229-42B6-B8AF-B6C39B95B6E4.png')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/C07BEB10-4D27-4A55-AA76-F1323F7F27C1.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/C07BEB10-4D27-4A55-AA76-F1323F7F27C1.gif')}),
];
        // 形状とマテリアルからメッシュを作成します
        const mesh = new THREE.Mesh(new THREE.BoxGeometry(60, 60, 1200),materials);
// new THREE.MeshNormalMaterial(), これが第二引数として存在していた。
mesh.position.set(0, 0, -2700);
mesh.position.y = 60/2; // 位置を調整

        scene.add(mesh);
        
        var ZZ = 0.000000000000000000001;

        tick();

        // 毎フレーム時に実行されるループイベントです
        function tick() {
          //mesh.rotation.y += 0.01;
          
          ZZ++
          mesh.translateZ(5.5);
          mesh.translateX(0);

          // カメラコントローラーを更新
          controls.update();

          // レンダリング
          renderer.render(scene, camera);

          requestAnimationFrame(tick);
        }
}
}else{
//それ以外であれば、1分後に再度確認する。
//(またはあと何分で20時45分になるか算出して、そのミリ秒後にsetTimeout()すればなお良し)
      function init() {
        // サイズを指定
        const width = 960;
        const height = 540;

        const canvasElement = document.querySelector('#myCanvas');
        // レンダラーを作成
        const renderer = new THREE.WebGLRenderer({
          canvas: canvasElement,
        });
        renderer.setSize(width, height);

        // シーンを作成
        const scene = new THREE.Scene();

        // カメラを作成
        const camera = new THREE.PerspectiveCamera(45, width / height);
        // カメラの初期座標を設定
        camera.position.set(-160, 80, 600);

        // カメラコントローラーを作成
        const controls = new THREE.OrbitControls(camera, canvasElement);

        // 滑らかにカメラコントローラーを制御する
        controls.enableDamping = true;
        controls.dampingFactor = 0.2;

        // 平行光源を作成
        const directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);
     
        
        //いじった。
        // 地面を作成
        const floor1 = new THREE.GridHelper(3000,10000);
        scene.add(floor1);
        //const floor2 = new THREE.AxesHelper(300);
        //scene.add(floor2);

        const group = new THREE.Group();
        scene.add(group);
        //ここまで
        
        /*const loader = new THREE.TextureLoader();
        
        const materials = [
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('http://tetsudo-japan.main.jp/usertest/railway-livecamera/3350BE92-7229-42B6-B8AF-B6C39B95B6E4.png')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/C07BEB10-4D27-4A55-AA76-F1323F7F27C1.gif')}), 
new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/C07BEB10-4D27-4A55-AA76-F1323F7F27C1.gif')}),
];
        // 形状とマテリアルからメッシュを作成します
        const mesh = new THREE.Mesh(new THREE.BoxGeometry(60, 60, 1200),materials);
// new THREE.MeshNormalMaterial(), これが第二引数として存在していた。
mesh.position.set(0, 0, -2700);
mesh.position.y = 60/2; */ // 位置を調整

        scene.add(mesh);
        
        var ZZ = 0.000000000000000000001;

        tick();

        // 毎フレーム時に実行されるループイベントです
        function tick() {
          //mesh.rotation.y += 0.01;
          
          ZZ++
          //mesh.translateZ(5.5);
          //mesh.translateX(0);

          // カメラコントローラーを更新
          controls.update();

          // レンダリング
          renderer.render(scene, camera);

          requestAnimationFrame(tick);
        }
setTimeout("goToPage02()", 60000);
}
}
goToPage02();
}
</script>
 <canvas id="myCanvas"></canvas>

試したこと

初めにあったコンソールのエラーを全て解消させました。
全く手がつけられない状況に陥っています。
質問内容に不備があれば教えてください。訂正させていただきます。
どうぞよろしくお願いします。

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

回答1件

ベストアンサー

関数goToPage02や関数initを呼び出していないのが原因ではないでしょうか。

投稿2021/09/06 03:52

Lhankor_Mhy

総合スコア36163

byayo907

2021/09/06 07:38

スクリプトの部分を以下のように変えてみたのですが、まだ動きません。どうしてなのでしょうか… goToPage02とinitは呼び出したはずなのですが。 <script> function goToPage02(){ //まずは現在の時刻を得る var now = new Date(); var hour = now.getHours(); //時 var min = now.getMinutes();//分 //もし21時 45分なら指定ページへ飛ぶ if( hour==16 && min==35){ function init() { // サイズを指定 const width = 960; const height = 540; const canvasElement = document.querySelector('#myCanvas'); // レンダラーを作成 const renderer = new THREE.WebGLRenderer({ canvas: canvasElement, }); renderer.setSize(width, height); // シーンを作成 const scene = new THREE.Scene(); // カメラを作成 const camera = new THREE.PerspectiveCamera(45, width / height); // カメラの初期座標を設定 camera.position.set(-160, 80, 600); // カメラコントローラーを作成 const controls = new THREE.OrbitControls(camera, canvasElement); // 滑らかにカメラコントローラーを制御する controls.enableDamping = true; controls.dampingFactor = 0.2; // 平行光源を作成 const directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); //いじった。 // 地面を作成 const floor1 = new THREE.GridHelper(3000,10000); scene.add(floor1); //const floor2 = new THREE.AxesHelper(300); //scene.add(floor2); const group = new THREE.Group(); scene.add(group); //ここまで const loader = new THREE.TextureLoader(); const materials = [ new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), new THREE.MeshBasicMaterial({map: loader.load('http://tetsudo-japan.main.jp/usertest/railway-livecamera/3350BE92-7229-42B6-B8AF-B6C39B95B6E4.png')}), new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/C07BEB10-4D27-4A55-AA76-F1323F7F27C1.gif')}), new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/C07BEB10-4D27-4A55-AA76-F1323F7F27C1.gif')}), ]; // 形状とマテリアルからメッシュを作成します const mesh = new THREE.Mesh(new THREE.BoxGeometry(60, 60, 1200),materials); // new THREE.MeshNormalMaterial(), これが第二引数として存在していた。 mesh.position.set(0, 0, -2700); mesh.position.y = 60/2; // 位置を調整 scene.add(mesh); var ZZ = 0.000000000000000000001; tick(); // 毎フレーム時に実行されるループイベントです function tick() { //mesh.rotation.y += 0.01; ZZ++ mesh.translateZ(5.5); mesh.translateX(0); // カメラコントローラーを更新 controls.update(); // レンダリング renderer.render(scene, camera); requestAnimationFrame(tick); } } init(); }else{ //それ以外であれば、1分後に再度確認する。 //(またはあと何分で20時45分になるか算出して、そのミリ秒後にsetTimeout()すればなお良し) function init() { // サイズを指定 const width = 960; const height = 540; const canvasElement = document.querySelector('#myCanvas'); // レンダラーを作成 const renderer = new THREE.WebGLRenderer({ canvas: canvasElement, }); renderer.setSize(width, height); // シーンを作成 const scene = new THREE.Scene(); // カメラを作成 const camera = new THREE.PerspectiveCamera(45, width / height); // カメラの初期座標を設定 camera.position.set(-160, 80, 600); // カメラコントローラーを作成 const controls = new THREE.OrbitControls(camera, canvasElement); // 滑らかにカメラコントローラーを制御する controls.enableDamping = true; controls.dampingFactor = 0.2; // 平行光源を作成 const directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); //いじった。 // 地面を作成 const floor1 = new THREE.GridHelper(3000,10000); scene.add(floor1); //const floor2 = new THREE.AxesHelper(300); //scene.add(floor2); const group = new THREE.Group(); scene.add(group); //ここまで /*const loader = new THREE.TextureLoader(); const materials = [ new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), new THREE.MeshBasicMaterial({map: loader.load('http://tetsudo-japan.main.jp/usertest/railway-livecamera/3350BE92-7229-42B6-B8AF-B6C39B95B6E4.png')}), new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/94F3ABDD-EA91-41CF-A40B-B875DE3883D7.gif')}), new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/C07BEB10-4D27-4A55-AA76-F1323F7F27C1.gif')}), new THREE.MeshBasicMaterial({map: loader.load('https://tetsudo-japan.main.jp/usertest/railway-livecamera/C07BEB10-4D27-4A55-AA76-F1323F7F27C1.gif')}), ]; // 形状とマテリアルからメッシュを作成します const mesh = new THREE.Mesh(new THREE.BoxGeometry(60, 60, 1200),materials); // new THREE.MeshNormalMaterial(), これが第二引数として存在していた。 mesh.position.set(0, 0, -2700); mesh.position.y = 60/2; */ // 位置を調整 scene.add(mesh); var ZZ = 0.000000000000000000001; tick(); // 毎フレーム時に実行されるループイベントです function tick() { //mesh.rotation.y += 0.01; ZZ++ //mesh.translateZ(5.5); //mesh.translateX(0); // カメラコントローラーを更新 controls.update(); // レンダリング renderer.render(scene, camera); requestAnimationFrame(tick); } setTimeout("goToPage02()", 60000); init(); } } } goToPage02(); </script>