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 相关文章推荐
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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
资料注册后发信小技巧
2006/10/09 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php绘制一条弧线的方法
2015/01/24 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
python仿抖音表白神器
2019/04/08 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL