Vue3 Echarts 3D立方体柱状图实现教程

已于 2025-04-30 16:51:45 修改
阅读量907 收藏 9
点赞数 9
文章标签： echarts 3d 信息可视化
于 2025-04-30 16:51:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sd1sd2/article/details/147634042
版权

文章目录

前言

在前端开发的数据可视化场景中，ECharts 是一个强大且灵活的工具，它能创建各种复杂而美观的图表。本文将详细阐述如何利用 ECharts实现3D立方体柱状图

在这里插入图片描述

一、实现原理

3D立方体柱状图实现原理跟上一篇文章Vue3 Echarts 3D圆柱体柱状图实现
，实现方式是类似的，总共分3个部分组合合成上下2个菱形面+中间基础柱状图，基础柱状图又可根据实际需要拆成左右2个柱状图组合而成或者通过单个柱子水平线性渐变模拟中间棱线。

在这里插入图片描述

如上图所示上下2个独立菱形面往普通柱状图靠，调到合适位置变成如下效果：

在这里插入图片描述

上下两个菱形可通过 echarts ——series—— type: “pictorialBar” 自定义图形实现，请查看下章节介绍

基础柱状图通过线性渐变颜色模拟菱线，核心代码：

{
      type: "bar",
      barWidth: 50, //柱子宽度
      itemStyle: {
        //柱子样式
        color: {
          //渐变颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,//水平方向
          y2: 0,
          colorStops: [
          { offset: 0, color: "rgba(57, 206, 255, 1)" },
          { offset: 0.49, color: "rgba(57, 206, 255, 1)" },
          { offset: 0.50, color: "rgba(57, 206, 255, 0.9)" },
          { offset: 0, color: "rgba(57, 206, 255, 1)" },
          ],
        },
      }

上述代码通过水平渐变方式使得柱状图正中间1%宽度颜色透明度降低0.1模拟菱线。

二、series ——type: “pictorialBar” 简介

type: “pictorialBar” 是 ECharts 中的一种特殊柱状图类型，它允许使用自定义图形（如图片、形状）来代替传统的柱状条，为数据可视化增添更多创意和灵活性。

type: "pictorialBar"也被叫作象形柱图。它首先是个柱状图，但是柱状图的柱子并不显示。这些柱子我们称为『基准柱（reference bar）』，根据基准柱来定位和显示各种象形图形（包括图片）。

每个象形图形根据基准柱的定位，是通过 symbolPosition、symbolOffset 来调整其于基准柱的相对位置。

2.1 常用属性

  • symbol 图形类型，默认圆形

    可选值 ‘circle’（圆形）, ‘rect’（直角长方形）, ‘roundRect’（圆角长方形）, ‘triangle’（三角形）, ‘diamond’（菱形）, ‘pin’（漏斗）, ‘arrow’（箭头）, ‘none’（无）

  • symbolSize 图形的大小，默认值 [‘100%’, ‘100%’]

可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10，也可以设置成诸如 10 这样单一的数字，表示 [10, 10]。
可以设置成绝对值（如 10），也可以设置成百分比（如 ‘120%’、[‘55%’, 23]）。

  • symbolPosition 图形的定位位置

可选择 start’：图形边缘与柱子开始的地方内切，‘end’：图形边缘与柱子结束的地方内切。‘center’：图形在柱子里居中。

  • symbolOffset 图形相对于原本位置的偏移，默认[0, 0]

  • data 系列中的数据内容数组。数组项通常为具体的数据项。

更多属性可以查阅官方文档

本例需求通过上面几个属性我们就能构建一个菱形面

例如：

 {
      type: "pictorialBar",
      symbol:'diamond',//菱形
      symbolSize: [50, 22],//50x22尺寸
      symbolOffset: [0, -11],//向上偏移11px
      symbolPosition:'end',//位于顶部
 }

三、代码实战

以vue3为代码为示例

3.1 封装一个echarts通用组件 echarts.vue

echarts.vue

<template>
	<div class="echarts-box">
		<div ref="echartRef" class="charts" ></div>
	</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick, markRaw } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
	// 图表配置
	data: {
		type: Object,
		default: () => {},
	},
});
const echartRef = ref();

let dom = null;

//设置图表配置
const setOptions = (options) => {
	//清除画布
	dom && dom.clear();
	//重新渲染
	dom && dom.setOption(options);
};


watch(
	() => props.data,
	(val) => {
		nextTick(() => {
			//默认关闭动画
			setOptions({animation: false,...val});
		});
	},
	{ deep: true, immediate: true }
);
const emits= defineEmits(['click'])
onMounted(() => {
	//初始化
	dom = markRaw(echarts.init(echartRef.value));
	//点击事件
    dom.on('click',  (param)=> {
		emits('click',param)
	  } )
});
onBeforeUnmount(() => {
	//离开销毁
	echarts.dispose(dom);
	dom = null;
});

defineExpose({
	setOptions,
});
</script>
<style lang="scss" scoped>
.echarts-box {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.charts {
	width: 100%;
	height: 100%;
}
</style>

上述代码封装了一个echarts通用组件，只需传入data图表配置数据就会重新渲染，需要注意的是组件默认继承父元素的宽高（100%），所以父元素需要设置尺寸。

3.2 实现一个立方体柱状图

（1）首先实现一个基础柱状图

demo.vue

<template>
  <div class="container">
    <div class="echarts-view">
      <Echarts :data="data" />
    </div>
  </div>
</template>
<script setup>
import Echarts from "./echarts.vue";
import { ref } from "vue";

const data = ref({
  //位置
  grid: {
    left: "5%",
    right: "5%",
    bottom: "10%",
    top: "15%",
  },
  //提示框
  tooltip: {},
  //图例
  legend: {
    show: true,
    right: "5%",
    textStyle: {
      color: "#fff",
      fontSize: 14,
    },
  },
  //x轴
  xAxis: {
    type: "category",
    //坐标轴轴线
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(0, 176, 255,0.3)",
      },
    },
    //刻度
    axisTick: {
      show: false,
    },
    //分割线
    splitLine: {
      show: false,
    },
    // x轴文字
    axisLabel: {
      color: "#D8E6FF",
      fontSize: 14,
      margin: 15,
    },
    data: [
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
      "星期日",
    ],
  },
  //y轴
  yAxis: {
    name: "单位：元", //单位文字
    nameTextStyle: {
      //单位样式
      color: "#BCD0F4",
      nameLocation: "start",
      fontSize: 14,
    },
    nameGap: 40, //单位与y轴距离
    type: "value",
    //分割线
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(0, 176, 255, 0.2)",
        type: "dashed",
      },
    },
    //坐标轴轴线
    axisLine: {
      show: false,
    },
    //刻度数值文字样式
    axisLabel: {
      color: "#BCD0F4",
      fontSize: 14,
    },
  },
  //数据
  series: [
    //中间柱状图
    {
      type: "bar",
      barWidth: 50, //柱子宽度
      itemStyle: {//柱子样式
        color:'rgba(57, 206, 255, 1)'
      },
      name: "收入",
      data: [200, 500, 300, 250, 360, 700, 556],
    },
  ],
});
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #0a2270;
  align-items: center;
}
.echarts-view {
  height: 700px;
  width: 1200px;
}
</style>

运行效果：

在这里插入图片描述

上述代码渲染一个最基础的柱状图

（2）添加立方体棱线

修改柱子颜色为渐变

 ......
 ......
 {
      type: "bar",
      barWidth: 50, //柱子宽度
      itemStyle: { //柱子样式
        color: {
          //渐变颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,//水平渐变
          y2: 0,
          colorStops: [
          { offset: 0, color: "rgba(57, 206, 255, 1)" },
          { offset: 0.49, color: "rgba(57, 206, 255, 1)" },
          { offset: 0.50, color: "rgba(57, 206, 255, 0.9)" },//降低透明度模拟棱线
          { offset: 0, color: "rgba(57, 206, 255, 1)" },
          ],
        },
      },
      name: "收入",
      data: [200, 500, 300, 250, 360, 700, 556],
  },
.....
.....

运行效果：
在这里插入图片描述

（3）添加上下2个菱形平面

（底面可以根据实际情况选择是否添加）

 ......
 ......
 //中间基础柱状图
 {
      type: "bar",
      barWidth: 50, //柱子宽度
      itemStyle: { //柱子样式
        color: {
          //渐变颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,//水平渐变
          y2: 0,
          colorStops: [
          { offset: 0, color: "rgba(57, 206, 255, 1)" },
          { offset: 0.49, color: "rgba(57, 206, 255, 1)" },
          { offset: 0.50, color: "rgba(57, 206, 255, 0.9)" },//降低透明度模拟棱线
          { offset: 0, color: "rgba(57, 206, 255, 1)" },
          ],
        },
      },
      name: "收入",
      data: [200, 500, 300, 250, 360, 700, 556],
      //顶部菱形面
    {
      type: "pictorialBar",
      symbol:'diamond',
      symbolSize: [50, 22],
      symbolOffset: [0, -11],//向上偏移菱形高度一半
      symbolPosition:'end',
      z: 12,
      itemStyle: {
        color: props.pictorialBarColor[0],
      },
      name: "收入",
      data: [200, 500, 300, 250, 360, 700, 556],
    },
    //底部菱形面
    {
      type: "pictorialBar",
      symbol:'diamond',
      symbolSize: [50, 15],
      symbolOffset: [0, 7.5],向上偏移菱形高度一半
      z: 12,
      itemStyle: {
        color: props.pictorialBarColor[1],
      },
      name: "收入",
      data: [200, 500, 300, 250, 360, 700, 556],
    },

运行效果：

在这里插入图片描述

底部菱形不加效果：

在这里插入图片描述

完整代码：

bar-3d.vue （立方体柱状图组件封装）

<!-- 立方体柱状图 -->
<template>
  <div class="bar-wrap">
    <Echarts :data="data" />
  </div>
</template>

<script setup>
import Echarts from "../components/echarts.vue";
import { computed } from "vue";
const props = defineProps({
  grid: {
    type: Object,
    default: () => ({
      left: "5%",
      right: "5%",
      bottom: "10%",
      top: "15%",
    }),
  },
  legend:{
    type: Object,
    default: () => {},
  },
  series: {
    type: Object,
    default: () => {},
  },
  xAxis: {
    type: Array,
    default: () => {},
  },
  yAxis: {
    type: Object,
    default: () => {},
  },
  //单位
  unit: {
    type: String,
    default: "",
  },
  //上下菱形面颜色
  pictorialBarColor: {
    type: Array,
    default: () => ["#21F3FF", " rgba(33, 243, 255,0.8)"],
  },
});

//echarts配置
const data = computed(() => {
  let { name, data } = props.series;

  //series配置处理
  let seriesData = [
    //中间柱状图
    {
      type: "bar",
      barWidth: 50, //柱子宽度
      barGap:0,

      itemStyle: {
        //柱子样式
        color: {
          //渐变颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
          { offset: 0, color: "rgba(57, 206, 255, 1)" },
          { offset: 0.49, color: "rgba(57, 206, 255, 1)" },
          { offset: 0.50, color: "rgba(57, 206, 255, 0.9)" },
          { offset: 0, color: "rgba(57, 206, 255, 1)" },
          ],
        },
      },
      ...props.series,

    },
    //顶部菱形面
    {
      type: "pictorialBar",
      symbol:'diamond',
      symbolSize: [50, 22],
      symbolOffset: [0, -11],
      symbolPosition:'end',
      z: 12,
      itemStyle: {
        color: props.pictorialBarColor[0],
      },
      name,
      data: data.map((item) => {
        return {
          value: item,
          itemStyle: {
            opacity: item > 0 ? 1 : 0, //值为0时隐藏
          },
        };
      }),
    },
    //底部菱形面
    {
      type: "pictorialBar",
      symbol:'diamond',
      symbolSize: [50, 15],
      symbolOffset: [0, 7.5],
      z: 12,
      itemStyle: {
        color: props.pictorialBarColor[1],
      },
      name,
      data: data.map((item) => {
        return {
          value: item,
          itemStyle: {
            opacity: item > 0 ? 1 : 0,
          },
        };
      }),
    },
  ];

  return {
    grid: props.grid,
    tooltip: {},
    legend: {
      show: true,
      right: "5%",
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      ...props.legend
    },
    //x轴
    xAxis: {
      type: "category",
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(0, 176, 255,0.3)",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      // x轴文字
      axisLabel: {
        color: "#D8E6FF",
        fontSize: 14,
        margin: 15,
      },
      data: props.xAxis,
    },
    //y轴
    yAxis: {
      name: props.unit ? `单位：${props.unit}` : "", //单位文字
      nameTextStyle: {
        //单位样式
        color: "#BCD0F4",
        nameLocation: "start",
        fontSize: 14,
      },
      nameGap: 40, //单位与y轴距离
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(0, 176, 255, 0.2)",
          type: "dashed",
        },
      },
      axisLine: {
        show: false,
      },
      //刻度数值样式
      axisLabel: {
        color: "#BCD0F4",
        fontSize: 14,
      },
      ...props.yAxis,
    },
    series: seriesData,
  };
});
</script>
<style scoped lang="scss">
.bar-wrap {
  width: 100%;
  height: 100%;
}
</style>

页面调用

demo.vue

<template>
  <div class="container">
    <div class="echarts-view">
      <Bar3D unit="元" :xAxis="xAxisData" :series="seriesData" />
    </div>
  </div>
</template>
<script setup>
import Bar3D from "./components/bar-3d2.vue";
import { ref } from "vue";

//x轴标签
const xAxisData = ref([
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
  "星期日",
]);

//数据
const seriesData = ref({
  name: "收入",
  data: [200, 500, 300, 250, 360, 700, 556],
});




</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #0a2270;
  align-items: center;
}
.echarts-view {
  height: 700px;
  width: 1200px;
}
</style>

3.3 实现一个渐变立方体柱状图

需求升级需要实现一个从上到下渐变透明的立方体柱状图如下图所示：

在这里插入图片描述

该需求渐变方向是垂直方向，而前面例子我们用水平渐变方向来模拟菱线，柱状图无法同时使用2个方向来实现渐变效果。显然一个柱状图无法满足需求。这个时候我们需要使用2个小柱状图左右合并成一个大柱状图，而贴合的分界线由于颜色的差异形成一条菱线。再者去掉底部菱形。

在这里插入图片描述
设置柱状图间距为0变为

在这里插入图片描述

核心代码：

//左边柱状图
    {
      type: "bar",
      barWidth: 25, //柱子宽度
      barGap:0,//设置左右柱状图间距为0
      itemStyle: {
        //柱子样式
        color: {
          //渐变颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,//垂直方向渐变
          colorStops: [
          { offset: 0, color: "rgba(57, 206, 255, 1)" },
            { offset: 1, color: "rgba(45, 72, 173, 0.1)" },
          ],
        },
      },
      name: "收入",
      data: [200, 500, 300, 250, 360, 700, 556],
    },
    //右边柱状图
    {
      type: "bar",
      barWidth: 25, //柱子宽度
      itemStyle: {
        //柱子样式
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(36, 201, 255, 1)" },
            { offset: 1, color: "rgba(20, 43, 128, 0.2)" },
          ],
        },
      },
      name: "收入",
      data: [200, 500, 300, 250, 360, 700, 556],
    },
    //顶部圆面
    {
      type: "pictorialBar",
      symbol:'diamond',
      .....
      .....

完整代码：

bar-3d.vue （立方体柱状图（垂直渐变）组件封装）

<!-- 柱状图 -->
<template>
  <div class="bar-wrap">
    <Echarts :data="data" />
  </div>
</template>

<script setup>
import Echarts from "../components/echarts.vue";
import { computed } from "vue";
const props = defineProps({
  grid: {
    type: Object,
    default: () => ({
      left: "5%",
      right: "5%",
      bottom: "10%",
      top: "15%",
    }),
  },
  legend:{
    type: Object,
    default: () => {},
  },
  series: {
    type: Object,
    default: () => {},
  },
  xAxis: {
    type: Array,
    default: () => {},
  },
  yAxis: {
    type: Object,
    default: () => {},
  },
  //单位
  unit: {
    type: String,
    default: "",
  },
  //上下圆面颜色
  pictorialBarColor: {
    type: Array,
    default: () => ["#21F3FF", "rgba(31,97,234,0.4)"],
  },
});

//echarts配置
const data = computed(() => {
  let { name, data } = props.series;

  //series配置处理
  let seriesData = [
    //左边柱状图
    {
      type: "bar",
      barWidth: 25, //柱子宽度
      barGap:0,

      itemStyle: {
        //柱子样式
        color: {
          //渐变颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
          { offset: 0, color: "rgba(57, 206, 255, 1)" },
            { offset: 1, color: "rgba(45, 72, 173, 0.1)" },
          ],
        },
      },
      ...props.series,

    },
    //右边柱状图
    {
      type: "bar",
      barWidth: 25, //柱子宽度
      itemStyle: {
        //柱子样式
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(36, 201, 255, 1)" },
            { offset: 1, color: "rgba(20, 43, 128, 0.2)" },
          ],
        },
      },
      ...props.series,
    },
    //顶部菱面
    {
      type: "pictorialBar",
      symbol:'diamond',
      symbolSize: [50, 22],
      symbolOffset: [0, -11],
      symbolPosition:'end',
    
      z: 12,
      itemStyle: {
        color: props.pictorialBarColor[0],
      },
      name,
      data: data.map((item) => {
        return {
          value: item,
          itemStyle: {
            opacity: item > 0 ? 1 : 0, //值为0时隐藏
          },
        };
      }),
    },
  ];

  return {
    grid: props.grid,
    tooltip: {},
    legend: {
      show: true,
      right: "5%",
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      ...props.legend
    },
    //x轴
    xAxis: {
      type: "category",
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(0, 176, 255,0.3)",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      // x轴文字
      axisLabel: {
        color: "#D8E6FF",
        fontSize: 14,
        margin: 15,
      },
      data: props.xAxis,
    },
    //y轴
    yAxis: {
      name: props.unit ? `单位：${props.unit}` : "", //单位文字
      nameTextStyle: {
        //单位样式
        color: "#BCD0F4",
        nameLocation: "start",
        fontSize: 14,
      },
      nameGap: 40, //单位与y轴距离
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(0, 176, 255, 0.2)",
          type: "dashed",
        },
      },
      axisLine: {
        show: false,
      },
      //刻度数值样式
      axisLabel: {
        color: "#BCD0F4",
        fontSize: 14,
      },
      ...props.yAxis,
    },
    series: seriesData,
  };
});
</script>
<style scoped lang="scss">
.bar-wrap {
  width: 100%;
  height: 100%;
}
</style>

总结

通过组合使用 type: bar 和 type: "pictorialBar"灵活应用我们成功实现了 3D 立方体柱状图。你可以根据实际需求，进一步调整图表的样式和配置，创造出更加美观和实用的可视化效果。对于3D柱状图的实现方法还有其他的方式例如结合three.js 3D渲染引擎来实现等，而本文介绍的方法是相对比较简单的方式，具体开发中可根据实际需要进行选择。

vue echarts绘制伪3d柱状图
qq_42749720的博客
11-03 595
vue echarts绘制伪3d柱状图。
echarts使用自定义图形实现3D柱状图
Li_na_na01的博客
07-10 1104
echarts使用自定义图形实现3D柱状图。
vue2+echarts实现3d柱状图
qq_39500287的博客
10-12 785
【代码】vue2+echarts实现3d柱状图。
使用 Vue 2 和 ECharts 构建 3D 柱状图
mmc123125的博客
11-25 938
在你的 Vue 项目中创建一个新的组件，用于展示 3D 柱状图。，你应该能够看到一个展示 3D 柱状图的页面。来引入和显示这个 3D 图表组件。在你的 Vue 项目中安装。现在，打开浏览器并访问。创建一个父组件或修改。
【Vue ECharts开发】实现颜色渐变的伪3D柱状图
柯晓楠
05-27 1398
1. 效果演示 2. 需求分析 绘制图形需要使用 echarts.graphic.extendShape() 方法 和 echarts.graphic.registerShape() 方法； 颜色渐变需要实例化 echarts.graphic.LinearGradient() 对象； 3. 代码实现 安装ECharts依赖： npm i echarts --save 页面模板： <template> <div class="echarts-demo"> <d
Echarts 3D立体柱状图(源码+例图)
BlueRainbow9的博客
10-24 2991
Echarts 3D立体柱状图，3D长方体柱状图，直接cope源码可用(源码+例图)
进阶版：vue2+echarts实现3d柱状图，数据量大做优化
qq_39500287的博客
10-13 353
【代码】进阶版：vue2+echarts实现3d柱状图，数据量大做优化。
【Echarts 实战指南】震撼 3D 立体渐变柱状图来袭
weixin_52814911的博客
10-18 395
ECharts 3D立体渐变柱状图因其强大的数据可视化功能而被广泛应用于数据大屏等多种场景。
QT控件 参考Qt的PIMPL设计模式实现使用QWidget控件绘制3D饼状图表和3D柱状图表，使用QChartView绘制圆柱体图表
每个文章的示例都可以在下载资源中找到源码，有任何问题或修改可以左下角的QQ名片私聊联系.
04-29 187
工作中之前遇到了绘制3D饼状图表的需求，通过Qt 实现3维饼状图 一文，成功迅速解决问题，现在闲下来了，之前看QtTreePropertyBrowser库的源代码，就想着学习学习Qt的PIMPL模式，于是就参照PIMPL模式实现通过QWidget控件的paintEvent函数重新绘制3D饼状图表和3D柱状图表统计数据的显示效果， 而使用QChartView绘制圆柱体图表完全是取巧了，为了紧急完成工作采用的方法，实际上使用3D柱状图表显示统计数据更加合理。
超级好用的​​参数化3D CAD 建模​​图形库 （CadQuery库介绍）
yuanpan的专栏
04-28 926
​ 使用 Python 创建精确的 3D 模型。​：STL、STEP、OBJ、SVG 等，兼容主流 CAD 软件（如 FreeCAD、SolidWorks）。​：可结合 NumPy、Matplotlib 等库进行高级计算和可视化。​ 库，允许用户通过编写代码（而不是传统 GUI）来创建精确的 ​。​：支持变量、循环、条件判断，便于快速迭代设计。​：类似 jQuery 的语法，代码简洁直观。​：底层使用工业级几何引擎，确保高精度建模。​ 等场景，提供强大的 ​。​ 的强大工具，适合 ​。
Locate 3D：Meta出品自监督学习3D定位方法
家鸽的代码屋
04-30 1173
我们提出了 Locate 3D，这是一种可根据指代表达（如“沙发和灯之间的小咖啡桌”）在三维场景中定位物体的模型。Locate 3D 在标准的指代定位基准测试中创下了新的最先进水平，并展现出强大的泛化能力。值得注意的是，Locate 3D 可直接处理传感器观测流（带位姿的 RGB-D 帧），从而支持在机器人和增强现实设备上的实际部署。我们方法的关键是 3D-JEPA，这是一种新颖的自监督学习（SSL）算法，适用于传感器点云。
MATLAB画出3d的常见复杂有机分子和矿物的分子结构
SmartGridequation的博客
04-28 592
你可以将上述代码复制到 MATLAB 编辑器中运行，就能看到苯分子和氯化钠分子的 3D 结构，不同原子用不同颜色的球体表示。如果需要绘制其他分子，只需按照相同的方式定义原子坐标、原子类型和键连接关系即可。你可以把上述代码复制到 MATLAB 编辑器中运行，这样就能看到硬脂酸和尿素的 3D 分子结构，不同原子会用不同颜色的球体表示。
QT Quick 3D 渲染之场景构建(一)
一个大佬的博客
04-27 489
【代码】QT Quick 3D 渲染之场景构建(一)
ShaderToy学习笔记 04.绘制多个3D对象
weixin_44539328的博客
04-28 385
float d;vec3 color;
【3D基础】深入解析OBJ与MTL文件格式：Blender导出模型示例及3D开发应用
一个AR程序猿的博客（EQ-雪梨蛋花汤）
04-28 1090
本文以**Blender**导出的立方体模型为例，详细讲解OBJ与MTL文件每一部分的含义与使用规范，帮助读者深入理解obj文件底层结构，为后续游戏开发、3D渲染打下扎实基础。
用于实时辐射场渲染的3D高斯溅射——3D Gaussian Splatting for Real-Time Radiance Field Rendering
最新发布
weixin_51454889的博客
04-30 558
本周的工作重点是研究论文《用于实时辐射场渲染的3D高斯溅射》，深入探讨了其提出的3D Gaussian Splatting方法及其在实时渲染中的应用。该方法通过引入3D Gaussian模型和Splatting技术，突破了传统三维场景表示方法的局限性，尤其是在渲染速度和图像质量之间的权衡上表现优异。论文详细介绍了3D Gaussian的数学定义及其在三维几何建模中的优势，并通过光栅化技术将三维场景投影到二维图像，实现了高效的渲染过程。
机器视觉2D码垛和机器视觉3D码垛的区别
视觉人机器视觉的博客
04-30 96
机器视觉2D码垛和机器视觉3D码垛的区别
导入使用 Blender 创建的 glTF/glb 格式的 3D 模型
weixin_42070282的博客
04-28 964
接下来，启动 Unity，选择 [Assets]->[Import Package]-> [Custom Package]，然后选择您刚刚下载的“UniGLTF”文件。在 Blender 中，它现在是 “ver.2.8”，现在可以以 glTF 格式导出。此外，如果您检查材质，您可以看到 Blender 中设置的纹理被分配给 “反照率” 和 “法线贴图”。然后，选择要导出的对象，依次选择 [文件] - > [导出] >- [glTF2.0]。简而言之，它是一种通用格式，可以轻松实现可互作的 3D 表示。
神经辐射场（NeRF）技术解析：3D重建与虚拟世界的未来
layneyao的博客
04-25 1880
神经辐射场（NeRF）技术解析：3D重建与虚拟世界的未来
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pixle0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值