上一面讲述了向场景中添加物体对象。这一篇准备把每个功能点细细的讲述一遍，一方面是为了加深自己的理解。另一方面希望能够

帮助到有需要的人。

一、在学习WEBGL的时候，你应该先了解要创建一个WebGL程序需要哪些步骤。就跟弄梅菜扣肉一样，需要哪些步骤。

  • 初始化WebGL绘图上下文
  • 初始化着色器程序
  • 建立模型和数据缓存
  • 完成绘制和动画

这是一个面向过程编程。然而three.js不一样，是一个面向对象编程。主要构建三个对象 scene(场景) camera(相机) renderer(渲染器).。

这三个东西是什么意思呢？听起来完全不懂是啥。举个小列子：就拿电影来说。场景（scene)就好比整个布局空间，相机(camera)相当于

拍摄期。而渲染器相当于(renderer)把拍摄的电影转换成胶卷也就是电脑的屏幕。

场景和空间包含了3D和数据模型，而renderer包含了着色器和WebGL绘图上下文。

二、THREE.JS创建场景，相机，渲染器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo1(three入门第一篇)</title>

</head>

<body>

</body>

<script type="text/javascript" src="js/three.js"></script>

<script type="text/javascript">

    var width = window.innerWidth, height = window.innerHeight;

    var scene = new THREE.Scene(); //创建一个场景

    var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机

    /*

        three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();

        远景相机，相当于人眼观察模式

        肯定有人会有疑问，这几个参数是什么意思呢？

        第一个 75 是 视角

        width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口

        的width/height图形就不会被压变形。

        下面两个是近裁剪面。和远裁剪面。

     */

    var renderer = new THREE.WebGLRenderer();  //s上一篇用的是CSS3DRenderer

    //WebGLrenderer其实是用CANVAS渲染。

    renderer.setSize(width,height);

    document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

</script>

</html>

电影，场景，胶卷都准备好了，那如何才能展示演员呢？也就是上面一篇说 的如何向场景中添加物体对象呢？

三、添加演员（3D立方体）。

 //演员进场

    var geometry = new THREE.BoxGeometry(1,1,1);

    //BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。

    var material = new THREE.MeshBasicMaterial({color:'red'});

    //有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();

    var mesh = new THREE.Mesh(geometry,material);

    //需要一个网孔,来承载几何模型和材料

    scene.add(mesh);  //把这个网孔放置到场景中去。

    camera.position.z = 5; //调节相机的位置。

    renderer.render(scene,camera); //把画面转换成相机，并播放

这样这个演员就入镜了。

四、如何让这个演员动起来呢？

    //懂动起来。

    function loop(){

        requestAnimationFrame(loop);

        mesh.rotation.x += 0.1;  //X选择

        mesh.rotation.y += 0.1;  //Y旋转

        renderer.render(scene,camera); //把画面转换成相机，并播放

    }

    loop();

    //解释下requestAnimationFrame这个api

    /*

     requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，

     比如浏览器Tab切换后停止渲染以节约资源、

     和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。

     简直就是动画神奇

     */

演员入镜，并有了，打动效果。第一个小短篇算完成了吧。

五、整个代码(本来想托管到githup上)。发现太慢了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Demo1(three入门第一篇)</title>

</head>

<body>

</body>

<script type="text/javascript" src="js/three.js"></script>

<script type="text/javascript">

    var width = window.innerWidth, height = window.innerHeight;

    var scene = new THREE.Scene(); //创建一个场景

    var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机

    /*

        three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();

        远景相机，相当于人眼观察模式

        肯定有人会有疑问，这几个参数是什么意思呢？

        第一个 75 是 视角

        width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口

        的width/height图形就不会被压缩。

        下面两个是近裁剪面。和远裁剪面。

     */

    var renderer = new THREE.WebGLRenderer();  //s上一篇用的是CSS3DRenderer

    //WebGLrenderer其实是用CANVAS渲染。

    renderer.setSize(width,height);

    document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

    //演员进场

    var geometry = new THREE.BoxGeometry(1,1,1);

    //BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。

    var material = new THREE.MeshBasicMaterial({color:'red'});

    //有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();

    var mesh = new THREE.Mesh(geometry,material);

    //需要一个网孔,来承载几何模型和材料

    scene.add(mesh);  //把这个网孔放置到场景中去。

    camera.position.z = 5; //调节相机的位置。

    //懂动起来。

    function loop(){

        requestAnimationFrame(loop);

        mesh.rotation.x += 0.1;  //X选择

        mesh.rotation.y += 0.1;  //Y旋转

        renderer.render(scene,camera); //把画面转换成相机，并播放

    }

    loop();

    //解释下requestAnimationFrame这个api

    /*

     requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，

     比如浏览器Tab切换后停止渲染以节约资源、

     和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。

     简直就是动画神奇

     */

</script>

</html>

六、在WebGL中three.js扮演了重要的角色，然而中文api真的少。只有一个一个的慢慢累积。

Three.js入门篇（一）创建一个场景的更多相关文章

  1. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  2. web前端开发分享-css,js入门篇（转）

    转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...

  3. web前端开发分享-css,js入门篇

    学习没有捷径,但学习是有技巧与方法.   一,css入门篇:   推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选 ...

  4. Vue.js 入门：从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  5. cocos3.2中如何创建一个场景

    1.可以将一些比较通用的东西放到Common.h中,这是一个.h文件,必须手动添加,且保证在classes目录里 #ifndef __COMMON_H__ #define __COMMON_H__ # ...

  6. 【SSRS】入门篇(一) -- 创建SSRS项目

    原文:[SSRS]入门篇(一) -- 创建SSRS项目 在本篇中,您将学习如何在 SQL Server Data Tools (SSDT) 中创建报表服务器项目. 报表服务器项目用于创建在报表服务器中 ...

  7. Three.js 第一篇：绘制一个静态的3D球体

    第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...

  8. Node.js 入门篇

    Node.js 使用C++开发的. Node.js是一个事件驱动服务端JavaScript环境,只要能够安装相应的模块包,就可以开发出需要的服务端程序,如HTTP服务端程序.Socket程序等. No ...

  9. Node.js实战1：创建一个新的Node项目。

    你也许在猜专业的Node开发如何创建一个新项目. 有Npm在 ,这会非常简单. 虽然你可以创建一个JS文件,并执行:node file.js,但我建议你使用npm init来先创建一个node项目,这 ...

随机推荐

  1. PostgreSQL的HOT(Heap-Only Tuples)

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页    回到顶级页面:PostgreSQL索引页 HOT的解释: 如下的日文文档中,有几个图示, ...

  2. 【BZOJ1041】[HAOI2008]圆上的整点

    [BZOJ1041][HAOI2008]圆上的整点 题面 bzoj 洛谷 题解 不妨设\(x>0,y>0\) \[ x^2+y^2=r^2\\ y^2=(x+r)(x-r) \] 设\(r ...

  3. 3530: [Sdoi2014]数数

    3530: [Sdoi2014]数数 链接 分析: 对给定的串建立AC自动机,然后数位dp.数位dp的过程中,记录当前在AC自动机的哪个点上,保证不能走到出现了给定串的点. 代码: #include& ...

  4. wpf 中Listbox获取选中的值

    布局代码: <ListBox  Name="listBox1" Width="120" Height="52"  SelectionC ...

  5. 树莓派 Zero WH 初使用体验

    12号买了一个树莓派 Zero WH,这个是什么型号呢?其实和树莓派Zero是同一系列的,加上W则表示多了无线Wifi和蓝牙模块,加上H则表示在板子上已经焊接好了2x20的排针. 这个Zero真的很迷 ...

  6. Node JS World

    Node JS World Environment tested on Ubuntu Install nvm/node/npm/yarn nvm : node version manager node ...

  7. java练习（一）数组、集合的运用

    有这么一个有趣的问题,问:有这么一个不重复的自然数数组,自然数长度为N,而数组长度为N-2,依次随机把自然数放进数组中,请找出2个没有被放进去的自然数.例如:这个自然数数组是[0, 1, 2, 3,  ...

  8. Myeclipse提高运行速度的方法

    下文是在其他博客拷过来的,借鉴借鉴,留个笔记,哈哈 1.老是弹出Quick update error .关闭myeclipse的Quick Update自动更新功能这个问题的解决办法是关闭自动更新Wi ...

  9. Android Library和Android APP、Java Library的区别

    Android Library和Android APP.Java Library的区别 Android Library在目录结构上与Android App相同,它能包含构建APP所需的一切(如源代码. ...

  10. spring boot 使用及最佳实践

    第一部分,spring boot 文档 Spring boot的使用 使用maven进行构建 用户可以通过继承spring-boot-starter-parent来获取默认的依赖. l  默认java ...