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/

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

Javascript 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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
You might like
图书管理程序(二)
2006/10/09 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
自主实习接收函
2014/01/13 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
产品发布会策划方案
2014/05/12 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
中秋节活动总结
2014/08/29 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript