手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

使用three.js的著色器通道渲染地球模型

2018-5-11    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

我們都知道，three.js庫(kù)里面內(nèi)置了很多著色器通道對(duì)象供我們渲染場(chǎng)景，本文將對(duì)EffectComposer、RenderPass、FilmPass這三個(gè)通道進(jìn)行學(xué)習(xí)和實(shí)現(xiàn)：

1.RenderPass這個(gè)通道會(huì)在當(dāng)前場(chǎng)景（scene）和攝像機(jī)（camera）的基礎(chǔ)上渲染出一個(gè)新場(chǎng)景，新建：

[javascript] view plain copy
  1. let renderPass = new THREE.RenderPass(scene, camera);  

2.FilmPass這個(gè)通道通過(guò)掃描線和失真模擬電視屏幕效果，實(shí)現(xiàn)的效果超有時(shí)代感，新建：

[javascript] view plain copy
  1. /*四個(gè)參數(shù)分別為粗糙程度，掃描線強(qiáng)度，掃描線數(shù)量，是否轉(zhuǎn)換為灰度圖*/  
  2. let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
  3. //將渲染結(jié)果輸出到屏幕  
  4. effectFilm.renderToScreen = true;  

3.EffectComposer可以理解為著色器通道容器，著色器通道按照先后順序添加進(jìn)來(lái)并執(zhí)行，新建：

[javascript] view plain copy
  1. /*渲染效果組合器，每個(gè)通道都按照傳入的順序執(zhí)行*/  
  2. let composer = new THREE.EffectComposer(renderer);  
  3. composer.addPass(renderPass);  
  4. composer.addPass(effectFilm);  

本文實(shí)現(xiàn)的demo基于three.js_r86(請(qǐng)自行下載)，代碼所用js文件和圖片都在下載的那個(gè)包里面，請(qǐng)讀者自行引用。

實(shí)現(xiàn)效果：



代碼：

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>shader_2_earth</title>  
  6.     <style>  
  7.         body{  
  8.             margin: 0;  
  9.             overflow: hidden;  
  10.         }  
  11.     </style>  
  12. </head>  
  13. <body>  
  14. <script src="build/three.js"></script>  
  15. <script src="js/libs/stats.min.js"></script>  
  16. <script src="js/libs/dat.gui.min.js"></script>  
  17. <script src="js/controls/OrbitControls.js"></script>  
  18. <script src="js/Detector.js"></script>  
  19.   
  20. <script src="js/postprocessing/EffectComposer.js"></script>  
  21. <script src="js/postprocessing/ShaderPass.js"></script>  
  22. <script src="js/postprocessing/MaskPass.js"></script>  
  23. <script src="js/postprocessing/FilmPass.js"></script>  
  24. <script src="js/postprocessing/BloomPass.js"></script>  
  25. <script src="js/postprocessing/RenderPass.js"></script>  
  26.   
  27. <script src="js/shaders/CopyShader.js"></script>  
  28. <script src="js/shaders/FilmShader.js"></script>  
  29.   
  30. <div id="stats"></div>  
  31. <div id="container"></div>  
  32. <script>  
  33.     //檢測(cè)webgl的兼容性  
  34.    if(!Detector.webgl) Detector.addGetWebGLMessage();  
  35.   
  36.    let scene;  
  37.    let camera, renderer, sphere, controls, stats;  
  38.    let ambientLight, spotLight;  
  39.    let composer;  
  40.    let clock;  
  41.   
  42.    main();  
  43.    render();  
  44.   
  45.    function main() {  
  46.        scene = new THREE.Scene();  
  47.   
  48.        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);  
  49.        camera.position.set(-10, 15, 25);  
  50.        camera.lookAt(new THREE.Vector3(0, 0, 0));  
  51.   
  52.        renderer = new THREE.WebGLRenderer({antialias:true});  
  53.        renderer.setClearColor(new THREE.Color(0,0,0));  
  54.        renderer.setSize(window.innerWidth, window.innerHeight);  
  55.        renderer.shadowMapEnabled = true;  
  56.   
  57.        controls = new THREE.OrbitControls(camera);  
  58.        controls.autoRotate = false;  
  59.   
  60.        clock = new THREE.Clock();  
  61.   
  62.        ambientLight = new THREE.AmbientLight(0x181818);  
  63.        scene.add(ambientLight);  
  64.   
  65.        spotLight = new THREE.SpotLight(0xffffff);  
  66.        spotLight.position.set(550, 100, 550);  
  67.        spotLight.intensity = 0.6;  
  68.        scene.add(spotLight);  
  69.   
  70.        //創(chuàng)建地球  
  71.        sphere = createMesh(new THREE.SphereGeometry(10, 60, 60));  
  72.        scene.add(sphere);  
  73.   
  74.        document.getElementById("container").appendChild(renderer.domElement);  
  75.   
  76.        /**  
  77.         * 添加渲染通道  
  78.         */  
  79.        //在當(dāng)前場(chǎng)景和攝像機(jī)的基礎(chǔ)上渲染一個(gè)新場(chǎng)景  
  80.        let renderPass = new THREE.RenderPass(scene, camera);  
  81.        //通過(guò)掃描線和失真來(lái)實(shí)現(xiàn)模擬電視屏幕的效果  
  82.        let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
  83.        //將渲染結(jié)果輸出到屏幕  
  84.        effectFilm.renderToScreen = true;  
  85.   
  86.        //渲染效果組合器，每個(gè)通道都按照傳入的順序執(zhí)行  
  87.        composer = new THREE.EffectComposer(renderer);  
  88.        composer.addPass(renderPass);  
  89.        composer.addPass(effectFilm);  
  90.   
  91.        //菜單欄元素  
  92.        let guiFields = {  
  93.            "掃描線數(shù)量": 256,  
  94.            "灰度圖像": false,  
  95.            "掃描線強(qiáng)度": 0.3,  
  96.            "粗糙程度": 0.8,  
  97.            "updateEffectFilm": function () {  
  98.                effectFilm.uniforms.grayscale.value = guiFields.灰度圖像;  
  99.                effectFilm.uniforms.nIntensity.value = guiFields.粗糙程度;  
  100.                effectFilm.uniforms.sIntensity.value = guiFields.掃描線強(qiáng)度;  
  101.                effectFilm.uniforms.sCount.value = guiFields.掃描線數(shù)量;  
  102.            }  
  103.        };  
  104.   
  105.        //新建一個(gè)菜單欄  
  106.        let gui = new dat.GUI();  
  107.        gui.add(guiFields, "掃描線數(shù)量", 0, 2048).onChange(guiFields.updateEffectFilm);  
  108.        gui.add(guiFields, "掃描線強(qiáng)度", 0, 1).onChange(guiFields.updateEffectFilm);  
  109.        gui.add(guiFields, "粗糙程度", 0, 3).onChange(guiFields.updateEffectFilm);  
  110.        gui.add(guiFields, "灰度圖像").onChange(guiFields.updateEffectFilm);  
  111.   
  112.        stats = initStats();  
  113.    }  
  114.   
  115.    //創(chuàng)建一個(gè)Mesh  
  116.    function createMesh(geometry) {  
  117.   
  118.        //初始化紋理加載器  
  119.        let textureLoader = new THREE.TextureLoader();  
  120.        //加載圖片  
  121.        let uniforms = {  
  122.            planetTexture:{value:textureLoader.load("textures/planets/earth_atmos_2048.jpg")},  
  123.            specularTexture:{value:textureLoader.load("textures/planets/earth_specular_2048.jpg")},  
  124.            normalTexture:{value:textureLoader.load("textures/planets/earth_normal_2048.jpg")}  
  125.        };  
  126.   
  127.        //創(chuàng)建phong材料，并進(jìn)行相應(yīng)圖片的貼圖  
  128.        let planetMaterial = new THREE.MeshPhongMaterial();  
  129.        planetMaterial.specularMap = uniforms.specularTexture.value;  
  130.        planetMaterial.specular = new THREE.Color(0x4444aa);  
  131.   
  132.        planetMaterial.normalMap = uniforms.normalTexture.value;  
  133.        planetMaterial.map = uniforms.planetTexture.value;  
  134.   
  135.        //新建一個(gè)mesh  
  136.        let mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, [planetMaterial]);  
  137.   
  138.        return mesh;  
  139.    }  
  140.   
  141.    //渲染更新場(chǎng)景  
  142.   
  143.    function render() {  
  144.        stats.update();  
  145.        let delta = clock.getDelta();  
  146.        controls.update(delta);  
  147.        sphere.rotation.y += 0.002;  
  148.        requestAnimationFrame(render);  
  149.   
  150.        //沒(méi)有著色器通道系統(tǒng)默認(rèn)為WebGLRenderer.render  
  151.        //使用著色器通道后，應(yīng)使用使用composer.render  
  152.        composer.render(delta);  
  153.    }  
  154.   
  155.    //左上角幀顯示  
  156.    function initStats() {  
  157.        let stats = new Stats();  
  158.        stats.setMode(0);  
  159.        stats.domElement.style.position = 'absolute';  
  160.        stats.domElement.style.left = '0px';  
  161.        stats.domElement.style.top = '0px';  
  162.        document.getElementById("stats").appendChild(stats.domElement);  
  163.   
  164.        return stats;  
  165.    }  
  166. </script>  
  167. </body>  
  168. </html>  
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至：

日歷

鏈接

個(gè)人資料

存檔