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 相关文章推荐
jQuery live
May 15 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
Vue中CSS动画原理的实现
Feb 13 Javascript
express框架中使用jwt实现验证的方法
Aug 25 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用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
Python实现的tab文件操作类分享
2014/11/20 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
Python处理Excel文件实例代码
2017/06/20 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
公务员职业生涯规划书范文  
2014/01/19 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
中班中秋节活动反思
2014/02/18 职场文书
计划生育目标责任书
2015/05/09 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers