three.js快速入门【推荐】


Posted in Javascript onJanuary 21, 2017

Three.js的核心五步就是:

1.设置three.js渲染器

2.设置摄像机camera

3.设置场景scene

4.设置光源light

5.设置物体object

1.设置three.js渲染器

三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。 具体来说要进行下面这些处理。

var renderer;
function initThree(){
 width = document.getElementById("box").clientWidth;
 height = document.getElementById("box").clientHeight;
 /**
 //声明渲染器对象:WebGLRenderer 
 renderer=new THREE.WebGLRenderer({ 
  antialias:true, //是否开启反锯齿 
  precision:"highp", //着色精度选择 
  alpha:true,  //是否可以设置背景色透明 
  premultipliedAlpha:false, 
  stencil:false, 
  preserveDrawingBuffer:true, //是否保存绘图缓冲 
  maxLights:1  //maxLights:最大灯光数 
 }); 
 */
 renderer = new THREE.WebGLRenderer({
 antialias:true
 });/*生成渲染器对象(属性:抗锯齿效果为设置有效)*/
 renderer.setSize(width,height);
 document.getElementById("box").appendChild(renderer.domElement);
 /*设置canvas背景色(clearColor)和背景色透明度(clearAlpha) */
 renderer.setClearColor(0xFFFFFF,1.0);
}

2.设置摄像机camera

OpenGL(WebGL)中、三维空间中的物体投影到二维空间的方式中,存在透视投影和正投影两种相机。

  a.透视投影:从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。

  b.正投影:不管物体和视点距离,都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体,因此这种投影被广泛应用。在Three.js也能够指定透视投影和正投影两种方式的相机。 本文按照以下的步骤设置透视投影方式。

    (1) 声明全局的变量(对象);

    (2) 设置透视投影的相机;

    (3) 设置相机的位置坐标;

    (4) 设置相机的上为「z」轴方向;

    (5) 设置视野的中心坐标。

var camera;
function initCamera(){
 /*PerspectiveCamera的四个参数
 参数1:为视野角 ,
 参数2:纵横比。这参数几乎总是使用的元素的宽度除以高度,否则你会看到像老电影中的那样,图像被压扁了.
 参数3:相机允许离物体的最近距离.
 参数4;相机允许离物体的最远距离.默认情况之下,相机的上方向为Y轴,右方向为X轴,向里为Z轴.*/
 camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
 camera.position.x = 0;
 camera.position.y = 1000;
 camera.position.z = 0;
 camera.up.x = 0;
 camera.up.y = 0;
 camera.up.z = 1;
 camera.lookAt({x:0,y:0,z:0}); //设置视野的中心坐标 
}

3.设置场景

var scene;
function initScene(){
 scene = new THREE.Scene();
}

4.设置光源light

OpenGL(WebGL)的三维空间中,存在点光源和聚光灯两种类型。 而且,作为点光源的一种特例还存在平行光源(无线远光源)。另外,作为光源的参数还可以进行 [环境光] 等设置。 作为对应, Three.js中可以设置 [点光源(Point Light)][聚光灯(Spot Light)][平行光源(Direction Light)],和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上,都是环境光和其他几种光源进行组合。 如果不设置环境光,那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源,在这之后还会追加环境光。

  (1) 声明全局变量(对象)

  (2) 设置平行光源

  (3) 设置光源向量

  (4) 追加光源到场景

/*** 光照(light) ***/
new THREE.AmbientLight(颜色);                          // 环境光
new THREE.PointLight(颜色, 强度, 距离);                // 点光源
new THREE.DirectionalLight(颜色, 亮度);                // 平行光
new THREE.SpotLight(颜色, 强度, 距离, 夹角, 衰减指数); // 聚光灯

var light;
function initLight(){
 light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); //平行光
 light.position.set(100, 100, 200); //设置光源位置
 scene.add(light); //将官员添加到场景
}

5.设置物体

//几何形状
        CubeGeometry(长, 宽, 高, 长的分割, 宽的分割, 高的分割);                           // 立方体
        PlanGeometry(长,宽, 长的分割, 宽的分割);                                          // 平面
        SphereGeometry(半径, 经度切片, 纬度分割, 经度分割, 经度跨过, 纬度开始, 纬度跨过); // 球体
        CircleGeometry(半径, 切片数, 开始, 跨过角度);                                     // 圆形
        CylinderGeometry(顶部面积, 底部面积, 高, 圆分割, 高分割, 是否没有顶面和底面);     // 圆台
        TetrahedronGeometry(半径, 细节);  // 正四边形
        OctahedronGeometry(半径, 细节);   // 正八边形
        IconsahedronGeometry(半径, 细节); // 正十二边形
        TorusGeometry(半径, 管道半径, 纬度分割, 经度分割, 圆环面的弧度); // 圆环面

var sphere;
function initObject(){
 sphere = new THREE.Mesh(new THREE.SphereGeometry(200,200)/*设置球体的大小*/,new THREE.MeshLambertMaterial({color:0xff0000})/*设置球体的材质*/); //材质设定 
 scene.add(sphere); 
 sphere.position.set(0,0,0); /*设置物体位置*/
}

6.执行

function threeExcute(){ 
 initThree(); 
 initCamera(); 
 initScene(); 
 initLight(); 
 initObject(); 
 renderer.clear(); 
 renderer.render(scene,camera); 
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="http://cdn.bootcss.com/three.js/r83/three.min.js"></script>
</head>
 <!-- Three.js的核心五步就是:
 1.设置three.js渲染器
 2.设置摄像机camera
 3.设置场景scene
 4.设置光源light
 5.设置物体object 
 -->
 <script>
 // 1.设置three.js渲染器
 var renderer;
 function initThree(){
 width = document.getElementById("box").clientWidth;
 height = document.getElementById("box").clientHeight;
 renderer = new THREE.WebGLRenderer({
 antialias:true
 });/*生成渲染器对象(属性:抗锯齿效果为设置有效)*/
 renderer.setSize(width,height);
 document.getElementById("box").appendChild(renderer.domElement);
 /*设置canvas背景色(clearColor)和背景色透明度(clearAlpha) */
 renderer.setClearColor(0xFFFFFF,1.0);
 }
 // 2.设置摄像机camera
 var camera;
 function initCamera(){
 camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
 camera.position.x = 0;
 camera.position.y = 1000;
 camera.position.z = 0;
 camera.up.x = 0;
 camera.up.y = 0;
 camera.up.z = 1;
 camera.lookAt({x:0,y:0,z:0}); //设置视野的中心坐标 
 }
 // 3.设置场景
 var scene;
 function initScene(){
 scene = new THREE.Scene();
 }
 // 4.设置光源light
 var light;
 function initLight(){
 light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); //平行光
 light.position.set(100, 100, 200); //设置光源位置
 scene.add(light); //将官员添加到场景
 }
 //5.设置物体 
 var sphere;
 function initObject(){
 sphere = new THREE.Mesh(new THREE.SphereGeometry(200,200)/*设置球体的大小*/,new THREE.MeshLambertMaterial({color:0xff0000})/*设置球体的材质*/); //材质设定 
  scene.add(sphere); 
  sphere.position.set(0,0,0); /*设置物体位置*/
 } 
 //6.执行 
 function threeExcute(){ 
  initThree(); 
  initCamera(); 
  initScene(); 
  initLight(); 
  initObject(); 
  renderer.clear(); 
  renderer.render(scene,camera); 
 } 
 </script>
 <style type="text/css">
 div#box{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
  }
 </style>
 <body onload="threeExcute();">
 <div id="box"></div>
 </body>
</html>

three.js下载地址:http://www.bootcdn.cn/three.js/

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

Javascript 相关文章推荐
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
详解Angualr 组件间通信
Jan 21 #Javascript
js的三种继承方式详解
Jan 21 #Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 #Javascript
微信小程序 自定义对话框实例详解
Jan 20 #Javascript
Vue实例简单方法介绍
Jan 20 #Javascript
微信小程序 Toast自定义实例详解
Jan 20 #Javascript
JavaScript判断浏览器及其版本信息
Jan 20 #Javascript
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
常用简易JavaScript函数
2009/04/09 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Django实现快速分页的方法实例
2017/10/22 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
大专生自我鉴定范文
2013/10/01 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
高校教师岗位职责
2014/03/18 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
个人工作决心书
2015/09/22 职场文书
大学班长竞选稿
2015/11/20 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
Java异常体系非正常停止和分类
2022/06/14 Java/Android