webgl三维绘制——彩色立方体

最新推荐文章于 2024-05-10 12:42:21 发布
最新推荐文章于 2024-05-10 12:42:21 发布
阅读量788 收藏 1
点赞数 2
分类专栏： WebGL 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37987033/article/details/129226920
版权

文章目录

前言

webgl的知识储备了这么多，从现在开始将会正式进入立方体的绘制，本文介绍如何在webgl中绘制一个三维立方体。

创建透视投影场景

基于前面两篇文章的讲解，首先创建一个透视投影的三维世界

这里视图矩阵和模型矩阵我们采用webgl的内置默认，只设置透视投影矩阵和视图矩阵

/** @type {HTMLCanvasElement} */
		//------------------------------------------------------创建画布
		// 获取canvas元素对象
		let canvas = document.getElementById('canvas');
		let ctx = document.getElementById('canvas')

		// 获取webgl绘图上下文
		const gl = canvas.getContext('webgl');
		if (!gl) {
			throw new Error('WebGL not supported');
		}

		canvas.width = 500;
		canvas.height = 500;
		gl.viewport(0, 0, canvas.width, canvas.height)

		// 设置背景色
		gl.clearColor(0.0, 0.0, 0.0, 1.0)
		gl.enable(gl.DEPTH_TEST);
		// 清空缓冲区
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

		const vertex = `
			attribute vec4 aPosition;
			uniform mat4 uPerspectiveMatrix;
			uniform mat4 uViewMatrix;
			attribute vec4 aColor;
			varying vec4 v_Color;
			void main() {
				gl_Position =  uPerspectiveMatrix  * uViewMatrix *   aPosition ;
				v_Color = aColor;
			}
		`
		const fragment = `
			precision highp float;
			varying vec4 v_Color;
			void main(){
				gl_FragColor = v_Color;
			}
		`

		// 创建program
		const program = initShader(gl, vertex, fragment)
		// 获取attribute变量的数据存储位置
		const aPosition = gl.getAttribLocation(program, 'aPosition');
		const aColor = gl.getAttribLocation(program, 'aColor');
		// 获取uniform变量的数据存储位置
		const uPerspectiveMatrix = gl.getUniformLocation(program, 'uPerspectiveMatrix');
		const uViewMatrix = gl.getUniformLocation(program, 'uViewMatrix');
		// 创建缓冲区对象
		const buffer = gl.createBuffer();
		// 绑定缓冲区对象
		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
		// 传入的数据
		const vertices = new Float32Array([
			// Z 为 -0.5的黄色三角形
			0.2, 0.3, -0.5, 1.0, 0.4, 0.4, 
			-0.3, -0.7, -0.5, 1.0, 1.0, 0.4,
			0.7, -0.7, -0.5, 1.0, 1.0, 0.4,
			// Z 为 -0.4的绿色三角形
			0.0, 0.5, -0.4, 0.4, 1.0, 0.4, 
			-0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
			0.5, -0.5, -0.4, 1.0, 0.4, 0.4,
			// Z 为 -0.5的蓝色三角形
			0.4, 0.7, -0.6, -0.4, 0.4, 1.4,  
			-0.1, -0.3, -0.6, 0.4, 0.4, 1.0,
			0.9, -0.3, -0.6, 1.0, 0.4, 0.4,
		])

		const BYTES = vertices.BYTES_PER_ELEMENT;
		// 开辟空间并写入数据
		gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
		// 缓冲区对象分配给attribute变量
		gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 6 * BYTES, 0)
		gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 6 * BYTES, 3 * BYTES)
		// 开启attribue变量
		gl.enableVertexAttribArray(aPosition)
		gl.enableVertexAttribArray(aColor)

		const perspectiveMatrix = createPerspective(150, ctx.width / ctx.height, 1, 100)
		gl.uniformMatrix4fv(uPerspectiveMatrix, false, perspectiveMatrix)

		const viewMatrix = createViewMatrix(
			new Float32Array([0.0, -0.1, 0.2]), // 视点位置
			new Float32Array([0.0, 0.0, 0.0]), // 目标点位置
			new Float32Array([0.0, 0.6, 0.0]), // 上方向
		)
		gl.uniformMatrix4fv(uViewMatrix, false, viewMatrix)

		// 开始绘制
		gl.drawArrays(gl.TRIANGLES, 0, 9)

// 透视投影矩阵
function createPerspective(fov, aspect, near, far) {
    fov = fov * Math.PI / 180;
    return new Float32Array([
      1/(aspect*Math.tan(fov / 2)), 0, 0, 0,
      0,                  1/(Math.tan(fov/2)),          0,  0,
      0,       0,         -(far+near)/(far-near),        -(2*far*near)/(far-near),
      0,       0,         -1 ,                          0,
    ])
  }

效果如下，三个大小一样，位置不同的三角形，经过透视投影后，根据 近大远小 原则显示在屏幕上

在这里插入图片描述

绘制立方体

下面将绘制这样一个立方体
在这里插入图片描述

⭐ 思考：如果采用drawArray方法进行绘制，会有什么不便，该如何解决？

使用drawArray方法进行绘制的话，每个面都需要两个三角形组成，需要6个顶点坐标；立方体共六个面，因此需要定义36个顶点。但实际上这些顶点被大量重复定义了，因为立方体总共只用了八个顶点而已。因此，我们采用drawElements，采用索引绘制。

根据坐标内插颜色

		/** @type {HTMLCanvasElement} */
		//------------------------------------------------------创建画布
		// 获取canvas元素对象
		let canvas = document.getElementById('canvas');
		let ctx = document.getElementById('canvas')

		// 获取webgl绘图上下文
		const gl = canvas.getContext('webgl');
		if (!gl) {
			throw new Error('WebGL not supported');
		}

		canvas.width = 500;
		canvas.height = 500;
		gl.viewport(0, 0, canvas.width, canvas.height)

		// 设置背景色
		gl.clearColor(0.0, 0.0, 0.0, 1.0)
		gl.enable(gl.DEPTH_TEST);
		// 清空缓冲区
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

		const vertex = `
			attribute vec4 aPosition;
			uniform mat4 uPerspectiveMatrix;
			uniform mat4 uViewMatrix;
			attribute vec4 aColor;
			varying vec4 v_Color;
			void main() {
				gl_Position = uPerspectiveMatrix  * uViewMatrix *   aPosition ;
				v_Color = aPosition;
			}
		`
		const fragment = `
			precision highp float;
			varying vec4 v_Color;
			void main(){
				gl_FragColor = v_Color;
			}
		`

		// 创建program
		const program = initShader(gl, vertex, fragment)
		// 获取attribute变量的数据存储位置
		const aPosition = gl.getAttribLocation(program, 'aPosition');
		const aColor = gl.getAttribLocation(program, 'aColor');
		// 获取uniform变量的数据存储位置
		const uPerspectiveMatrix = gl.getUniformLocation(program, 'uPerspectiveMatrix');
		const uViewMatrix = gl.getUniformLocation(program, 'uViewMatrix');

		// 创建顶点缓冲区对象
		const vertices = new Float32Array([
			1, 1, 1, // V0
			-1, 1, 1, // V1
			-1, -1, 1, // V2
			1, -1, 1, // V3
			1, -1, -1, // V4
			1, 1, -1, // V5
			-1, 1, -1, // V6
			-1, -1, -1, // V7
		])
		const buffer = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
		const BYTES = vertices.BYTES_PER_ELEMENT;
		gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
		gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0)
		gl.enableVertexAttribArray(aPosition)

		// 创建索引缓冲区对象

		const index = new Uint8Array([
			0, 1, 2, 0, 2, 3,    // 前
			0, 3, 4, 0, 4, 5,    // 右
			0, 5, 6, 0, 6, 1,    // 上
			1, 6, 7, 1, 7, 2,    // 左
			7, 4, 3, 7, 3, 2,    // 下
			4, 7, 6, 4, 6, 5     // 后
		]);
		const indexBuffer = gl.createBuffer();
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index, gl.STATIC_DRAW)
		const viewMatrix = createViewMatrix(
			new Float32Array([5.0,5.0, 5.0]), // 视点位置
			new Float32Array([0.0, 0.0, 0.0]), // 目标点位置
			new Float32Array([0.0, 1.0, 0.0]), // 上方向
		)
		const perspectiveMatrix = createPerspective(30, ctx.width / ctx.height, 1, 100)
		gl.uniformMatrix4fv(uPerspectiveMatrix,  false, perspectiveMatrix, )
		gl.uniformMatrix4fv(uViewMatrix,  false, viewMatrix, )
		// 开始绘制
		gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_BYTE, 0)

效果如下，一个根据顶点坐标内插颜色的立方体就这么形成了
在这里插入图片描述

每个面单独赋色

为了给每个面赋予不同的颜色，需要给每个面的四个顶点单独建立缓冲区并赋予颜色

let canvas = document.getElementById('canvas');
		let ctx = document.getElementById('canvas')

		// 获取webgl绘图上下文
		const gl = canvas.getContext('webgl');
		if (!gl) {
			throw new Error('WebGL not supported');
		}

		canvas.width = 500;
		canvas.height = 500;
		gl.viewport(0, 0, canvas.width, canvas.height)

		// 设置背景色
		gl.clearColor(0.0, 0.0, 0.0, 1.0)
		gl.enable(gl.DEPTH_TEST);
		// 清空缓冲区
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

		const vertex = `
			attribute vec4 aPosition;
			uniform mat4 uPerspectiveMatrix;
			uniform mat4 uViewMatrix;
			attribute vec4 aColor;
			varying vec4 v_Color;
			void main() {
				gl_Position = uPerspectiveMatrix  * uViewMatrix *   aPosition ;
				v_Color = aColor;
			}
		`
		const fragment = `
			precision highp float;
			varying vec4 v_Color;
			void main(){
				gl_FragColor = v_Color;
			}
		`

		// 创建program
		const program = initShader(gl, vertex, fragment)
		// 获取attribute变量的数据存储位置
		const aPosition = gl.getAttribLocation(program, 'aPosition');
		const aColor = gl.getAttribLocation(program, 'aColor');
		// 获取uniform变量的数据存储位置
		const uPerspectiveMatrix = gl.getUniformLocation(program, 'uPerspectiveMatrix');
		const uViewMatrix = gl.getUniformLocation(program, 'uViewMatrix');

		// 创建顶点缓冲区对象
		const vertices = new Float32Array([
			1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, // 前面

			1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, // 右面

			1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, // 上面

			-1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, // 左面

			-1, -1, 1, 1, -1, 1, 1, -1, -1, -1, -1, -1, // 下面

			1, -1, -1, 1, 1, -1, -1, 1, -1, -1, -1, -1 // 后面
		])
		const buffer = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
		const BYTES = vertices.BYTES_PER_ELEMENT;
		gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
		gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0)
		gl.enableVertexAttribArray(aPosition)

		// 创建颜色缓冲区对象
		const colors = new Float32Array([
			0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0,
			0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4,
			1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4,
			1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4,
			1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
			0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
		])

		const colorBuffer = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
		gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
		gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 0, 0);
		gl.enableVertexAttribArray(aColor)

		// 创建索引缓冲区对象
		const index = new Uint8Array([
			0, 1, 2, 0, 2, 3,      // 前
			4, 5, 6, 4, 6, 7,      // 右
			8, 9, 10, 8, 10, 11,   // 上
			12, 13, 14, 12, 14, 15,// 左
			16, 17, 18, 16, 18, 19,// 下
			20, 21, 22, 20, 22, 23,// 后
		])

		const indexBuffer = gl.createBuffer();
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, index, gl.STATIC_DRAW)
		const viewMatrix = createViewMatrix(
			new Float32Array([5.0, 5.0, 5.0]), // 视点位置
			new Float32Array([0.0, 0.0, 0.0]), // 目标点位置
			new Float32Array([0.0, 1.0, 0.0]), // 上方向
		)
		const perspectiveMatrix = createPerspective(30, ctx.width / ctx.height, 1, 100)
		gl.uniformMatrix4fv(uPerspectiveMatrix, false, perspectiveMatrix,)
		gl.uniformMatrix4fv(uViewMatrix, false, viewMatrix,)
		// 开始绘制
		gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_BYTE, 0)

在这里插入图片描述

总结

创建透视投影场景

绘制立方体

  • 根据坐标内插颜色

  • 每个面单独赋色

迦南giser
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas 旋转的3D立方体动画.rar
07-10
HTML5 Canvas 旋转的3D立方体动画，有纵深感的旋转立方体，渲染的很不错，旋转的动画效果流畅，十分不错，是研究HTML5 Canvas技术的好范例。经测试，IE11兼容，火狐或Chrome、Opera等都有完美表现。
WebGL入门(二十三)-绘制每个面指定颜色的立方体
点燃火柴的博客
03-31 663
绘制每个面指定颜色的立方体1.demo效果2.相关知识点2.1 每个面指定颜色原理2.2 定义顶点坐标、顶点颜色、顶点索引数组3.demo代码 1.demo效果 如上，绘制了不同面指定颜色的立方体 2.相关知识点 2.1 每个面指定颜色原理 前一篇文章中，是创建顶点信息的时候同时把顶点颜色信息也放在了顶点数组中，这样我们根据索引取到顶点后既可以获取坐标信息又可以获取颜色信息，但是如果你想将立方体的前表面（顶点v0-v1-v2-v3组成的面）涂成红色，将上表面（顶点v0-v5-v6-v1组成的面）涂成蓝色，
分享WebGL物体三维建模
通达的博客
02-22 972
WebGL物体三维建模
良哥汇总：WEB基于SVG图形绘制——手把手教你完成矢量示意图绘制
最新发布
hualinger的博客
05-10 1031
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 是一种用于描述二维图形的 XML 标记语言，与位图图像不同，SVG图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。 SVG 图形是可伸缩的，无需分辨率依赖，这意味着它们可以在不失真的情况下被放大或缩小。 SVG 广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。SVG 的主要特点 矢量图形：SVG 使用基于路径的矢量图形，这意味着图形可以无限放大而不失真。 可伸缩性：S
HTML5绘制一个3D立方体,HTML5/Canvas交互式3D立方体
weixin_32201711的博客
06-19 702
JavaScript语言：JaveScriptBabelCoffeeScript确定'use strict';var CSIZE = 500 /* canvas size */ ,OFF = .5 * CSIZE /* canvas origin offset */ ,VPOINT = 2 * CSIZE /* vanishing point */ ,_c = document.querySele...
canvas绘制立方体盒子
风如白话的博客
02-07 1087
基于canvas绘制立方体 length: 长 width: 宽 height: 高 id: canvas元素id color: 盒子颜色 // 基于canvas生成立方体 export function generateCubeByCanvas(length = 0, width = 0, height = 0, id = '', color) { const canvas = document.getElementById(id) const ctx = canvas.getConte
WebGL 从0到1绘制一个立方体
dabaooooq的博客
09-16 357
我们来绘制如下图所示的立方体（图右侧显示了立方体每个顶点的坐标），其8个顶点的颜色分别为白色、品红色（亮紫色）、红色、黄色、绿色、青色（蓝绿色）、蓝色、黑色。你也许知道，为每个顶点定义颜色后，表面上的颜色会根据顶点颜色内插出来，形成一种光滑的渐变效果（“色体”，相当于二维的“色轮”）。绘制三角形，我们都是调用gl.drawArrays（）方法来进行绘制操作的。考虑一下，如何用该函数绘制出一个立方体呢。我们只能使用gl.TRIANGLES、gl.TRIANGLE_STRIP或者gl.TRIANGLE_FAN模
OpenGL: OpenGL实现立体显示
Augusdi的专栏
07-23 3391
立体显示原理：设没有立体显示的模型视图矩阵ModelView为Mv,投影矩阵为Mp，则、物体空间的任何一点为P，则变换到屏幕坐标P*=Mp×Mv×P；注意前面已经说过opengl里面坐标列优先，所以矩阵都是右乘。左眼和右眼的变换都是由中间的变换矩阵变换而来，则立体显示中左眼的变换矩阵公式为：P(L)*=Ms(L) × Mp(L) × Mt(L) × Mv(L) × P；右眼的矩阵变换公式为：P(R
Three.js利用顶点绘制立方体的方法详解
11-28
在本教程中，我们将深入探讨如何使用Three.js库利用顶点坐标来绘制立方体。Three.js是一个基于WebGL的JavaScript库，它简化了在浏览器中创建3D图形的过程。在这个过程中，我们将创建一个立方体几何体，定义其顶点、...
旋转立方体 展开切换
09-08
标题“旋转立方体 展开切换”涉及到的是三维图形处理中的一个重要概念，即立方体的旋转与展开动画效果。在计算机图形学中，这种技术广泛应用于游戏开发、虚拟现实、可视化应用等领域。以下是对这个主题的详细解释： ...
MyCGTest_计算机图形学_旋转立方体_
09-29
在本项目"MyCGTest_计算机图形学_旋转立方体_"中，我们聚焦于一个核心概念：三维立方体的旋转及其动态颜色变化。这个程序通过编程实现了在屏幕上展示一个可以自由旋转的立方体，它不仅在空间中的四个轴（上、下、左...
HTML5多立方体3D翻转效果特效代码
03-20
在这个特效中，CSS3的rotateX、rotateY和rotateZ函数被用来实现立方体的三维旋转，从而产生翻转的效果。同时，transform-style属性设置为"preserve-3d"，保持子元素的3D空间，确保了立方体在翻转过程中的立体感。 3...
网页实现三维魔方
04-01
在网页上实现三维魔方是一项有趣的前端开发挑战，它结合了数学、图形学和交互设计。这个项目基于JavaScript，利用其强大的DOM操作能力和社区丰富的库，如Three.js或Pixi.js，来创建一个用户可以互动的3D模型。下面...
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
11-11 1509
【跟月影学可视化】学习笔记。我们知道立方体有8个顶点，6个面，在 WebGL 中，需要用 12 个三角形来绘制它。把每个面的顶点分开，需要 24 个顶点。 绘制 3D 图形与绘制 2D 图形有一点不一样，必须要开启深度检测和启用深度缓冲区。在 WebGL 中，可以通过 ，来开启深度检测。在清空画布的时候，也要用 ，来同时清空颜色缓冲区和深度缓冲区。 上面朝向我们的面应该是 颜色， WebGL 默认的剪裁坐标的 z 轴方向，的确是朝内的。WebGL 坐标系就是一个左手系而不是右手系。下面我们需要将 WebG
canvas动态绘制立方体带xyz坐标线
hjs_xxq的博客
11-25 1697
思路 动态绘制带xyz坐标线的立方体需要知道立方体共12条边 先绘制带箭头的xyz三条线 上代码 mounted() { let xNum = this.diagnosisMsg.score_info.score_x let yNum = this.diagnosisMsg.score_info.score_y let zNum = this.diagnosisMsg.score_info.score_z this.$nextTick(function () { this.lifangti(xNu
webgl——绘制一个旋转的彩色立方体（四）
jiegiser博客
03-06 1021
文章目录前言一、整体代码以及实现效果二、绘制步骤1.构建顶点数据2.通过顶点索引构建立方体总结 前言 前面文章介绍了如何通过多点来绘制图形，通过建立缓冲区对象，将多个数据传入到缓冲区中；然后 webgl 进行读取缓冲区中的数据进行渲染。上个例子绘制 “F” 的坐标点不是很多；但是如果我们绘制一个立方体。如果还跟之前一样的绘制方式；立方体的每一个面由两个三角形组成，每个三角形有三个顶点，所以每个月需要有六个顶点，那么顶点数据需要有 36 个，我们会发现其实我们只需要用 8 个顶点来进行绘制立方体，但是如何
canvas 3D 正方形
Get old
07-30 620
3D立体 正方形 figure{ font-size: 50px; line-height: 196px; color: #A6A6A6; text-align: center; background: hsla(255,100%,100%,0.1);
WebGL：基础练习 / 简单学习 / demo / canvas3D
snowball的博客
11-03 1045
在绘制过程中，我们首先编译和链接了顶点着色器和片元着色器，并创建了一个着色器程序。在这个 Demo 中，我们首先创建了一个 WebGL 上下文，并定义了一个顶点着色器和一个片元着色器。接着，我们创建了一个着色器程序对象，并将顶点着色器和片元着色器附加到这个程序对象上，并进行链接。接着，我们创建了着色器程序对象，并将顶点着色器和片元着色器附加到这个程序对象上，并进行链接。需要注意的是，绘制图形时，我们使用的是 gl.TRIANGLE_FAN，它表示绘制一个三角形扇形，也就是一个由五个三角形组成的正方形。
可视化系列讲解：css3D：如何绘制正方体，长方体等
wangyuiba1314的博客
12-31 2146
前端可视化系列讲解：css3D，svg，canvas等
超图SupMap WebGL三维地球和Mars3D三维地图的差异
07-08
超图SupMap WebGL三维地球和火星Mars3D三维地图之间的差异主要体现在以下几个方面： 1. 地理范围： - SupMap WebGL三维地球：SupMap覆盖全球范围，可以展示地球上的任意地理位置，包括陆地、海洋等。 - 火星Mars3D三维地图：Mars3D专注于火星表面的展示，仅涵盖火星的地理范围，不包括地球上的其他区域。 2. 数据内容： - SupMap WebGL三维地球：SupMap提供多种地图数据源，包括卫星影像、地形数据、建筑物模型等。用户可以在SupMap中查看全球范围内的地理数据，并支持自定义添加数据。 - 火星Mars3D三维地图：Mars3D主要提供火星表面的地理数据，包括高清全景图像、地形数据和其他相关信息。它专注于火星表面的展示和分析。 3. 应用领域： - SupMap WebGL三维地球：SupMap的应用领域较为广泛，可用于城市规划、地理信息系统、军事仿真、旅游导航等方面。 - 火星Mars3D三维地图：Mars3D主要面向天文学、航天科学等领域，用于火星探索、科学研究等目的。 综上所述，超图SupMap WebGL三维地球和火星Mars3D三维地图在地理范围、数据内容和应用领域上存在差异，各自具有不同的特点和用途。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值