three.js建立地球帶大氣層、輝光、雲層、凹凸、高光
three.js建立地球
本教程採用three.js建立一個地球帶包含材質貼圖，凹凸/高光貼圖，以及大氣層、輝光、雲層、軌道衛星、星空等效果。涉及到的知識點有：
- three.js基本場景
- 紋理貼圖
- 軌道控制器
- ShaderMaterial
- ShapeGeometry
- 粒子系統
- 後期通道ShaderPass
- node.js
- TypeScript
- babel+webpack
為了複習所學的知識，所以盡我可能多的用到不同的知識點。先通過常規開發方式完成整個工程的開發，最後再用TS重構一下，然後打包釋出。
1、基本場景搭建
2、新增地球
3、新增軌道控制器
4、新增雲層
5、新增大氣層
6、新增星空背景
7、新增輝光效果
8、新增軌道衛星
9、TS重構
10、打包釋出
-------更新中------
相關推薦
three.js建立地球帶大氣層、輝光、雲層、凹凸、高光
three.js建立地球 本教程採用three.js建立一個地球帶包含材質貼圖，凹凸/高光貼圖，以及大氣層、輝光、雲層、軌道衛星、星空等效果。涉及到的知識點有： three.js基本場景 紋理貼圖 軌道控制器 ShaderMaterial ShapeGeom
Three.js建立隨機立體幾何體示例
效果 demo <template> <div> <div ref="StatsBox"></div> <div ref="ThreeBox"></div> </div>
three.js 帶更新文字的旋轉地球
檢視旋轉地球效果 主要用到幾個知識點 （1）顯示文字是使用了three.js 的精靈（Sprite），精靈的文字方向始終面向相
JS：遞歸基礎及範例——斐波那契數列 、 楊輝三角
求解 調用 size spa 黃金分割 span 簡單 斐波那契數 數字 定義：程序調用自身的編程技巧稱為遞歸。一個過程或函數在其定義或說明中有直接或間接調用自身的一種方法，它通常把一個大型復雜的問題層層轉化為一個與原問題相似的規模較小的問題來求解，遞歸策略只需少量的程序就
Three.js基礎：建立Cube並實現鼠標交互，動畫旋轉
src style icm document charset char itl () wid index.html文件： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <
three.js引擎基礎知識—攝像機、場景及渲染器
blog new ram end 內部 渲染器 tro element col 一、three.js采用右手坐標系： x軸正方向向右，y軸正方向向上，z軸由屏幕從裏向外，如下圖右： 二、3D編程三要素：場景、渲染器、攝像機 1.場景：創建的物品和模型都需放入場景中 t
three.js 通過 Reflector.js 建立鏡面反射
類似境面反射可以使用CubeCamera但是CubeCamera更適用於建立物體自身對環境的反射，但是如果想要建立一面鏡子的話使用CubeCamera會難除錯所反射物體的位置，而且鏡面中的物體不會隨著控制器的縮放而變動。 使用Reflector.js可以很容易的建立一面鏡子，並且鏡子中的
67 - three.js 筆記 - 使用 bumpMap 凹凸貼圖建立皺紋
凹凸貼圖用於為材質增加厚度，在三維環境中使表面產生凹凸不平的視覺效果。 它主要的原理是通過改變表面光照的法線。凹凸貼圖是一種灰度影象素的密集程度定義的是凹凸的程度。凹凸貼圖只包含畫素的相對高度，不包含傾斜方向的資訊，凹凸貼圖不會改變物體的形狀。 1、示例 示例 http://it
70 - three.js 筆記 - 使用環境貼圖 建立虛假的反光效果
計算環境反光會非常耗費CPU，而且通常會使用光線追蹤演算法，在three.js中通過環境貼圖envMap來偽裝反光，並且可以將環境貼圖用到指定的物件上。 1、示例 示例 http://ithanmang.com/threeJs/home/201809/20180905/07-env
69 - three.js 筆記 - 使用光照貼圖 lightMap 建立假陰影
Material的lightMap屬性，是光照貼圖，使用光照貼圖可以模擬出真實的陰影效果，但是陰影的位置不能隨著隨著物體的移動而移動。 1、示例 示例 http://ithanmang.com/threeJs/home/201809/20180905/06-lightMap-tex
72 - three.js 筆記 - 通過 Reflector.js 建立鏡面反射
類似境面反射可以使用CubeCamera但是CubeCamera更適用於建立物體自身對環境的反射，但是如果想要建立一面鏡子的話使用CubeCamera會難除錯所反射物體的位置，而且鏡面中的物體不會隨著控制器的縮放而變動。 使用Reflector.js可以很容易的建立一面鏡子，並且鏡子中的物
如何修改帶索引的欄位的長度，檢視、刪除索引，修改欄位屬性、建立索引！
需要重新建立索引，因為長度不同會認為是兩個不同的所索引。 建立和刪除索引 索引的建立可以在CREATE TABLE語句中進行，也可以單獨用CREATE INDEX或ALTER TABLE來給表增加索引。刪除索引可以利用ALTER TABLE或DROP INDEX語句來實現。 （1）使用ALTER T
three.js入門系列之旋轉的圓臺、球體、正方體
先來張圖： 一、調整機位和輔助線 由上述程式碼可知，現在的機位是三維座標軸上的點（2,2,2），方框的那一句很重要，有了這一句，你將獲得上帝視角！！！ 接下來新增輔助線（立體空間三軸）： 這樣就添加了一個軸輔助線，由於我們是站在（2,2,2），所以看到的輔助線是這樣的： 這是一個標
three.js 變換大小、角度、位移控制元件 TransformControls.js
TransformControls.js：滑鼠操控物體移動、縮放、旋轉的控制元件（物體操作工具） 該控制元件可以實現視覺化操作三維模型，通過選中一個三維模型，然後通過控制元件物件的方法attach()可以把選中的三維模型與控制元件TransformControls繫結， 你
three.js用THREE.CubeCamera和環境貼圖建立反光效果
在在文章：three.js貼圖之CubeTextureLoader全景貼圖中已經講過全景貼圖的應用，本文將進一步擴充套件全景貼圖的功能，結合THREE.CubeCamera功能，創建出一個具有反光效果的場景，首先來看看看看THREE.CubeCamera的用法： let c
使用ethers.js建立以太坊HD錢包(生成BIP-039 + BIP-044錢包)，在根據私鑰、助記詞找回錢包！
一、什麼是ethers.js 二、在Node.js中安裝 (npm安裝) npm install -save ethers (yarn安裝) yarn add ethers 三、建立wallet.js檔案 生成錢包資訊 //引入ethers.j
Three.js每個面設定不同的顏色、每個面設定不同的材質
1.每個面設定不同的顏色 let geometry = new THREE.BoxGeometry( 1000, 1000, 1000); for(let i = 0;i<geometry.faces.length;i++){
學習Three.js——粒子、點雲(Sprite,PointCloud)
粒子 使用THREE.SpriteMaterial()和THREE.Sprite()即可建立單個粒子 建立過程 function createSprites() { var material = new THREE.SpriteMaterial();
three.js:使用createMultiMaterialObject建立的多材質物件無法使用光線跟蹤Raycaster選中
建立多材質物件： var loader = new THREE.DDSLoader(); var map = loader.load('../assets/textures/Mountains_argb_nomip.dds', function ( texture ) { texture.
【three.js : 3D】【loader】THREE.js中載入不同格式的模型及動畫(fbx、json和obj)
轉載：THREE.js中載入不同格式的模型及動畫(fbx、json和obj) 注：本文章內容基於 Three.js 88dev 實現 作為剛接觸three.js的小萌新，勵志將自己開荒歷程記錄下來，希望對後來人有所幫助。 網上有很多demo，文件卻不多。每次都是，照搬別人的