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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
Vue常用的全选/反选的示例代码
Feb 19 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 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
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php常用数学函数汇总
2014/11/21 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
详解php用static方法的原因
2018/09/12 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python中的列表知识点汇总
2015/04/14 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python操作json的方法实例分析
2018/12/06 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Python如何获取文件指定行的内容
2020/05/27 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
python如何提升爬虫效率
2020/09/27 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
工作室成员个人发展规划范文
2014/01/24 职场文书
颁奖典礼主持词
2014/03/25 职场文书
企业承诺书格式范文
2015/04/28 职场文书
首次购房证明
2015/06/19 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS