首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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/

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

three.js快速入门【推荐】

- Author -

艾瑞卡

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
js 走马灯简单实例
Nov 21 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
详解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
车机(1) 接收机(2) 电子管(5) 海燕B411(1) 放大器(1) TECSUN(1) 修复(2) 德生(17) DSP(2) PL-365(1)
You might like
第四节--构造函数和析构函数
2006/11/16 PHP
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
Python解析树及树的遍历
2016/02/03 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python如何遍历指定路径下所有文件（按按照时间区间检索）
2020/09/14 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
时尚圣经：The Fashion Bible
2019/03/03 全球购物
波兰电子产品购物网站：Vobis
2019/05/26 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
校园广播稿500字
2014/02/04 职场文书
500字小学生检讨书
2015/02/19 职场文书
宿舍管理制度范本
2015/08/07 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
在校大学生才艺比赛策划书怎么写？
2019/08/26 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
nginx实现动静分离的方法示例
2021/11/07 Servers