三射流研究…实现三维(三维的缩写)模型展示的示例代码

编辑：宝哥软件园来源：互联网时间：2021-09-01

新天龙八部

角色扮演 | 1.85G

评分

立即下载

由于项目需要展示三维(三维的缩写)模型，所以对三做了点研究，分享出来希望能帮到大家

先看看效果：

三。射流研究…整体来说不是很难只要你静下心来研究研究很快就会上手的

首先我们在页面上需要创建一个能够放置三维(三维的缩写)模型的画布也可以说是初始化三

改变宽度、高度；定义变量渲染器；函数init three(){ WIDTH=document.documentElement.clientWidth/2;-{ foreach from=$ recommended _ goods item=rgo ODS }-！-{/foreach }-HEIGHT=document.documentElement.clientHeight/2;/*渲染器*/渲染器=新三.WebGLRenderer()；renderer.setSize(WIDTH，HEIGHT)；renderer.setClearColor(新的三。颜色(0x 66666))；renderer . gammainput=true renderer . gammaoutput=true document。尸体。appendchild(渲染器。圆顶元件)；}通过上面的代码不难看出我们设置了在身体里追加了一块画布宽高是客户的一半颜色为0x66666这里要注意的是渲染器=新的三.WebGLRenderer()；因为我们所有的设置都是以渲染器为对象设置

下来我们需要调整摄像头即视觉角度

/* 摄像头*/var摄像机；函数initCamera() { var VIEW_ANGLE=45，ASPECT=WIDTH/HEIGHT，NEAR=0.1，FAR=10000相机=新的三。透视摄像机（视角、方位、近距、远距);camera.position.set(20，0，0)；//设置视野的中心坐标摄像机。观察（场景。位置);}以上代码主要是控制视觉角度数值可以在后期根据自己的需求去调整

加载场景：

/* 场景*/var场景；函数initScene() { scene=new THREE .场景();}加载灯光效果

/* 灯光*/var light，light2，light 3；函数initLight() { //平行光光=新的三.DirectionalLight(0x fffff)；light.position.set(0，99，0).normalize()；场景添加（光);//环境光light2=新的三.环境光(0x 999999)；场景。添加(光2)；//点光源light3=新的三.点光源(0x 00ff 00)；light3.position.set(300，0，0)；场景。添加(灯3)；}显示模型对象：

/* 显示对象*/var多维数据集；函数initObject(){ //ASCII文件var loader=new THREE .STlLoader()；loader.addEventListener('load ')，function(event){ var Loading=document。getelementbyid(' Loading ')；正在加载. parentNode.removeChild(正在加载);定义变量几何=event.content//砖红色可变材料=新的三.mesh Phong material({环境：0xff5533，颜色：0x ff 5533，镜象：0x111111，shinines 3360 200 })；//纯黑色//var material=new THREE .网格基础材料(env map : THREE .imageutils。加载纹理(' http://localhost :8080/纹理/金属。jpg '，新三.SphericalReflectionMapping())、透支： true })；//粉色带阴影//var material=new THREE .MeshLambertMaterial({ color :0 xff 5533，side: THREE .双面})；//灰色//var material=new THREE .MeshLambertMaterial({ color : 000000 })；//材质设定（颜色)var mesh=new THREE .网格（几何、材料);定义变量中心=三。几何中心（几何);var boundbox=几何。边界框；var向量3=boundbox。大小(null)；var向量3=boundbox。大小(null)；控制台。对数(矢量3)；var scale=向量3。length()；camera.position.set(比例，0,0);摄像机。观察（场景。位置);scene.add(摄像机);//利用一个轴对象以可视化的3轴以简单的方式十。轴是红色的是的。轴是绿色的z。轴是蓝色的。这有助于理解在空间的所有三个轴的方向var axisHelper=new THREE .axi shepper(800)；场景。添加(轴助手)；//周围边框bboxHelper=new THREE .BoxHelper()；bboxhelper . visible=true var mesh material=材料；主模型=新三.网格（几何图形、网格材料);bboxhelper。更新(主模型)；bboxhelper。几何学。computebounting box()；场景。add(bboxHelper)；//地板网格//var gridHelper=new THREE .GridHelper(500，40)；//500是网格大小，20是网格步长//gridHelper.position=new THREE .Vector3(0，0，0)；//gridHelper.rotation=new THREE .欧拉(0,0,0);//场景。添加(GridHelper)；//var gridhelper 2=gridhelper。clone()；//GridHelp 2。旋转=新的三.欧拉（数学/2，0，0)；//场景。添加(GridHelper 2)；//var gridhelper 3=gridhelper。clone()；//GridHelper 3。旋转=新的三.欧拉（数学。/2,0,数学/2)；//场景。添加(GridHelper 3)；////var grid=new THREE .GridHelper(300，40，25，[0，0，1]，0x000055，0.2，true，' #FFFFFF '，' left ')；//scene.add(网格);var x=(boundbox。最大值x-boundbox。量滴.toFixed(2)；var y=(boundbox。最大值y-boundbox。量滴y ).toFixed(2)；var z=(boundbox。最大值z-boundbox。量滴z ).toFixed(2)；控制台。log(x)；控制台。日志(y)；控制台。log(z)；控制台。log(boundbox)；mesh.position.set(0，0，0)；//网格。位置。x=场景。位置。x；//网格。位置。y=场景。位置。y；//网格。位置。z=场景。位置。z；scene.add(网格);渲染器。clear()；renderer.render(场景、摄像机);} );loader.load('3dfile/莫比乌斯环. STL’)；}这里根据文件类型选择相对应的射流研究…引入即可我加载的是标准模板库模型所以我引入的是STLLoader.js

脚本src=' http : js/STlLoader。js /脚本如果需要显示网格标尺将网格部分代码去掉注释即可

下来是控制方法（虽然我没有在显示代码里面写根据键盘按键放大缩小但还是提供给大家参考)

//控制定义变量效应；风险值控制。函数initControl(){效果=new THREE .AsciiEffect(渲染器);effect.setSize(WIDTH，HEIGHT)；控制=新的三跟踪球控件(摄像机、渲染器。DOM元素)；}最后就是一个初始调用了

函数animate(){ requestAnimationFrame(动画)；控件。update()；effect.render(场景、相机);}函数3p start(){ init three()；init scene()；initCamera()；init light()；initObject()；init control()；animate()；}附上完整代码

！DOCTYPE html html head meta charset=' UTF-8 '/title webgl/title script type=' text/JavaScript ' charset=' utf-8 ' src=' http : js/three。js '/script script src=' http : js/STlLoader。js '/script script src=' http : js/TrackBallcontrols。js '/script script src=' http 3360 js/Ascieffect .背景： # eee }/风格/头部脚本var WIDTH，HEIGHTvar渲染器；函数init three(){ WIDTH=document.documentElement.clientWidth/2;-{ foreach from=$ recommended _ goods item=rgo ODS }-！-{/foreach }-HEIGHT=document.documentElement.clientHeight/2;/*渲染器*/渲染器=新三.WebGLRenderer()；renderer.setSize(WIDTH，HEIGHT)；renderer.setClearColor(新的三。颜色(0x 66666))；renderer . gammainput=true renderer . gammaoutput=true document。尸体。appendchild(渲染器。圆顶元件)；} /* 摄像头*/var摄像机；函数initCamera() { var VIEW_ANGLE=45，ASPECT=WIDTH/HEIGHT，NEAR=0.1，FAR=10000相机=新的三。透视摄像机（视角、方位、近距、远距);camera.position.set(20，0，0)；//设置视野的中心坐标摄像机。观察（场景。位置);} /* 场景*/var场景；函数initScene() { scene=new THREE .场景();} /* 灯光*/var light，light2，light 3；函数initLight() { //平行光光=新的三.DirectionalLight(0x fffff)；light.position.set(0，99，0).normalize()；场景添加（光);//环境光light2=新的三.环境光(0x 999999)；场景。添加(光2)；//点光源light3=新的三.点光源(0x 00ff 00)；light3.position.set(300，0，0)；场景。添加(灯3)；} /* 显示对象*/var多维数据集；函数initObject(){ //ASCII文件var loader=new THREE .STlLoader()；loader.addEventListener('load ')，function(event){ var Loading=document。getelementbyid(' Loading ')；正在加载. parentNode.removeChild(正在加载);定义变量几何=event.content//砖红色可变材料=新的三.mesh Phong material({环境：0xff5533，颜色：0x ff 5533，镜象：0x111111，shinines 3360 200 })；//纯黑色//var material=new THREE .网格基础材料(env map : THREE .imageutils。加载纹理(' http://localhost :8080/纹理/金属。jpg '，新三.SphericalReflectionMapping())、透支： true })；//粉色带阴影//var material=new THREE .MeshLambertMaterial({ color :0 xff 5533，side: THREE .双面})；//灰色//var material=new THREE .MeshLambertMaterial({ color : 000000 })；//材质设定（颜色)var mesh=new THREE .网格（几何、材料);定义变量中心=三。几何中心（几何);var boundbox=几何。边界框；var向量3=boundbox。大小(null)；var向量3=boundbox。大小(null)；控制台。对数(矢量3)；var scale=向量3。length()；camera.position.set(比例，0,0);摄像机。观察（场景。位置);scene.add(摄像机);//利用一个轴对象以可视化的3轴以简单的方式十。轴是红色的是的。轴是绿色的z。轴是蓝色的。这有助于理解在空间的所有三个轴的方向。