首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Three.js基础学习教程

Posted in Javascript onNovember 16, 2017

一、Three.js官网及使用Three.js必备的三个条件

1.Three.js 官网 https://threejs.org/

2.使用Three.js必备的三个条件

(To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.)

大致意思是使用three.js可以实现任何显示的东西，必须满足三个条件: a scene场景、a camera相机、a renderer渲染器. 三者缺一不可。

二、使用Three.js必备三个条件（a scene场景、a camera相机、a renderer渲染器）之间的关系　

Three.js基础学习教程

如上图所示，来说明a scene场景、a camera相机、a renderer渲染器三者之间关系[/code]

1.场景scene是一个物体的容器【通俗理解装东西的嘛】，开发者可以将需要的角色放入场景中，例如苹果，葡萄。同时，角色自身也管理着其在场景中的位置。

2.相机camera的作用就是面对场景，在场景中取一个合适的景，把它拍下来。【可以想象成人的眼睛】

3.渲染器renderer的作用就是将相机拍摄下来的图片，放到浏览器中去显示

三、通过上述理论来实践官网案例

效果图如下

Three.js基础学习教程

官网案例实现源码

<html>
 <head>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="./lib/three.js"></script>
 <script>
  //创建一个场景对象
  var scene = new THREE.Scene();
  //创建一个相机对象
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  
  //创建一个渲染器对象
  var renderer = new THREE.WebGLRenderer(); 
  //设置画布尺寸
  renderer.setSize( window.innerWidth, window.innerHeight );
  //设置画布色
   renderer.setClearColor(0x00AABB, 1.0);
   //将渲染画布添加到浏览器中，以便后面剩放相机拍下的景
  document.body.appendChild( renderer.domElement );
  
  //创建一个几何体长、宽、高分别为1几何体对象
  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  //材料、皮肤
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  //将material材料添加到几何体geometry，产生新的对象几何体cube
  var cube = new THREE.Mesh( geometry, material );
  //将几何体添加至场景中
  scene.add( cube );
  //设置相机z轴，垂直电脑屏幕位置
  camera.position.z = 5;
   
  var render = function () {
  /*requestAnimationFrame( render ); //循环渲染
  cube.rotation.x += 0.1; //x轴每秒旋转60次
  cube.rotation.y += 0.1;//y轴每秒旋转60次*/
  renderer.render(scene, camera); //实时将相机拍下的几何体渲染到场景中
  };
  render();
</script>
 </body>
</html>

通过官网案例不难发现，camera照相机默认的观察方向是屏幕的方向(z轴负方向),当变化坐标以后，就要将照相机指向原点，才能观察到物体

Three.js基础学习教程 z轴负方向？？？因此这里很有必要说说三维坐标（如下图）

Three.js基础学习教程

Three.js基础学习教程照相机指向原点？？？来说说相机camera相机（很重要!!想象一下人看不到东西是什么感觉）.

案例中采用透视相机（从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。）

var camera = new THREE.PerspectiveCamera(fov, aspect , near,far)

Three.js基础学习教程

new THREE.PerspectiveCamera(fov, aspect , near,far)  透视相机
视野角：fov 这里视野角(有的地方叫拍摄距离)越大，场景中的物体越小，视野角越小，场景中的物体越大
纵横比：aspect
相机离视体积最近的距离：near
相机离视体积最远的距离：far

综上，相信结合上述三维坐标、相机图理解相机、就应该变得很简单咯哦.接下来接着修改上述案例（说明 后面案例鼠标滚动放大缩小、三维旋转都是基于相机来实现的）

四、将官网案修改且设置相机朝向及相机位置

利用[lookAt]方法来设置相机的视野中心。 「lookAt()」的参数是一个属性包含中心坐标「x」「y」「z」的对象。

设置相机的上方向为正方向y轴 camera.up.x = 0; camera.up.y = 1/*相机朝向--相机上方为y轴*/; camera.up.z = 0;

五、实现旋转立方体

旋转动画原理相机围绕y轴旋转，不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中，实时将相机拍摄下来的图片，放到浏览器中去显示

//相机围绕y轴旋转，不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中
//实时渲染成像
function animation(){
  var timer = Date.now()*0.0001;
  camera.position.x = Math.cos(timer)*100;
  camera.position.z = Math.sin(timer)*100;
  camera.lookAt(scene.position); //设置相机视野中心
  renderer.render(scene, camera);
  requestAnimationFrame(animation);//渲染回调函数
}

实现效果图如下所示

Three.js基础学习教程

旋转立方体——案例源码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>旋转立方体 </title>
 <style>
  #canvas-frame {
  width: 100%;
  height: 600px;
  }
 </style>
 </head>
 <body onload="threeStart()">
 <div id="canvas-frame" ></div>
 </body>
 <script type="text/javascript" src="./lib/three.js" ></script>
 <script type="text/javascript">
  var renderer, //渲染器
  width = document.getElementById('canvas-frame').clientWidth, //画布宽
  height = document.getElementById('canvas-frame').clientHeight; //画布高
  //初始化渲染器
  function initThree(){
  renderer = new THREE.WebGLRenderer({
   antialias : true
   //canvas: document.getElementById('canvas-frame')
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0xFFFFFF, 1.0);
  document.getElementById('canvas-frame').appendChild(renderer.domElement);
  renderer.setClearColor(0xFFFFFF, 1.0);
  }
  //初始化场景
  var scene;
  function initScene(){
  scene = new THREE.Scene();
  }
  var camera;
  function initCamera() { //透视相机
  camera = new THREE.PerspectiveCamera(45, width/height , 1, 10000);
  camera.position.x = 50;
  camera.position.y = 150;
  camera.position.z =150;
  camera.up.x = 0;
  camera.up.y = 1; //相机朝向--相机上方为y轴
  camera.up.z = 0;
  camera.lookAt({ //相机的中心点
   x : 0,
   y : 0,
   z : 0
  });
   
  // camera 正交相机
  /*camera = new THREE.OrthographicCamera(-300, 300, 100, -100, 1, 10000);
  camera.position.x = 250;
  camera.position.y = 100;
  camera.position.z = 1800;
  camera.up.x = 0;
  camera.up.y = 1; //相机朝向--相机上方为y轴
  camera.up.z = 0;
  camera.lookAt({ //相机的中心点
   x : 0,
   y : 0,
   z : 0
  });*/
  }
  
  function initLight(){
  // light--这里使用环境光
  //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
  //light.position.set(600, 1000, 800);
  var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
  light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
  scene.add(light);
  }
  function initObject(){ //初始化对象
   
  //初始化地板
  initFloor();
  }
  function initGrid(){ //辅助网格
  var helper = new THREE.GridHelper( 1000, 50 );
  helper.setColors( 0x0000ff, 0x808080 );
  scene.add( helper );
  }
  
  function initFloor(){
  //创建一个立方体
  var geometry = new THREE.BoxGeometry(80, 20, 80);
   for ( var i = 0; i < geometry.faces.length; i += 2 ) {
   var hex = Math.random() * 0xffffff;
   geometry.faces[ i ].color.setHex( hex );
   geometry.faces[ i + 1 ].color.setHex( hex );
  }
  var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
  //将material材料添加到几何体geometry
  var mesh = new THREE.Mesh(geometry, material);
  mesh.position = new THREE.Vector3(0,0,0);
  scene.add(mesh);
  }
 
  
  //初始化页面加载
  function threeStart(){
  //初始化渲染器
  initThree();
  //初始化场景
  initScene();
  //初始透视化相机
  initCamera();
  //初始化光源
  //initLight();
  //模型对象
  initObject();
  //初始化网格辅助线
  initGrid();
  //renderer.render(scene, camera);
  //实时动画
  animation();
  
  }
  /*
  * 旋转原理
  * 相机围绕y轴旋转
  * 不断修改相机x、z轴位置，并且保持场景中的物体一直再相机的视野中，
  * 实时将相机拍摄下来的图片，放到浏览器中去显示
  */
  function animation(){
  //渲染成像
  var timer = Date.now()*0.0001;
  camera.position.x = Math.cos(timer)*100; //相机位置x轴方向
  camera.position.z = Math.sin(timer)*100; //相机位置y轴方向
  //设置相机视野中心
  camera.lookAt(scene.position);
  //渲染成像
  renderer.render(scene, camera);
  //渲染回调animation函数
  requestAnimationFrame(animation);
  }
 </script>
</html>

至此完毕，附上个人绘制思路流程图

Three.js基础学习教程

【参考资料】

http://www.hewebgl.com/article/getarticle/50

https://read.douban.com/reader/ebook/7412854/

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

Three.js基础学习教程

- Author -

Avenstar

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript排序算法之计数排序的实例
Apr 05 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）
Dec 02 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
angular异步验证器防抖实例详解
Mar 31 Javascript
three.js实现3D视野缩放效果
Nov 16 #Javascript
three.js中3D视野的缩放实现代码
Nov 16 #Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 #Javascript
React/Redux应用使用Async/Await的方法
Nov 16 #Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 #Javascript
图片加载完成再执行事件的实例
Nov 16 #Javascript
详解React 在服务端渲染的实现
Nov 16 #Javascript
接收函(23) 制度(225) 感言(394) 方案(1080) 计划书(118) 评语(336) 感谢信(72) 证明书(326) 答谢词(97) 寄语(276)
You might like
php配合jquery实现增删操作具体实例
2013/12/12 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
JavaScript 特殊字符
2007/04/05 Javascript
JavaScript中的其他对象
2008/01/16 Javascript
Jquery ajax不能解析json对象，报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
python 网络编程常用代码段
2016/08/28 Python
Pycharm学习教程（7）虚拟机VM的配置教程
2017/05/04 Python
Python书单 不将就
2017/07/11 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
详解python中的异常和文件读写
2021/01/03 Python
大学运动会通讯稿
2014/01/28 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
毕业生自荐书
2014/02/02 职场文书
2015年幼师工作总结
2015/04/28 职场文书
攻略丨滑雪究竟该选哪款对讲机？
2022/02/18 无线电
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript
netty 实现tomcat的示例代码
2022/06/05 Servers