In my ThreeJS/WebGL project, I have created a rotating planet displayed inside an iframe. While the functionality is working as intended, I am encountering a warning and an error:
Warning: THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter.
Error: Uncaught Error: THREE.Quaternion: .setFromEuler() now expects a Euler rotation rather than a Vector3 and order.
Within the iframe, I have included the necessary assets:
<div id="webgl"></div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bubblin/The-Solar-System/master/jupiter/js/detector.js">
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/bubblin/The-Solar-System/master/jupiter/js/trackBallControls.js"> </script>
<script type="text/javascript" src="https://cdn.rawgit.com/bubblin/The-Solar-System/master/jupiter/js/xRingGeometry.js"> </script>
For interactivity, I have implemented trackBallControls.js to allow users to rotate the sphere based on input. Additionally, I have made modifications to the RingGeometry method to customize the appearance of the ring around the planet.
Below is the complete code example showcasing the simulation of Jupiter:
(function() {
// Code for rendering Jupiter simulation
}());
While the simulation functions correctly (view output here), the warnings and errors persist and lead to eventual crashes on iPad/iPhone devices. As a newcomer to ThreeJS, I seek guidance on resolving these issues.