三 JS实现三维场景

最近看了一些Web3D的内容，感觉用纯openGLes写一个简单的3D场景太难了。幸运的是，有很多现成的库可以使用。

(个人感觉):我经常知道三。JS和场景eJS。我觉得有更多关于三的信息。JS，好像很容易学。另一个是ScenenJS，感觉官方介绍比较好，适合做一些工程和医学模拟，实时性比较好，但是中文素材感觉比较少，不容易学。我个人读了《三》。射流研究…

学习中使用的一些工具和库：学习中使用了一些库，整理下载需要大量时间；使用的工具：WebStorm，我个人感觉不错。虽然我在学习之初不推荐IDE，但至少有代码提示和简单的函数描述。至少我知道你输入的代码(甚至按照教程抄的)是否正确。如果有智能提示，那么至少你输入的代码是正确的。

升华文字：一个文字工具，配置时可以提示代码，但提示功能不如专业IDE。速度很好；工具没有上传，太大了，可以自己在官网下载。

用过的库：

三个。js(简介可搜索):jquery-1 . 9 . 0 . JS : jquery-3 . 2 . 1 . JS:stats . JS:dat . GUI . JS:control kit . JS:scene JS . JS:个人也是初学者，工具是WebStorm，下面是三个. JS，学习的时候我个人建议你下载到库里面，改名字，放在你写的HTML文件的同一个文件夹里，这样在下面的例子中，你可以添加

！doctype html lang=' en ' head meta charset=' utf-8 '标题三. js第1章学习/标题！-必需的基本JS库-脚本src=' http : jquery19 . JS '/script script src=' http 3360 three . JS '/script script src=' stats . JS '/script script src=' dat . GUI . JS '/script script src=' control kit . JS '/。-为正文添加边框为0的样式(零，不显示边框)；滚动条隐藏样式类型=' text/CSS '正文{ margin : 0；飞越：隐藏；}/style/head dy！-创建一个DIV，其中由WebGL呈现的基本对象将被输出-div id=' webgl-output'/div！-定义一个JQuery函数，其中将显示所有WebGL操作-脚本类型=' text/JavaScript ' $(function(){！-构建场景-var scene=new three . scene()；-设置一个摄像头，查看场景并通过摄像头查看-var camera=new three。透视相机(45，窗.内宽/窗.内高，0.1，1000)；-构建一个渲染器并渲染它-varrenderer=new three . webglrenderer()；-渲染背景颜色。不知道为什么这个函数setClearColorHex()在这个学习过程中总是提示错误。-//renderer . setclearcolorhhex(0xeeeee)；renderer . setclearcolor(0xaffcc)；-render size-renderer . setsize(window . inner width，window . inner height)；-添加一个辅助坐标轴-var axes=新建三个。轴助手(20)；scene.add(轴)；-建造一个放置物体的平面-！-平面尺寸，100x60，宽度方向和高度方向均分。如果参数的最后两位不是(1，1)，平面将显示为网格平面-var plane geometry=new three . plane geometry(100，60，10，10)；-平面材质，只指定颜色0xcccccc-var平面材质=new三。mesh basicmaterial({ color :0 xcacc })；-有尺寸和材料来建造一个平面-var plane=new三。网格(平面几何、平面材料)；-选择-90的平面，以便于观察-平面。rotation . x=-0.5 * math . pi；-指定平面位置-平面。位置。x=15plane . position . y=0；plane . position . z=0；-把飞机加入场景-场景。添加(平面)；-建造一个物体，一个立方体，一个球体-！-建一个立方体-！-指定立方体的几何尺寸、长度、宽度和高度，不包括位置-变量立方体几何=新三。立方体几何(4，4，4)；-指定立方体的材质，只指定颜色：0xFF0000，是否以线框模式显示：是-var cubematerial=new three。mesh bisc material({ color :0 xff 000，wire frame 3360 true })；-用给定的几何尺寸和材料建造一个立方体-var cube=new three。网格(立方体几何形状、立方体材料)；-指定cube xyz - cube.position.x=-4 x=-4的具体位置；cube . position . y=3；cube . position . z=0；-将创建的立方体放入场景-场景。add(立方体)；-创建一个球体球体-！-指定球体的几何尺寸，不包括位置；最后两个参数感觉网格密度被指定了-var球面几何=新三。球体几何形状(4，50，50)；-指定球体材质，只指定颜色：0xFF0000，是否以线框形式显示：是-varspheremamaterial=新三。mesh bisc material({ color :0 xff 000，wire frame 3360 true })；-给定几何尺寸和材质，构建一个球体-var sphere=new three.mesh(球体几何，球体材质)；-指定球体x y z-球体的位置。位置。x=20sphere . position . y=4；sphere . position . z=0；-将已建立的球体添加到场景-场景。add(球体)；-指定摄像机的位置和方向，并决定我们在场景中的外观以及可以看到的内容-camera . position . x=-30；相机.位置.=40摄像机. position . z=30；摄像机.观察(场景.位置)；-使用JQuery找到ID为WebGL-output的DIV，将渲染的东西输出到div-$ ('# webgl-output ')。追加(渲染器。DOM element)；-使用渲染器用给定的摄像机-渲染器渲染场景。}) ;/脚本/正文/html效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。