首页
所有分类
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 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
《JavaScript高级程序设计》阅读笔记（三） ECMAScript中的引用类型
Feb 27 Javascript
JavaScript高级程序设计（第3版）学习笔记4 js运算符和操作符
Oct 11 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能
Mar 27 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
JavaScript数组及常见操作方法小结
Nov 13 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
正则表达式(3) pytest(3) gevent(1) 自动播放(1) csv(4) Excel(4) 静态压缩(1) greenlet(1) 信息校验(1) Coroutine(1)
You might like
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
建立动态的WML站点(二)
2006/10/09 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php 启动报错如何解决
2014/01/17 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
如何用Python 加密文件
2020/09/10 Python
HTML5 对各个标签的定义与规定：body的介绍
2012/06/21 HTML / CSS
英国一家专门出售品牌鞋子的网站：Allsole
2016/08/07 全球购物
魅力惠奢品线上平台：MEI.COM
2016/11/29 全球购物
德国婴儿服装和婴儿用品购买网站：Baby Sweets
2019/12/08 全球购物
Exception类的常用方法
2012/06/16 面试题
食品安全处置方案
2014/06/14 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
先进人物事迹材料
2014/12/29 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书