首页
所有分类
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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
SeaJS入门教程系列之完整示例（三）
Mar 03 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
canvas红包照片实例分享
Feb 28 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
详解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
css3 (2) Normal From(1) capture(1) pyqt5(3) SpringBoot(22) pycharm(6) MybatisPlus(2) MapReduce(1) Qlabel(1) JSON(10)
You might like
PHP新手上路（十二）
2006/10/09 PHP
劣质的PHP代码简化
2010/02/08 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
如何在一个页面显示多个百度地图
2013/04/07 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
JavaScript中的this机制
2016/01/30 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python在协程中增加任务实例操作
2021/02/28 Python
Made in Design英国：设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
中文系师范生自荐信
2013/10/01 职场文书
项目资料员岗位职责
2013/12/10 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
2016春节放假通知范文
2015/08/18 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android