Differences

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

--- devwiki:three_js [2022/06/13 20:38] – [Common Code] ying
+++ devwiki:three_js [2022/07/15 01:00] – [Quick Start] ying
@@ Line 27: / Line 27: @@
     * wave:
       * 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
 ====== Tools ======
@@ Line 329: / Line 336: @@
 child.material.map.inFilter = THREE.NearestFilter
 child.material.map.generateMipmaps = false
+</code>
+  * make object ignore camera frustum culling, so that when camera move closer, object won't disappear <code javascript>
+if(child.name.startsWith("sch_word_")){
+    child.frustumCulled = false
+}
+</code>
+  * video as texture <code javascript>
+// ref: https://stemkoski.github.io/Three.js/
+// https://threejs.org/docs/#api/en/textures/VideoTexture
+// 1. define global variable for controls
+let video = undefined
+let videoImage = undefined
+let videoImageContext = undefined
+let videoTexture = undefined
+let mov_mat = undefined
+// 2. (after all your model loaded event) create video material
+video = document.createElement( 'video' );
+video.src = "video/my_video.mp4";
+video.load();
+// video.play(); // (don't play on start)
+videoImage = document.createElement( 'canvas' );
+videoImage.width = 640;
+videoImage.height = 480;
+videoImageContext = videoImage.getContext( '2d' );
+// background color if no video present
+videoImageContext.fillStyle = '#000000';
+videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );
+videoTexture = new THREE.Texture( videoImage );
+videoTexture.minFilter = THREE.LinearFilter;
+videoTexture.magFilter = THREE.LinearFilter;
+mov_mat = new THREE.MeshBasicMaterial( { map: videoTexture, side:THREE.DoubleSide } ); // overdraw: true,
+// 3. assign to geo
+my_video_plane_geo.material = mov_mat;
+// 4. call video_update() during render each frame
+function video_update(){
+    if ( video.readyState === video.HAVE_ENOUGH_DATA )
+    {
+        videoImageContext.drawImage( video, 0, 0 );
+        if ( videoTexture )
+            videoTexture.needsUpdate = true;
+    }
+}
+// 5. support functions for call from other event
+function video_start(){
+    //bgm_sound.pause(); // option to mute bgm sound if you have any
+    video.currentTime = 0;
+    video.play();
+}
+function video_stop(){
+    //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>
 ====== Template ======