继续上篇随笔

步骤如下：

一：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. MySQL的utf8问题

    作者:brightwang 原文:https://www.jianshu.com/p/ab9aa8d4df7d 有时候用MySQL存储一些特殊字符时,有出现乱码问题. 我用的是UTF-8编码的客户端, ...

  2. 基于视频压缩的实时监控系统-sprint2采集端图像采集子系统设计

    (1).初始化:a.初始化摄像头:b.注册事件到epoll (2).开始采集--->触发事件处理系统 (3).保存图像(方便测试) a.初始化摄像头 //初始化摄像头 1.获取驱动信息 2.设置 ...

  3. Python解决网吧收费系统，远控网吧电脑设备！

    python破解网吧收费系统,远控网吧电脑设备! 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更 ...

  4. Python面向对象编程扑克牌发牌程序，另含大量Python代码！

    1. 题目 编写程序, 4名牌手打牌,计算机随机将52张牌(不含大小鬼)发给4名牌手,在屏幕上显示每位牌手的牌. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不 ...

  5. Python爬取网站上面的数据很简单，但是如何爬取APP上面的数据呢

  6. PYTHON实战完整教程1-配置VSCode开发环境

    一.安装 为降低学习门槛,保证学习目标的聚焦,我们在windows(使用WinServer2019虚拟机)上搭建开发环境.(系列教程最后结束时,也会部署到linux上) 打开Python官网 http ...

  7. Springboot日志LOGO改变和设计

    每次启动Springboot的时候,SpringBoot都会打印一个LOGO,那么这个LOGO是可以关闭和改变的. 1.关闭Springboot的LOGO 2.改变Springboot的日志LOGO ...

  8. Umlet和draw.io 使用心得

    文章目录 软件使用心得 1. Umlet 画图软件 1.1 前言 1.2 优点 1.3使用小trick 1.3.1 灵活改变箭头形式 1.3.2 整体复制 1.3.3 快速复制 2. draw.io ...

  9. name 'xrange' is not defined

    出现这个错误是因为examples使用的是Python2 在Python3中,移除了在Python2中的range, 并将 xrange 命名为 range 将代码中的xrange改为range就可以 ...

  10. 单元测试新方法：用setUp方法 @Before注释

    public class CentralizedPUDMatchServicePacTest { PacMatchService pacMatchService; @Before public voi ...