Currently in the process of developing a 3D viewer for game pads with the aim of customizing the pad using various colors and materials.
Initially, I created a simple ".bin .js" loader with sample materials using Threejs r62 to create a visualizer prototype. It worked well. However, for IE compatibility, I decided to utilize IEWEBGL to make it more accessible. Though it also worked, there was an issue...
The Problem:
After implementing the plugin, both IE and other browsers like Firefox and Chrome displayed a strange anomaly: the UV texture placement on the object model became incorrect compared to the original version of the code without modifications from IEWEBGL.
The Question:
I am wondering why the image gets vertically flipped when using IEWEBGL. Can anyone provide insights into this issue?
Here is the 3D viewer without IEWEBGL: Without IEWEBGL helper
And with IEWEBGL: With IEWEBGL
The code snippet is available below the post. Feel free to let me know if my query lacks clarity or needs rephrasing. Thank you in advance, hoping for some helpful tips from threejs or iewebgl experts.
Ju
NOTES :
This is a sample code snippet extracted from my page:
<script>
// MAIN
// standard global variables
var container, scene, camera, renderer, controls, stats;
// Vars
init();
animate();
// FUNCTIONS
function init() {
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var scale = 100;
var VIEW_ANGLE = 65, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,0,4);
...
function animate() {
requestAnimationFrame( animate );
render();
update();
}
function render() {
renderer.render( scene, camera );
}
</script>
Below is the modified code for IEWEBGL:
<script>
...
// Code specific for rendering in IEWEBGL environment goes here
...
</script>