ThreeJS 高亮地球

2022-03-11 22:55:37 字數 1393 閱讀 8422

網上地球高亮和輝光的效果很多,這裡用glsl做(沒學明白,網上東拼西湊拿來用了)。還有嘗試過用render渲染,但是render生成的canvas會覆蓋整個瀏覽器視窗,把背景遮蓋住。

建立球的過程參見"threejs製作地球"

建立定點著色器和片元著色器

var vertexshader = [

'varying vec3 vnormal;',

'void main()',

''].join('\n');

var fragmentshader2 = [

'uniform float c;',

'uniform float p;',

'varying vec3 vnormal;',

'void main()',

''].join('\n');

將著色器賦給shadermaterial材質

var material_glow = new three.shadermaterial(,

"p":

},depthwrite: false,

side: three.backside

});

在地球外面再轉殖乙個稍大的球,把材質貼上

//然後建立乙個object,型別為mesh。他的引數使我們之前創的幾何模型以及材料

var sphere = new three.mesh(new three.spheregeometry(_earthoptions.earthballsize + _pbuffer, 50, 50).clone(), material_glow);

sphere.position.set(0, 0, 0);

scene.add(sphere);

執行渲染

render();

// 執行函式

function render()

//是否開啟了輝光渲染,如開啟則開啟輝光渲染

if (composer)

renderer.cleardepth();

//自轉

ThreeJS 重刷地球配置

為滿足地球在構造完成以後,需要調整配置 如轉速 大小等 其實方法很簡單,只要改完引數,重新render渲染即可。地球在創造的時候會不斷的執行渲染 因為有自轉功能 所以只需更改引數值即可。附上介面 this.resetearth function newearthoptions 深空背景 if new...

ThreeJS 地球上撒點

撒點功能原理是在地球上根據座標批量加上圓物件,可以設定顏色和球大小。建立球的過程參見 threejs製作地球 建立點group,考慮後面會做刪除功能,所以把所有的實體都以group組為單位新增,後續方便做刪除 標記點組合 var marking new three.group 根據資料,迴圈新增圓以...

ThreeJS中CameraHelper的使用

參考 想達到這種效果,都必須使用2個相機。就如上圖2所示,螢幕相機的投影是整個螢幕 左右兩個小視窗共同組成 帶相機助手的投影是左面的畫面。偽 螢幕相機 let camera newthree.perspectivecamera 45 1,0.01 300 camera.position.set 1 ...