Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
devwiki:three_js [2022/06/13 20:38] – [Common Code] ying | devwiki:three_js [2022/07/17 11:49] (current) – [Browse Support] ying | ||
---|---|---|---|
Line 28: | Line 28: | ||
* https:// | * https:// | ||
+ | ====== 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:// | ||
+ | |||
+ | * check webgl2 support <code javascript> | ||
+ | // check webgl2 support for multi sample version | ||
+ | const gl = document.createElement(' | ||
+ | if (!gl) { | ||
+ | alert(' | ||
+ | console.log(' | ||
+ | } else { | ||
+ | console.log(' | ||
+ | } | ||
+ | </ | ||
====== Tools ====== | ====== Tools ====== | ||
Line 329: | Line 345: | ||
child.material.map.inFilter = THREE.NearestFilter | child.material.map.inFilter = THREE.NearestFilter | ||
child.material.map.generateMipmaps = false | child.material.map.generateMipmaps = false | ||
+ | </ | ||
+ | |||
+ | * make object ignore camera frustum culling, so that when camera move closer, object won't disappear <code javascript> | ||
+ | if(child.name.startsWith(" | ||
+ | child.frustumCulled = false | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * video as texture <code javascript> | ||
+ | // ref: https:// | ||
+ | // https:// | ||
+ | |||
+ | // 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.src = " | ||
+ | video.load(); | ||
+ | // video.play(); | ||
+ | videoImage = document.createElement( ' | ||
+ | videoImage.width = 640; | ||
+ | videoImage.height = 480; | ||
+ | videoImageContext = videoImage.getContext( ' | ||
+ | // background color if no video present | ||
+ | videoImageContext.fillStyle = '# | ||
+ | videoImageContext.fillRect( 0, 0, videoImage.width, | ||
+ | videoTexture = new THREE.Texture( videoImage ); | ||
+ | videoTexture.minFilter = THREE.LinearFilter; | ||
+ | videoTexture.magFilter = THREE.LinearFilter; | ||
+ | mov_mat = new THREE.MeshBasicMaterial( { map: videoTexture, | ||
+ | |||
+ | // 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(){ | ||
+ | // | ||
+ | video.currentTime = 0; | ||
+ | video.play(); | ||
+ | } | ||
+ | function video_stop(){ | ||
+ | // | ||
+ | video.pause(); | ||
+ | video.currentTime = 0; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | * language based texture switch <code javascript> | ||
+ | // method 1: (works in firefox, not in chrome) | ||
+ | if(child.name == " | ||
+ | lang_texture_geo = child | ||
+ | if(main_lang==" | ||
+ | lang_texture_geo.material.map.image.src = " | ||
+ | } | ||
+ | } | ||
+ | // method 2: (works in both firefox and chrome) | ||
+ | const main_texLoader = new THREE.TextureLoader(load_manager) | ||
+ | const cn_text_ctex = main_texLoader.load(" | ||
+ | cn_text_ctex.flipY = false; | ||
+ | if(child.name == " | ||
+ | lang_texture_geo = child | ||
+ | if(main_lang == " | ||
+ | child.material.map = cn_text_ctex; | ||
+ | } | ||
+ | } | ||
</ | </ | ||
====== Template ====== | ====== Template ====== |