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 相关文章推荐
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
canvas实现图像放大镜
Feb 06 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
js实现点击按钮复制文本功能
Jul 20 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
Vue实现手机计算器
Aug 17 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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模板技术原理【一】
2008/01/10 PHP
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
小学生植树节活动总结
2014/07/04 职场文书
教师节倡议书
2014/08/30 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
对PyTorch中inplace字段的全面理解
2021/05/22 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript