继续上篇随笔

步骤如下：

一：http://www.babylonjs.com/中下载源码。获取其中babylon.2.2.js。建立gulp项目

二：参见http://doc.babylonjs.com/部分，建立第一个demo

以下是个人完成后的demo分享

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>

    <title>Babylon - Getting Started</title>

    <!-- link to the last version of babylon -->

    <script src="babylon.2.2.max.js"></script>

</head>

<style>

    html, body {

        overflow: hidden;

        width   : 100%;

        height  : 100%;

        margin  : 0;

        padding : 0;

    }

    #renderCanvas {

        width   : 100%;

        height  : 100%;

        touch-action: none;

    }

</style>

<body>

    <canvas id="renderCanvas"></canvas>

    <script>

    window.addEventListener('DOMContentLoaded', function() {

        //获取画布对象

       var canvas = document.getElementById('renderCanvas');

       //加载巴比伦3D引擎

       var engine = new BABYLON.Engine(canvas, true);

       //创建场景

       var createScene = function() {

            // 通过引擎创建基本场景

            var scene = new BABYLON.Scene(engine);

            // 创建一个开放免费的相机，地点位于x:0(横向距离), y:5(高度), z:-10(纵向距离)

            var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(9, 5,-10), scene);

            // 相机到场景的起源

            camera.setTarget(BABYLON.Vector3.Zero());

            // 相机放置画布

            camera.attachControl(canvas, false);

            // 创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现)

            var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

            // 创建一个内置的“球”的形状,它的构造函数包括5个参数:名称、宽度、深度、细分,场景(例子中仅4个参数)

            var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

            // 球向上移动高的二分之一距离

            sphere.position.y = 1;

            // 创建一个内置的“地面”，它的构造函数包括5个参数:名称、宽度、深度、细分,场景

            var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

            // 返回该场景

            return scene;

        }

        //赋予该场景于变量

        var scene = createScene();

        //在引擎中循环运行这个场景

        engine.runRenderLoop(function(){

            scene.render();

        });

        //追加事件：帆布与大小调整程序

        window.addEventListener('resize', function(){

            engine.resize();

        });

    });

</script>

</body>

</html>

完成这个后，一个初步的思路达成。

一个基础构造分为了：镜头+渲染+场景。辅助部分包括光源+模型+画布

坐标点的三部分：X（长）,Y（高度）,Z（深度）

BABYLON对象下拥有相机的定义，光源的定义

BABYLON.Mesh对象下有个简单物体的定义

接着便发现了更合适的学习方式：http://www.babylonjs-playground.com

初学WebGL引擎-BabylonJS：第1篇-基础构造的更多相关文章

  1. 初学WebGL引擎-BabylonJS：第0篇-起因

    学习WebGL的BabylonJS是在一次偶然的情况下进行的,主要为了满足个人对全栈开发的欲望. 言归正传,下面开始简单说说相关过程 WebGL是什么?WebGL是基于html的客户端页面技术,基于h ...

  2. 初学WebGL引擎-BabylonJS：第2篇-基础模型体验

    此次学习进度会比之前快很多,有了合适的学习方法后也就会有更多的乐趣产生了. 接上一章代码 上章代码 <!DOCTYPE html> <html> <head> &l ...

  3. 初学WebGL引擎-BabylonJS：第8篇-阴影网格与活动

    [playground]-shadows(阴影) 源码 var createScene = function () { var scene = new BABYLON.Scene(engine); / ...

  4. 初学WebGL引擎-BabylonJS：第6篇-碰撞交错与挑选

    [playground]-collisions(碰撞) 先贴官方源码(机器翻译版本) var createScene = function () { var scene = new BABYLON.S ...

  5. 初学WebGL引擎-BabylonJS：第4篇-灯光动画与丛林场景

    前几章接触的案例都是接近静态的,由这张开始开始接触大量动态的内容,包括 球体灯光,变动的形体,以及一个虚拟的丛林场景 下章我会试着结合1-9案例的内容做出一个demo出来 [playground]-l ...

  6. 初学WebGL引擎-BabylonJS：第3篇-方向纹理与相机

    [playground]-rotatuib abd scaling(方向) 源码 var createScene = function () { var scene = new BABYLON.Sce ...

  7. 用基于WebGL的BabylonJS来共享你的3D扫描模型

    转自:http://www.geekfan.net/6578/ 用基于WebGL的BabylonJS来共享你的3D扫描模型 杰克祥子 2014 年 2 月 26 日 0 条评论 标签:3D扫描 , B ...

  8. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  9. [译]PrestaShop开发者指南 第一篇 基础

    # 第一篇 基础 PS(PrestaShop简称)一开始就设定了能够在它的基础上很简单的构建第三方模块的机制,让它成为一款具有极高定制性的电子商务软件. PS的可以在三个方面进行定制: * 主题 * ...

随机推荐

  1. OpenCL 增强单work-item kernel性能策略

    1.基于反馈的Optimization Report解决单个Work-item的Kernel相关性 在许多情况下,将OpenCL™应用程序设计为单个工作项内核就足以在不执行其他优化步骤的情况下最大化性 ...

  2. 实验09——java基于TCP实现客户端与服务端通信

    TCP通信         需要先创建连接 - 并且在创建连接的过程中 需要经过三次握手        底层通过 流 发送数据 数据没有大小限制        可靠的传输机制 - 丢包重发 包的顺序的 ...

  3. “随手记”开发记录day20

    练习软件的展示,尽量将软件全方面的展示给大众,希望不要像上次一样有许多遗漏的地方,让其他团队以为我们的软件没有完善的功能.

  4. 【av68676164（p43-p47)】物理内存管理

    7.2.1 分区内存管理 把内存分为若干个区给用户使用 单一区存储管理 分区存储管理 固定分区 动态分区 单一区存储管理(不分区存储管理) 定义:用户区不分区,完全被一个程序占用.例如:DOS 优点: ...

  5. 3、Template Method 模板方法 行为型设计模式

    1.了解模板方法 1.1 模式定义 定义一个操作算法中的框架,而将这些步骤延迟加载到子类中. 它的本质就是固定算法框架. 1.2 解决何种问题 让父类控制子类方法的调用顺序 模板方法模式使得子类可以不 ...

  6. 最受欢迎的 15 大 Python 库（2017）

    核心库 1. NumPy (提交数: 15980, 贡献者数: 522) 当开始处理Python中的科学任务,Python的SciPy Stack肯定可以提供帮助,它是专门为Python中科学计算而设 ...

  7. Homekit_温湿度_人体红外_光强_传感器

    市面上大多数,传感器产品多是简单的单个传感器进行售卖,这里我推荐一款四合一的产品,使用Homekit进行控制. 前置需求: 苹果手机一台 四合一传感器一个 USB数据线一根 介绍: 1.外观上是一个小 ...

  8. Java学习书籍与社区

    编码规范:<阿里巴巴Java开发手册> 技术架构:<大型网站技术架构核心原理与案例分析>---李智慧 Spring架构与设计原理解析:<Spring技术内幕深入解析Spr ...

  9. 碰到 Json_CSRF 怎么办？

    前言 在最近挖洞的时候,老是碰到 POST 传参采用 JSON 格式,而不是传统的parameter=value的格式,之前也没接触过,所以也不知道该怎么搞,所以打算学习一下,此文作为一个笔记梳理. ...

  10. CSS动画实例：Loading加载动画效果（一）

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...