253Echarts - 3D 曲面（皮革材质）

效果图

源代码

var TILING = [4, 2];var heightImg = new Image();
heightImg.onload = update;
heightImg.src = './data-gl/asset/leather/leather_height.jpg';function update() {var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');var width = canvas.width = heightImg.width;var height = canvas.height = heightImg.height;ctx.drawImage(heightImg, 0, 0, width, height);var imgData = ctx.getImageData(0, 0, width, height).data;function getScale(u, v) {u = (u / Math.PI * 0.5 + 0.5) * TILING[0];v = v / Math.PI * TILING[1];u = Math.floor((u - Math.floor(u)) * (width - 1));v = Math.floor((1 - v + Math.floor(v)) * (height - 1));var idx = v * width + u;return 1 + imgData[idx * 4] / 255 / 20;}myChart.setOption({xAxis3D: {type: 'value',min: -1.5,max: 1.5},yAxis3D: {type: 'value',min: -1.5,max: 1.5},zAxis3D: {type: 'value',min: -1.5,max: 1.5},grid3D: {show: false,environment: 'none',axisPointer: {show: false},postEffect: {enable: true,screenSpaceAmbientOcclusion: {enable: true,radius: 10,intensity: 2,quality: 'high'},screenSpaceReflection: {enable: false},depthOfField: {enable: false,focalRange: 10,fstop: 4}},temporalSuperSampling: {enable: true},light: {main: {intensity: 2,shadow: true},ambient: {intensity: 0},ambientCubemap: {texture: './data-gl/asset/pisa.hdr',exposure: 1,diffuseIntensity: 1,specularIntensity: 2}},viewControl: {distance: 80// projection: 'orthographic'}},series: [{type: 'surface',parametric: true,shading: 'realistic',silent: true,wireframe: {show: false},realisticMaterial: {// detailTexture: 'asset/leather/leather_albedo.jpg',roughness: './data-gl/asset/leather/leather_roughness.jpg',normalTexture: './data-gl/asset/leather/leather_normal.jpg',textureTiling: TILING},itemStyle: {color: '#300'},parametricEquation: {u: {min: -Math.PI,max: Math.PI,step: Math.PI / 100},v: {min: 0.4,max: Math.PI - 0.4,step: Math.PI / 100},x: function (u, v) {return Math.sin(v) * Math.sin(u) * getScale(u, v);},y: function (u, v) {return Math.sin(v) * Math.cos(u) * getScale(u, v);},z: function (u, v) {return Math.cos(v) * getScale(u, v);}}}]});
}

253Echarts - 3D 曲面（皮革材质）相关推荐

echarts-gl中3d曲面UV参数详解
文章目录前言什么是UV echarts中的UV解析利用UV创建模型利用UV确定贴图位置前言在echart-gl中3D曲面的数据除曲面方程及普通数据[x,y,z]外,还有一个带有UV坐标系的 ...
线光谱共焦如何检测3D曲面玻璃
立仪科技光谱共焦技术是利用光的波长信息测量距离的.由光源射出一束宽光谱的复色光(呈白色),通过色散镜头发生光谱色散,形成不同波长的单色光.每一个波长的焦点都对应一个距离值.测量光射到物体表面被反射回来 ...
python使用matplotlib可视化3D曲面图、曲面图表示一个指定的因变量y与两个自变量x和z之间的函数关系
python使用matplotlib可视化3D曲面图.曲面图表示一个指定的因变量y与两个自变量x和z之间的函数关系目录
Python使用matplotlib进行3D可视化分析：3d柱状图、3d直方图、3d线框图、3d曲面图、3d翼面图(莫比乌斯环)
Python使用matplotlib进行3D可视化分析:3d柱状图.3d直方图.3d线框图.3d曲面图.3d翼面图(莫比乌斯环) 目录
PyTorch深度学习——PyCharm中使用matplotlib画3D曲面图
本篇仅针对使用matplotlib画3D曲面图,其他类型的3D图可根据本实例举一反三进行绘制. 具体步骤: 1.Pycharm如果没有matplotlib,第一部需要先安装matplotlib 点击F ...
ThreeJS FBXLoader 加载3D文件，材质消失，已解决
ThreeJS FBXLoader 加载3D文件,材质消失,已解决 ThreeJS FBXLoader 加载3D文件,材质消失直接贴代码 ThreeJS FBXLoader 加载3D文件,材质消失 ...
【Unity3D】材质 Material ( 材质简介 | 创建材质 | 设置材质属性 | 对 3D 物体应用材质 | 资源拖动到 Inspector 检查器中的 Material 属性中 )
文章目录一.材质 Material 简介二.创建材质三.设置材质属性四.对 3D 物体应用材质五.资源拖动到 Inspector 检查器中的 Material 属性中一.材质 Materi ...
【数据挖掘重要笔记day30】3D图的绘制：3D散布图、3D曲面图
文章目录 3D图形的绘制介绍 3D散布图 3D曲面图 3D图形的绘制介绍 2D图形需要两个轴:x轴和y轴 3D图形需要x,y,z三个轴 plt和sns画不出来3D图形,没有这个功能需要使用的是 ...
Ogre 3D程序设计 Ogre材质1
"材质(material)",材质是一个很基本的术语,表示你的物体对光的反射方式.但是对它的实现并不像其解释这样简单,我们会用这一章节进行详细地介绍Ogre中相关的技术. 我们刚才 ...

253Echarts - 3D 曲面（皮革材质）

效果图

源代码

253Echarts - 3D 曲面（皮革材质）相关推荐

最新文章

热门文章