Differences

This shows you the differences between two versions of the page.

--- devwiki:three_js [2022/07/04 14:02] – [Three.js Problem and Solution] ying
+++ devwiki:three_js [2022/07/17 11:49] (current) – [Browse Support] ying
@@ Line 28: / Line 28: @@
       * https://1stwebdesigner.com/examples-of-three-js-in-action/
+====== Browse Support ======
+  * some feature using WebGL 2.0 and some old browser or some mobile browser may not support it,
+  * you can use code to detect webgl2 support and dynamic change the way of coding to support other browser
+    * webgl2 support browser tabel: https://caniuse.com/webgl2
+  * check webgl2 support <code javascript>
+// check webgl2 support for multi sample version
+const gl = document.createElement('canvas').getContext('webgl2');
+if (!gl) {
+  alert('your browser/OS/drivers do not support WebGL2');
+  console.log('your browser/OS/drivers do not support WebGL2');
+} else {
+  console.log('webgl2 works!');
+}
+</code>
 ====== Tools ======
@@ Line 380: / Line 396: @@
 // 5. support functions for call from other event
 function video_start(){
-    sound.pause();
+    //bgm_sound.pause(); // option to mute bgm sound if you have any
     video.currentTime = 0;
     video.play();
 }
 function video_stop(){
-    sound.play();
+    //bgm_sound.play(); // option to on bgm sound if you have any
     video.pause();
     video.currentTime = 0;
+}
+</code>
+  * language based texture switch <code javascript>
+// method 1: (works in firefox, not in chrome)
+if(child.name == "lang_texture_geo") ){
+    lang_texture_geo = child
+    if(main_lang=="cn"){
+        lang_texture_geo.material.map.image.src = "./img/cn_texture.jpg";
+    }
+}
+// method 2: (works in both firefox and chrome)
+const main_texLoader = new THREE.TextureLoader(load_manager)
+const cn_text_ctex = main_texLoader.load("./img/cn_texture.jpg");
+cn_text_ctex.flipY = false;
+if(child.name == "lang_texture_geo") ){
+    lang_texture_geo = child
+    if(main_lang == "cn"){
+        child.material.map = cn_text_ctex;
+    }
 }
 </code>