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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
javascript头像上传代码实例
Sep 28 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
You might like
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
jsTree使用记录实例
2016/12/01 Javascript
ionic3 懒加载
2017/08/16 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
Python的词法分析与语法分析
2013/05/18 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python使用KNN算法识别手写数字
2019/04/25 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
django基于restframework的CBV封装详解
2019/08/08 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
食品业务员岗位职责
2014/03/18 职场文书
机关出纳岗位职责
2014/04/03 职场文书
授权委托书样本
2014/09/25 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
个人委托书范文
2015/01/28 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
Python pandas之求和运算和非空值个数统计
2021/08/07 Python