摘要:紋理貼圖的應用以及實現一個太陽系的自轉公轉點擊查看演示地址中的紋理紋理貼圖是通過將圖像應用到對象的一個或多個面,來為對象添加細節的一種方法。
紋理貼圖的應用以及實現一個太陽系的自轉公轉 點擊查看demo演示 demo地址:https://nsytsqdtn.github.io/d... three.js中的紋理
紋理貼圖是通過將圖像應用到對象的一個或多個面,來為3D對象添加細節的一種方法。
可以使用TextureLoader類的load方法來加載紋理
function loadImgTexture(){ var loader = new THREE.TextureLoader(); loader.load("metal-rust.jpg",function(texture){ var geometry = new THREE.BoxGeometry(10,10,10); var material = new THREE.MeshBasicMaterial({color:0x739783,map:texture}); mesh = new THREE.Mesh(geometry,material); scene.add(mesh); }) }
實現效果如下:
八大行星的貼圖資源網上到處都可以找到,這里給一個還不錯的地址:
https://tieba.baidu.com/p/487...
完整太陽系代碼:
Three.js
注意從本地讀取圖片或者其他文件時,瀏覽器一般是不允許的,所以會出現加載不了紋理或者背景圖片的情況,只能在Chrome瀏覽器的屬性--目標的最后,加上 --allow-file-access-from-files(前面有一個空格),就可以從這個打開的快捷方式中去讀取到本地文件,如果是Edge瀏覽器似乎就直接可以。也可以使用npm或者tomcat搭建一個本地服務器,然后把圖片放進去就可以直接讀取了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103811.html
摘要:上帝覺得缺少了些生氣,便用泥巴捏了一個小人兒,不叫亞當,她叫小芳。接下來預先恭喜你,你可以成為這網頁世界的一個小上帝。使用可以向場景中發射光線。在下述案例中,從攝像機的位置向場景中鼠標的點擊位置發射光線。 先得擺出幾個關鍵詞:場景、燈光、模型、材質、貼圖與紋理、相機、渲染器。然后我開始裝模作樣地解釋: 上帝說,要有場景!于是就有了場景,場景去納這萬事萬物。 上帝說,要有光!于是就有了光...
摘要:上帝覺得缺少了些生氣,便用泥巴捏了一個小人兒,不叫亞當,她叫小芳。接下來預先恭喜你,你可以成為這網頁世界的一個小上帝。使用可以向場景中發射光線。在下述案例中,從攝像機的位置向場景中鼠標的點擊位置發射光線。 先得擺出幾個關鍵詞:場景、燈光、模型、材質、貼圖與紋理、相機、渲染器。然后我開始裝模作樣地解釋: 上帝說,要有場景!于是就有了場景,場景去納這萬事萬物。 上帝說,要有光!于是就有了光...
摘要:全景在以前帶寬有限的條件下常常用來作為街景和全景圖片的查看。后面,我們來了解一下,如何在端實現全景視頻。現在對支持度也不是特別友好,但是,對于全景視頻來說,在機器換代更新的前提下,全景在性能方面的瓶頸慢慢消失了。 Web 全景在以前帶寬有限的條件下常常用來作為街景和 360° 全景圖片的查看。它可以給用戶一種 self-immersive 的體驗,通過簡單的操作,自由的查看周圍的物體。...
閱讀 1590·2023-04-25 15:50
閱讀 1309·2021-09-22 15:49
閱讀 2938·2021-09-22 15:06
閱讀 3593·2019-08-30 15:54
閱讀 2338·2019-08-29 11:33
閱讀 2123·2019-08-23 17:56
閱讀 2153·2019-08-23 17:06
閱讀 1303·2019-08-23 15:55