Three.JS实现三维场景


Posted in Javascript onDecember 30, 2018

最近在看一些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>

效果:

Three.JS实现三维场景

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
删除节点的jquery代码
Jan 13 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
Three.js实现简单3D房间布局
Dec 30 #Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 #Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 #Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 #Javascript
微信小程序提交form操作示例
Dec 30 #Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 #Javascript
详解vue 兼容IE报错解决方案
Dec 29 #Javascript
You might like
php生成图形(Libchart)实例
2013/11/06 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
介绍一下write命令
2012/09/24 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
上班早退检讨书
2014/01/09 职场文书
公司节能减排倡议书
2014/05/14 职场文书
生物科学专业自荐书
2014/06/20 职场文书
党员承诺书格式范文
2015/04/28 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL