区块链技术博客
www.b2bchain.cn

cesium 构建天空盒求职学习资料

本文介绍了cesium 构建天空盒求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

我们用typescript 实现 cesium 天空盒子

let skyBox =  {         //会直接关闭大气层(存在大气层,近景效果不佳)         nearSkyBox: {           positiveX: "./images/skybox/03/px.jpg",           positiveY: "./images/skybox/03/py.jpg",           positiveZ: "./images/skybox/03/pz.jpg",           negativeX: "./images/skybox/03/nx.jpg",           negativeY: "./images/skybox/03/ny.jpg",           negativeZ: "./images/skybox/03/nz.jpg",         },         farDistance: 5500,         farSkyBox: {           positiveX: "./images/skybox/04/px.jpg",           positiveY: "./images/skybox/04/py.jpg",           positiveZ: "./images/skybox/04/pz.jpg",           negativeX: "./images/skybox/04/nx.jpg",           negativeY: "./images/skybox/04/ny.jpg",           negativeZ: "./images/skybox/04/nz.jpg",         },       }; let skyBox = new SkyBox(viewer, skyBox);//设置天空盒

我们定义参数类

export interface PskyboxSource {     positiveX: String,     negativeX: String,     positiveY: String,     negativeY: String,     positiveZ: String,     negativeZ: String } export interface PSkyBox {     nearSkyBox?: PskyboxSource,//近景的天空盒     farDistance?: Number,//近景和远景的分割距离     farSkyBox?: PskyboxSource,//远景的天空盒 }

我们定义SkyBox 基类
“`javascript

const BoxGeometry = Cesium.BoxGeometry;
const Cartesian3 = Cesium.Cartesian3;
const defaultValue = Cesium.defaultValue;
const defined = Cesium.defined;
const destroyObject = Cesium.destroyObject;
const DeveloperError = Cesium.DeveloperError;
const GeometryPipeline = Cesium.GeometryPipeline;
const Matrix3 = Cesium.Matrix3;
const Matrix4 = Cesium.Matrix4;
const Transforms = Cesium.Transforms;
const VertexFormat = Cesium.VertexFormat;
const BufferUsage = Cesium.BufferUsage;
const CubeMap = Cesium.CubeMap;
const DrawCommand = Cesium.DrawCommand;
const loadCubeMap = Cesium.loadCubeMap;
const RenderState = Cesium.RenderState;
const VertexArray = Cesium.VertexArray;
const BlendingState = Cesium.BlendingState;
const SceneMode = Cesium.SceneMode;
const ShaderProgram = Cesium.ShaderProgram;
const ShaderSource = Cesium.ShaderSource;
//片元着色器,直接从源码复制
const SkyBoxFS = “uniform samplerCube u_cubeMap;n
varying vec3 v_texCoord;n
void main()n
{n
vec4 color = textureCube(u_cubeMap, normalize(v_texCoord));n
gl_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);n
}n
“;

//顶点着色器有修改,主要是乘了一个旋转矩阵
const SkyBoxVS = “attribute vec3 position;n
varying vec3 v_texCoord;n
uniform mat3 u_rotateMatrix;n
void main()n
{n
vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));n
gl_Position = czm_projection * vec4(p, 1.0);n
v_texCoord = position.xyz;n
}n
“;
/**

  • 为了兼容高版本的Cesium,因为新版cesium中getRotation被移除
    */
    if (!Cesium.defined(Cesium.Matrix4.getRotation)) {
    Cesium.Matrix4.getRotation = Cesium.Matrix4.getMatrix3
    }
    const skyboxMatrix3 = new Matrix3();

/**

  • 近景天空盒
    */
    export class SkyBoxOnGround {

    sources: any;
    _sources: any = undefined;
    show: boolean = true;
    _command: any;
    _cubeMap: any;
    _attributeLocations: any;
    _useHdr: any;
    constructor(options: any) {
    super();
    this.sources = options.sources;
    this.show = options.show || true;
    this._command = new DrawCommand({
    modelMatrix: Matrix4.clone(Matrix4.IDENTITY),
    owner: this
    });
    this._cubeMap = undefined;
    this._attributeLocations = undefined;
    this._useHdr = undefined;
    }
    update(frameState: any, useHdr: any) {
    const that = this;
    if (!this.show) {
    return undefined;
    }
    if ((frameState.mode !== SceneMode.SCENE3D) &&
    (frameState.mode !== SceneMode.MORPHING)) {
    return undefined;
    }

    if (!frameState.passes.render) {     return undefined; }  const context = frameState.context;  if (this._sources !== this.sources) {     this._sources = this.sources;     const sources = this.sources;
    if ((!defined(sources.positiveX)) ||     (!defined(sources.negativeX)) ||     (!defined(sources.positiveY)) ||     (!defined(sources.negativeY)) ||     (!defined(sources.positiveZ)) ||     (!defined(sources.negativeZ))) {     throw new DeveloperError('this.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties.'); }  if ((typeof sources.positiveX !== typeof sources.negativeX) ||     (typeof sources.positiveX !== typeof sources.positiveY) ||     (typeof sources.positiveX !== typeof sources.negativeY) ||     (typeof sources.positiveX !== typeof sources.positiveZ) ||     (typeof sources.positiveX !== typeof sources.negativeZ)) {     throw new DeveloperError('this.sources properties must all be the same type.'); }  if (typeof sources.positiveX === 'string') {     // Given urls for cube-map images.  Load them.     loadCubeMap(context, this._sources).then(function (cubeMap:any) {         that._cubeMap = that._cubeMap &amp;&amp; that._cubeMap.destroy();         that._cubeMap = cubeMap;     }); } else {     this._cubeMap = this._cubeMap &amp;&amp; this._cubeMap.destroy();     this._cubeMap = new CubeMap({         context: context,</code></pre></li>

我们用typescript 实现 cesium 天空盒子

let skyBox =  {         //会直接关闭大气层(存在大气层,近景效果不佳)         nearSkyBox: {           positiveX: "./images/skybox/03/px.jpg",           positiveY: "./images/skybox/03/py.jpg",           positiveZ: "./images/skybox/03/pz.jpg",           negativeX: "./images/skybox/03/nx.jpg",           negativeY: "./images/skybox/03/ny.jpg",           negativeZ: "./images/skybox/03/nz.jpg",         },         farDistance: 5500,         farSkyBox: {           positiveX: "./images/skybox/04/px.jpg",           positiveY: "./images/skybox/04/py.jpg",           positiveZ: "./images/skybox/04/pz.jpg",           negativeX: "./images/skybox/04/nx.jpg",           negativeY: "./images/skybox/04/ny.jpg",           negativeZ: "./images/skybox/04/nz.jpg",         },       }; let skyBox = new SkyBox(viewer, skyBox);//设置天空盒

我们定义参数类

export interface PskyboxSource {     positiveX: String,     negativeX: String,     positiveY: String,     negativeY: String,     positiveZ: String,     negativeZ: String } export interface PSkyBox {     nearSkyBox?: PskyboxSource,//近景的天空盒     farDistance?: Number,//近景和远景的分割距离     farSkyBox?: PskyboxSource,//远景的天空盒 }

我们定义SkyBox 基类
“`javascript

const BoxGeometry = Cesium.BoxGeometry;
const Cartesian3 = Cesium.Cartesian3;
const defaultValue = Cesium.defaultValue;
const defined = Cesium.defined;
const destroyObject = Cesium.destroyObject;
const DeveloperError = Cesium.DeveloperError;
const GeometryPipeline = Cesium.GeometryPipeline;
const Matrix3 = Cesium.Matrix3;
const Matrix4 = Cesium.Matrix4;
const Transforms = Cesium.Transforms;
const VertexFormat = Cesium.VertexFormat;
const BufferUsage = Cesium.BufferUsage;
const CubeMap = Cesium.CubeMap;
const DrawCommand = Cesium.DrawCommand;
const loadCubeMap = Cesium.loadCubeMap;
const RenderState = Cesium.RenderState;
const VertexArray = Cesium.VertexArray;
const BlendingState = Cesium.BlendingState;
const SceneMode = Cesium.SceneMode;
const ShaderProgram = Cesium.ShaderProgram;
const ShaderSource = Cesium.ShaderSource;
//片元着色器,直接从源码复制
const SkyBoxFS = “uniform samplerCube u_cubeMap;n
varying vec3 v_texCoord;n
void main()n
{n
vec4 color = textureCube(u_cubeMap, normalize(v_texCoord));n
gl_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);n
}n
“;

//顶点着色器有修改,主要是乘了一个旋转矩阵
const SkyBoxVS = “attribute vec3 position;n
varying vec3 v_texCoord;n
uniform mat3 u_rotateMatrix;n
void main()n
{n
vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));n
gl_Position = czm_projection * vec4(p, 1.0);n
v_texCoord = position.xyz;n
}n
“;
/**

  • 为了兼容高版本的Cesium,因为新版cesium中getRotation被移除
    */
    if (!Cesium.defined(Cesium.Matrix4.getRotation)) {
    Cesium.Matrix4.getRotation = Cesium.Matrix4.getMatrix3
    }
    const skyboxMatrix3 = new Matrix3();

/**

  • 近景天空盒
    */
    export class SkyBoxOnGround {

    sources: any;
    _sources: any = undefined;
    show: boolean = true;
    _command: any;
    _cubeMap: any;
    _attributeLocations: any;
    _useHdr: any;
    constructor(options: any) {
    super();
    this.sources = options.sources;
    this.show = options.show || true;
    this._command = new DrawCommand({
    modelMatrix: Matrix4.clone(Matrix4.IDENTITY),
    owner: this
    });
    this._cubeMap = undefined;
    this._attributeLocations = undefined;
    this._useHdr = undefined;
    }
    update(frameState: any, useHdr: any) {
    const that = this;
    if (!this.show) {
    return undefined;
    }
    if ((frameState.mode !== SceneMode.SCENE3D) &&
    (frameState.mode !== SceneMode.MORPHING)) {
    return undefined;
    }

    if (!frameState.passes.render) {     return undefined; }  const context = frameState.context;  if (this._sources !== this.sources) {     this._sources = this.sources;     const sources = this.sources;
    if ((!defined(sources.positiveX)) ||     (!defined(sources.negativeX)) ||     (!defined(sources.positiveY)) ||     (!defined(sources.negativeY)) ||     (!defined(sources.positiveZ)) ||     (!defined(sources.negativeZ))) {     throw new DeveloperError('this.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties.'); }  if ((typeof sources.positiveX !== typeof sources.negativeX) ||     (typeof sources.positiveX !== typeof sources.positiveY) ||     (typeof sources.positiveX !== typeof sources.negativeY) ||     (typeof sources.positiveX !== typeof sources.positiveZ) ||     (typeof sources.positiveX !== typeof sources.negativeZ)) {     throw new DeveloperError('this.sources properties must all be the same type.'); }  if (typeof sources.positiveX === 'string') {     // Given urls for cube-map images.  Load them.     loadCubeMap(context, this._sources).then(function (cubeMap:any) {         that._cubeMap = that._cubeMap &amp;&amp; that._cubeMap.destroy();         that._cubeMap = cubeMap;     }); } else {     this._cubeMap = this._cubeMap &amp;&amp; this._cubeMap.destroy();     this._cubeMap = new CubeMap({         context: context,</code></pre></li>

我们用typescript 实现 cesium 天空盒子

let skyBox =  {         //会直接关闭大气层(存在大气层,近景效果不佳)         nearSkyBox: {           positiveX: "./images/skybox/03/px.jpg",           positiveY: "./images/skybox/03/py.jpg",           positiveZ: "./images/skybox/03/pz.jpg",           negativeX: "./images/skybox/03/nx.jpg",           negativeY: "./images/skybox/03/ny.jpg",           negativeZ: "./images/skybox/03/nz.jpg",         },         farDistance: 5500,         farSkyBox: {           positiveX: "./images/skybox/04/px.jpg",           positiveY: "./images/skybox/04/py.jpg",           positiveZ: "./images/skybox/04/pz.jpg",           negativeX: "./images/skybox/04/nx.jpg",           negativeY: "./images/skybox/04/ny.jpg",           negativeZ: "./images/skybox/04/nz.jpg",         },       }; let skyBox = new SkyBox(viewer, skyBox);//设置天空盒

我们定义参数类

export interface PskyboxSource {     positiveX: String,     negativeX: String,     positiveY: String,     negativeY: String,     positiveZ: String,     negativeZ: String } export interface PSkyBox {     nearSkyBox?: PskyboxSource,//近景的天空盒     farDistance?: Number,//近景和远景的分割距离     farSkyBox?: PskyboxSource,//远景的天空盒 }

我们定义SkyBox 基类
“`javascript

const BoxGeometry = Cesium.BoxGeometry;
const Cartesian3 = Cesium.Cartesian3;
const defaultValue = Cesium.defaultValue;
const defined = Cesium.defined;
const destroyObject = Cesium.destroyObject;
const DeveloperError = Cesium.DeveloperError;
const GeometryPipeline = Cesium.GeometryPipeline;
const Matrix3 = Cesium.Matrix3;
const Matrix4 = Cesium.Matrix4;
const Transforms = Cesium.Transforms;
const VertexFormat = Cesium.VertexFormat;
const BufferUsage = Cesium.BufferUsage;
const CubeMap = Cesium.CubeMap;
const DrawCommand = Cesium.DrawCommand;
const loadCubeMap = Cesium.loadCubeMap;
const RenderState = Cesium.RenderState;
const VertexArray = Cesium.VertexArray;
const BlendingState = Cesium.BlendingState;
const SceneMode = Cesium.SceneMode;
const ShaderProgram = Cesium.ShaderProgram;
const ShaderSource = Cesium.ShaderSource;
//片元着色器,直接从源码复制
const SkyBoxFS = “uniform samplerCube u_cubeMap;n
varying vec3 v_texCoord;n
void main()n
{n
vec4 color = textureCube(u_cubeMap, normalize(v_texCoord));n
gl_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);n
}n
“;

//顶点着色器有修改,主要是乘了一个旋转矩阵
const SkyBoxVS = “attribute vec3 position;n
varying vec3 v_texCoord;n
uniform mat3 u_rotateMatrix;n
void main()n
{n
vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));n
gl_Position = czm_projection * vec4(p, 1.0);n
v_texCoord = position.xyz;n
}n
“;
/**

  • 为了兼容高版本的Cesium,因为新版cesium中getRotation被移除
    */
    if (!Cesium.defined(Cesium.Matrix4.getRotation)) {
    Cesium.Matrix4.getRotation = Cesium.Matrix4.getMatrix3
    }
    const skyboxMatrix3 = new Matrix3();

/**

  • 近景天空盒
    */
    export class SkyBoxOnGround {

    sources: any;
    _sources: any = undefined;
    show: boolean = true;
    _command: any;
    _cubeMap: any;
    _attributeLocations: any;
    _useHdr: any;
    constructor(options: any) {
    super();
    this.sources = options.sources;
    this.show = options.show || true;
    this._command = new DrawCommand({
    modelMatrix: Matrix4.clone(Matrix4.IDENTITY),
    owner: this
    });
    this._cubeMap = undefined;
    this._attributeLocations = undefined;
    this._useHdr = undefined;
    }
    update(frameState: any, useHdr: any) {
    const that = this;
    if (!this.show) {
    return undefined;
    }
    if ((frameState.mode !== SceneMode.SCENE3D) &&
    (frameState.mode !== SceneMode.MORPHING)) {
    return undefined;
    }

    if (!frameState.passes.render) {     return undefined; }  const context = frameState.context;  if (this._sources !== this.sources) {     this._sources = this.sources;     const sources = this.sources;
    if ((!defined(sources.positiveX)) ||     (!defined(sources.negativeX)) ||     (!defined(sources.positiveY)) ||     (!defined(sources.negativeY)) ||     (!defined(sources.positiveZ)) ||     (!defined(sources.negativeZ))) {     throw new DeveloperError('this.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties.'); }  if ((typeof sources.positiveX !== typeof sources.negativeX) ||     (typeof sources.positiveX !== typeof sources.positiveY) ||     (typeof sources.positiveX !== typeof sources.negativeY) ||     (typeof sources.positiveX !== typeof sources.positiveZ) ||     (typeof sources.positiveX !== typeof sources.negativeZ)) {     throw new DeveloperError('this.sources properties must all be the same type.'); }  if (typeof sources.positiveX === 'string') {     // Given urls for cube-map images.  Load them.     loadCubeMap(context, this._sources).then(function (cubeMap:any) {         that._cubeMap = that._cubeMap &amp;&amp; that._cubeMap.destroy();         that._cubeMap = cubeMap;     }); } else {     this._cubeMap = this._cubeMap &amp;&amp; this._cubeMap.destroy();     this._cubeMap = new CubeMap({         context: context,</code></pre></li>

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » cesium 构建天空盒求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们