Three.js基础部分学习


Posted in Javascript onJanuary 08, 2017

一、关于使用Three.js几点理论说明

1.请参考官网地址 https://threejs.org/

2.使用three.js必备条件  <场景 A scene、相机a camera、渲染器 a renderer  三者缺一不可>

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.

3.场景 A scene、相机a camera、渲染器 a renderer 三者之间的关系  <渲染器的作用就是将相机拍摄下来的图片,放到浏览器中去显示>

Three.js基础部分学习

三、案例使用Three.js绘制旋转立方体

实现效果图如下所示

Three.js基础部分学习

案例案例源码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>用threejs构建室内模型</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();
 }
 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);
 }
 </script>
</html>

一.场景 场景就是一个三维空间。 用 [Scene] 类声明一个叫 [scene] 的对象。

二.关于上述案例中PerspectiveCamera透视相机注意点说明

  1. 照相机默认的观察方向是指向z轴负方向(就是朝向屏幕),所以当变化坐标以后,就要将照相机指向原点,才能观察到物体。

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

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

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

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

三.关于透视相机相关参数说明

new THREE.PerspectiveCamera(fov, aspect , near,far)  透视相机

  视野角:fov 这里视野角(有的地方叫拍摄距离)越大,场景中的物体越小,视野角越小,场景中的物体越大

  纵横比:aspect

  相机离视体积最近的距离:near

  相机离视体积最远的距离:far

Three.js基础部分学习

Three.js基础部分学习

上述案例动画原理  相机围绕y轴旋转,并且保持场景中的物体一直再相机的视野中,实时将相机拍摄下来的图片,放到浏览器中去显示

function animation(){
 //相机围绕y轴旋转,并且保持场景中的物体一直再相机的视野中
 //实时渲染成像
 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);
}

四.渲染器  三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染的操作叫做渲染器。

【参考资料】 

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

   http://www.xyhtml5.com/threejs-star-moving-particles.html

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
React 组件间的通信示例
Jun 14 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
js 数组 fill() 填充方法
Nov 02 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 #Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 #Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 #Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 #Javascript
jQuery实现文字自动横移
Jan 08 #Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 #Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 #Javascript
You might like
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
python中遍历文件的3个方法
2014/09/02 Python
python学习数据结构实例代码
2015/05/11 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python实现五子棋人机对战游戏
2020/03/25 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Python如何读取、写入JSON数据
2020/07/28 Python
Django如何重置migration的几种情景
2021/02/24 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
2014年社区卫生工作总结
2014/12/18 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript