Three.JS实现三维场景
程序员文章站
2022-05-26 10:56:09
最近在看一些web3d的内容，觉得如果用纯opengles写一个简单的3d场景太难了；不过还好，有很多现成的库可以使用。
（个人感觉）：我知道的经常的是three....
最近在看一些web3d的内容，觉得如果用纯opengles写一个简单的3d场景太难了；不过还好，有很多现成的库可以使用。
（个人感觉）：我知道的经常的是three.js和scenejs。感觉three.js资料比较多，貌似好学一些吧；另一个是scenenjs，感觉官方介绍比较好，适合做一些工程和医学上的模拟，实时性比较好，但是中文资料感觉比较少，不太好学习。我个人看的是three.js
学习中用到的一些工具和库：学习中用到一些库，也费了不少时间去整理，下载；
用到的工具：webstorm，个人感觉还好，虽然说，开始学不建议ide，但是起码有代码提示，会有函数的简单说明，起码知道你输入的代码（即使是照着教程抄）是否正确，如果智能提示有，那么至少说明你输入的代码是正确的。
sublimetext ：一个文本工具，配置了也可以对代码有些提示，但是，提示功能不如专业ide。速度很好；
工具不上传了，太大，可以自己去官网下载。
用到的库：
- three.js（介绍可以搜索）：
- jquery-1.9.0.js:
- jquery-3.2.1.js：
- stats.js：
- dat.gui.js：
- controlkit.js：
- scenejs.js：
个人也是初学，工具用的是webstorm，下面是three.js的第一个例子，代码中添加了很详细的解释，照着写，仔细看看注释。学习的时候，个人建议把下载到库修改下名字，和你写的html文件统一放到一个文件夹中，这样像下面的例子中，添加引用的库就可以了，要不就要指定引用库的全路径。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>three.js 第一章学习</title>
<!--需要的基本js库-->
<script src="jquery19.js"></script>
<script src="three.js"></script>
<script src ="stats.js"></script>
<script src = "dat.gui.js"></script>
<script src = "controlkit.js"></script>
<!--给body加入一个样式，边框为0（零，不显示边框）；滚动条隐藏-->
<style type="text/css">
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!--建立一个div，webgl渲染的基本物体会在此处输出-->
<div id="webgl-output">
</div>
<!--定义一个jquery函数，所有的webgl操作展示将在该函数中进行-->
<script type="text/javascript">
$(function () {
<!--构建场景-->
var scene = new three.scene();
<!--建立相机，查看场景,透视相机-->
var camera = new three.perspectivecamera(45,window.innerwidth/window.innerheight,0.1,1000);
<!--构建渲染器，进行渲染-->
var renderer = new three.webglrenderer();
<!--渲染背景色,不知道为什么在此学习过程中，该函数setclearcolorhex()老是提示错误？-->
// renderer.setclearcolorhex(0xeeeeee);
renderer.setclearcolor(0xaaffcc);
<!--渲染尺寸-->
renderer.setsize(window.innerwidth,window.innerheight);
<!--添加一个辅助坐标轴-->
var axes = new three.axishelper(20);
scene.add(axes);
<!--构建一个平面，物体将会放置在这个平面上-->
<!--平面尺寸，100x60，宽度方向平分几分，高度方向平分几分，如果参数最后2位不是（1,1），平面会显示为网格平面-->
var planegeometry = new three.planegeometry(100,60,10,10);
<!--平面材质,仅仅指定颜色 0xcccccc-->
var planematerial = new three.meshbasicmaterial({color:0xccaacc});
<!--有尺寸和材质构建一个平面-->
var plane = new three.mesh(planegeometry,planematerial);
<!--把平面选择-90°，方便观察-->
plane.rotation.x = -0.5*math.pi;
<!--指定平面的位置-->
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
<!--把平面加入到场景中-->
scene.add(plane);
<!--建立物体，一个立方体，一个球体-->
<!--建立一个立方体-->
<!--指定立方体的几何尺寸，长宽高，不包括位置-->
var cubegeometry = new three.cubegeometry(4,4,4);
<!--指定立方体的材质，仅仅指定颜色：0xff0000，是否使用线框模式显示：是-->
var cubematerial = new three.meshbasicmaterial({color:0xff0000,wireframe:true});
<!--以给定的几何尺寸和材质构建一个立方体-->
var cube = new three.mesh(cubegeometry,cubematerial);
<!--指定立方体的具体位置xyz-->
cube.position.x =-4;
cube.position.y =3;
cube.position.z = 0;
<!--把建立的立方体放入场景-->
scene.add(cube);
<!--建立一个球体sphere-->
<!--指定球体的几何尺寸，不包括位置；最后2个参数感觉是指定网格密度-->
var spheregeometry = new three.spheregeometry(4,50,50);
<!--指定球体材质，仅仅指定颜色：0xff0000，是否以线框形式显示：是-->
var spherematerial = new three.meshbasicmaterial({color:0xff0000,wireframe:true});
<!--以给定的几何尺寸和材质，建立一个球体-->
var sphere = new three.mesh(spheregeometry,spherematerial);
<!--指定球体的位置 x y z-->
sphere.position.x =20;
sphere.position.y=4;
sphere.position.z = 0;
<!--把建立的球体加入到场景中-->
scene.add(sphere);
<!--指定相机的位置和方向，决定我们在场景中如何看，能看到什么-->
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookat(scene.position);
<!--利用jquery查找到id为webgl-output的div，并把渲染到的东西输出到该div-->
$("#webgl-output").append(renderer.domelement);
<!--利用渲染器以给定的相机去渲染场景-->
renderer.render(scene,camera);
}) ;
</script>
</body>
</html>
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
推荐阅读