Ошибка «Объект не определен» при попытке повернуть объект в three.js
В этой статье мы увидим «Uncaught TypeError: невозможно прочитать свойства undefined (чтение «поворот») при анимации». Это ошибка типа для переменной . В Three .js эта ошибка возникает, когда переменная объявлена, но значение не присвоено или значение не определено. Мы можем наблюдать по ошибке, сообщение о том, что эта ошибка произошла, когда переменная была вызвана для изменения поворота, чтобы анимировать .
Переменная здесь является экземпляром THREE.Object3D .
Пример: В этом примере создается показанная выше ошибка, т.е. «Uncaught TypeError: Не удается прочитать свойства неопределенного (чтение «поворот») при анимации».
Это код three.js, который создает конус с вращением по осям x и y . Здесь имя переменной 'cone' было объявлено , но не присвоено 3D-объекту . Из-за этого, когда мы пытаемся получить доступ к ключу поворота переменной, он не может его прочитать, следовательно, показывает ошибку.
HTML
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> Solving errors with geeksforgeeks in three.js </title> <script src="three.js"></script></head> <body> <script> // Adding scene and camera const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000); // Adding rendering const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Creating a cone geometry, and material. const geometry = new THREE.ConeGeometry(); const material = new THREE.MeshBasicMaterial({ color: "purple" }); // Declaring Variable let cone; // Adding cone to the scene. scene.add(cone); camera.position.z = 7; // Writing an animate() function. function animate() { requestAnimationFrame(animate); // Cone not assigned, with a // 3D object but still trying // to rotate an, undefined object. cone.rotation.x += 0.01; cone.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); </script></body> </html> |
Выход:
Чтобы решить эту ошибку, нам нужно создать сетку, которая объединяет геометрию и материал, объявленные ранее. Функция Mesh назначается переменной 'cone' , поэтому ошибка удаляется. Присвоенное значение: «новый THREE.Mesh (геометрия, материал)».
Пример: приведенный ниже пример устраняет ошибку, присваивая значение 'cone' .
HTML
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> Solving errors with geeksforgeeks in three.js </title> <script src="three.js"></script></head> <body> <script> // Adding scene and camera const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000); // Adding rendering const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Creating a cone geometry, and material. const geometry = new THREE.ConeGeometry(); const material = new THREE.MeshBasicMaterial({ color: "purple" }); // Declaring variable and assigning its value const cone = new THREE.Mesh(geometry, material); // Adding cone to the scene. scene.add(cone); camera.position.z = 7; // Writing an animate() function. function animate() { requestAnimationFrame(animate); // Adding rotations, in x and y direction, // in the cone. cone.rotation.x += 0.01; cone.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); </script></body> </html> |
Выход: