未定義のプロパティ 'rotation'を読み取ることができません - Three.js

コードは実行していることを実行していますが、コンソールで2つのエラーが発生しています： "未定義のプロパティ 'rotation'を読み取れません。 2つの変数がグローバル変数として定義されているので、なぜそれがエラーを投げているのかについて混乱しています。何か不足していますか？（ImageUtils.loadTexture（）は廃止されて以来、TextureLoader（）を使用しています）。未定義のプロパティ 'rotation'を読み取ることができません - Three.js

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Three.js</title> 
    <style> 
     body{ 
      margin: 0; 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.js"></script> 
    <script src="js/OrbitControls.js"></script> 
    <script> 

     //GLOBAL VARIABLES 
     var scene, camera, renderer, cameraControl, earthMesh, cloudMesh; 

     function init(){ 

      //scene 
      scene = new THREE.Scene(); 

      //renderer 
      renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      renderer.setClearColor('#000', 1.0); 
      renderer.shadowMap.enabled = true; 

      //camera 
      camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
      camera.position.x = 35; 
      camera.position.y = 36; 
      camera.position.z = 33; 
      camera.lookAt(scene.position); 

      //earth mesh 
      var sphereGeometry = new THREE.SphereGeometry(10, 60, 60); 
      var sphereMaterial; 
      var sphereMaterialLoader = new THREE.TextureLoader(); 
      sphereMaterialLoader.load(
       'images/earth.jpg', 
       function(earthImage){ 
        sphereMaterial = new THREE.MeshBasicMaterial({ 
         map: earthImage 
        }); 
        earthMesh = new THREE.Mesh(sphereGeometry, sphereMaterial); 
        earthMesh.name = 'earth'; 
        scene.add(earthMesh); 
        render(); 
       } 
      ); 

      //cloud mesh 
      var cloudGeometry = new THREE.SphereGeometry(sphereGeometry.parameters.radius * 1.02, 
       sphereGeometry.parameters.widthSegments, sphereGeometry.parameters.heightSegments); 
      var cloudMaterial; 
      var cloudMaterialLoader = new THREE.TextureLoader(); 
      cloudMaterialLoader.load(
       'images/clouds.png', 
       function(cloudImage){ 
        cloudMaterial = new THREE.MeshBasicMaterial({ 
         map: cloudImage 
        }); 
        cloudMaterial.transparent = true; 
        cloudMesh = new THREE.Mesh(cloudGeometry, cloudMaterial); 
        cloudMesh.name = 'cloud'; 
        scene.add(cloudMesh); 
        render(); 
       } 
      ); 

      //camera control 
      cameraControl = new THREE.OrbitControls(camera); 

      document.body.appendChild(renderer.domElement); 
      render(); 
     } 

     function render(){ 
      renderer.render(scene, camera); 
      earthMesh.rotation.y += -0.001; 
      cloudMesh.rotation.y += 0.0005; 
      cameraControl.update(); 
      requestAnimationFrame(render); 
     } 

     //initialize scene/render 
     window.onload = init; 

    </script> 
</body> 
</html>

出典

2016-08-31 Safal Pillai

earthMeshがあなたのcloudMaterialLoader.load（）関数で非同期に初期化されているように見えます - それは、その場合にはあなたが最初の呼び出しは、（レンダリングするときのように注意する必要があります）earthMeshは、まだロードされない場合がありますまだ定義されていません。

earthMeshがロードされるまでrender（）を呼び出したり、earthMeshがrender（）呼び出しでロードされているかどうか、またはあなたの想像力を上回っているかどうかをチェックしたりすることはいくつかあります。

出典

2016-08-31 06:07:58 khazhyk

レンダー機能を初めて呼び出す前にすべてのテクスチャがロードされているかどうかを確認する方法はありますか？ –

未定義のプロパティ 'rotation'を読み取ることができません - Three.js

答えて

関連する問題