threejs,绘制测井曲线\变径管道\辅助网格方法

在线查看
效果图：

代码已上传npm官方仓库
npm install gh-three-tools
部分代码

    // 创建场景var scene = new THREE.Scene();// 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置var axisHelper = new THREE.AxesHelper(120);scene.add(axisHelper);//点光源var point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 300); //点光源位置scene.add(point); //点光源添加到场景中//环境光var ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var k = width / height; //窗口宽高比var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大//创建相机对象var camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000)//new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); //前四个参数定义的是拍照窗口大小camera.position.set(200, 300, 200); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)var renderer = new THREE.WebGLRenderer({antialias: true});var anisotropy = renderer.capabilities.getMaxAnisotropy();renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(width, height); //设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色document.body.appendChild(renderer.domElement); //body元素中插入canvas对象// 井轨迹 curve 对象var curve = new THREE.CatmullRomCurve3([[10, 20, 15],[16, 10, 20],[10, 0, 35],[45, 30, 20],[86, 60, 63],[93, 20, 67],[10, 60, 55]].map(el => new THREE.Vector3(...el)));// 设置参数var radiusArr = []var toMin = 3var toMax = 5.5var dataMin = 0var dataMax = 20valuesArr = [dataMin, dataMax];mapValuesArr = [1, 1.5];// ----for (var a = 0; a < curve.getLength(); a++) {radiusArr.push([a, dataMin + Math.random() * (dataMax - dataMin)])}// 辅助网格const box = new THREE.Box3Grid({anisotropy,minRange: new THREE.Vector3(0, 0, 0),maxRange: new THREE.Vector3(100, 100, 100),fontSize: 4,lineWidth: 1,scale: 10,fontColor: new THREE.Color(0x000000),xName: 'X',yName: 'Y',zName: 'Z'}, null, (value) => value)box.addToScene(scene)// 颜色const LUT = new THREE.Lut('rainbow', 128)LUT.setMax(dataMax);LUT.setMin(dataMin);// 变径管道var _geo = new THREE.VarTubeGeometry(curve, radiusArr, 20, valuesArr, mapValuesArr, LUT);// 变径管道材质_baseMaterial = new THREE.MeshPhongMaterial({// color: 0xffff00,side: THREE.DoubleSide,// map: texturevertexColors: true,});var _mesh = new THREE.Mesh(_geo, _baseMaterial)scene.add(_mesh)function done(point, m) {const geo = new THREE.BufferGeometry();geo.setFromPoints(point);const mesh = new THREE.Line(geo, m);mesh.computeLineDistances();scene.add(mesh)}// LineD3 折线图var points = new THREE.LineD3({line: curve,wellLength: curve.getLength(),toMin,toMax,dataMin,dataMax,arrRadius: radiusArr,angle: Math.PI})var material = new THREE.LineBasicMaterial({color: 0xff0000});var _material = new THREE.LineDashedMaterial({color: '#ffffff',dashSize: 1,gapSize: 1})done(points.linePoints, material)done(points.inlinePoints, _material)done(points.outLinePoints, _material)//----------// 区域图var AreaData = new THREE.AreaD3({line: curve,wellLength: curve.getLength(),toMin,toMax,dataMin,dataMax,lut: LUT,arrRadius: radiusArr,angle: 0})done(AreaData.inlinePoints, _material)done(AreaData.outLinePoints, _material)var _areageo = new THREE.BufferGeometry()_areageo.setIndex(AreaData.areaIndexs);_areageo.setAttribute('position',new THREE.Float32BufferAttribute(AreaData.areaPoints, 3));_areageo.setAttribute('normal', new THREE.Float32BufferAttribute(AreaData.areaNormals, 3));_areageo.setAttribute('color', new THREE.Float32BufferAttribute(AreaData.areaColors, 3));var _areamesh = new THREE.Mesh(_areageo, new THREE.MeshBasicMaterial({// color: 0xffff00,side: THREE.DoubleSide,// map: texturevertexColors: true,}))scene.add(_areamesh)function render() {renderer.render(scene, camera); //执行渲染操作box.upDate(camera)// mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度requestAnimationFrame(render); //请求再次执行渲染函数render}render();var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象

threejs,绘制测井曲线\变径管道\辅助网格方法相关推荐

php绘制历史曲线,thinkphp浏览历史功能实现方法
这篇文章主要介绍了thinkphp浏览历史功能实现方法,可实现浏览器的浏览历史功能,是非常实用的技巧,需要的朋友可以参考下本文实例讲述了thinkphp浏览历史功能实现方法,分享给大家供大家参考.具 ...
中子中子测井发出打入地层_测井曲线解释
测井曲线代码 RD.RS-深.浅侧向电阻率 RDC.RSC-环境校正后的深.浅侧向电阻率 VRD.VRS-垂直校正后的深.浅侧向电阻率 DEN-密度 DENC-环境校正后的密度 VDEN-垂直校正后的 ...
addroutes没添加进去_CAD中如何绘制函数曲线及添加数学公式
如何在CAD中绘制函数曲线?CAD与EXCELL结合,绘制函数曲线相当厉害.本文采用中望CAD软件,举例说明方法: 一.以三角函数y=sinx为例. 1.在A列从0开始以步长0.4(可自行调节)取若干 ...
Qiime2+Origin绘制稀释曲线
稀释曲线(Rarefaction Curve)也称稀疏曲线,一般在微生物组研究中多用于评估测序量或样本量的饱和情况.利用dada2去噪获得的table文件,计算随机抽取n个(n小于测得reads序列总 ...
python绘制缓和曲线_autocad绘制缓和曲线
自动绘制缓和曲线圆曲线方法摘要: 根据 AutoCAD 提供的宏, 通过 Microsoft Visual Basic 编写辅助程序绘制曲线. 关键词: 缓和曲线圆曲线绘制说明: 基本线形曲线 ...
roc图 r语言_R语言pROC包绘制ROC曲线
如果没有时间精力学习代码,推荐了解:零代码数据挖掘课程 pROC package 以下是本包中常用的一些缩写 ROC: receiver operating characteristic,ROC曲线 ...
R语言如何绘制变异系数曲线（24）
变异系数曲线 1.什么是变异系数曲线? 变异系数(Coefficient of Variation):当需要比较两组数据离散程度大小的时候,如果两组数据的测量尺度相差太大,或者数据量纲的不同,直接使用 ...
lisp倒入excel数据画图_如何将EXCEL中的数据导入到CAD中，绘制成曲线|
如何将EXCEL中的数据导入到CAD中,绘制成曲线如果不用软件,只用CAD自身功能的话可以通过多段线生成你需要的曲线.你给出你的曲线函数,我给你生成曲线坐标以及CAD能自动绘制的文件格式怎样将ca ...
常用测井曲线代码及名称
测井符号英文名称中文名称 Rt true formation resistivity. 地层真电阻率 Rxo flushed zone formation resistivity 冲洗带地层电阻率 ...
html5贝塞尔曲线,用canvas绘制一个曲线动画——深入理解贝塞尔曲线
前言在前端开发中,贝赛尔曲线无处不在: 它可以用来绘制曲线,在svg和canvas中,原生提供的曲线绘制都是使用贝赛尔曲线它也可以用来描述一个缓动算法,设置css的transition-timin ...

threejs,绘制测井曲线\变径管道\辅助网格方法

threejs,绘制测井曲线\变径管道\辅助网格方法相关推荐

最新文章

热门文章