ThreeJS-3D可视化y轴和z轴

ThreeJS-3D可视化y轴和z轴

本博客地址：https://gitee.com/enzoism/html_threejs_demo1

1-3D坐标绘制

参考博客地址：https://blog.csdn.net/2301_77717148/article/details/168559364

)

2-为什么代码中要把y和z轴进行调换

1-先回答下面的问题

肯定不是上坡，你肯定认为我是在变化x和y轴，而不是在变化z轴

2-为了保持x(人的直观感受)同时，体现y的变化，就把y和z替换

1-const pts = t.points.map(([x, z, y]) => new THREE.Vector3(x, y ?? 0, z));

2-也就是说此时图把z轴拍扁了，我们此时看不出z的高度

3-所以你不认为我在上升的z轴，展示的就是y轴的数据

import*asTHREEfrom"./three.module.js";// —— 与原 JS 完全相同的采样逻辑 ——const{tracks}=await(awaitfetch("./assets/tracks.json")).json();constt=tracks.find((x)=>x.name==="Summer 1");if(!t)thrownewError("Summer 1 not found in tracks.json");constpts=t.points.map(([x,z,y])=>newTHREE.Vector3(x,y??0,z));constcurve=newTHREE.CatmullRomCurve3(pts,true,"catmullrom",0.5);constS=720;constsamples=Array.from({length:S},(_,i)=>curve.getPointAt(i/S));// —— 渲染（俯视 2D）——constW=1024,H=1024;constrenderer=newTHREE.WebGLRenderer({antialias:true,preserveDrawingBuffer:true});renderer.setSize(W,H);document.getElementById("view").appendChild(renderer.domElement);constscene=newTHREE.Scene();scene.background=newTHREE.Color(0x181818);// 用采样点算包围盒，自动取景constbbox=newTHREE.Box3().setFromPoints(samples);constcenter=bbox.getCenter(newTHREE.Vector3());constradius=bbox.getSize(newTHREE.Vector3()).length()/2;constcamera=newTHREE.OrthographicCamera(-radius,radius,radius,-radius,0.1,1000);camera.position.set(center.x,200,center.z);// 从正上方俯视camera.up.set(0,0,-1);camera.lookAt(center);// 中心线（蓝色）+ 原始控制点（红色圆点）constlineGeo=newTHREE.BufferGeometry().setFromPoints(samples);scene.add(newTHREE.LineLoop(lineGeo,newTHREE.LineBasicMaterial({color:0x4fc3f7})));constdotGeo=newTHREE.BufferGeometry().setFromPoints(pts);scene.add(newTHREE.Points(dotGeo,newTHREE.PointsMaterial({color:0xef5350,size:4})));renderer.render(scene,camera);// —— 导出 PNG ——window.savePNG=()=>{consta=document.createElement("a");a.href=renderer.domElement.toDataURL("image/png");a.download="summer1_centerline.png";a.click();};