继续上篇随笔

步骤如下：

一：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. 《第22条军规》Catch-22

    也许我们能注意到,英语里“军规”和“圈套”是同一个词. <第二十二条军规>是约瑟夫·海勒的代表作,小说以第二次世界大战期间驻扎在皮亚诺扎岛上的一支美国飞行队为背景,描写飞行员约瑟连(YOY ...

  2. JS解密入门——有道翻译

    JS解密入门——有道翻译 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这 ...

  3. Python使用socketServer包搭建简易服务器过程详解

    官方提供了socketserver包去方便我们快速的搭建一个服务器框架. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的 ...

  4. Bytom 储蓄分红 DAPP 开发指南

    储蓄分红DAPP 储蓄分红合约简介 储蓄分红合约指的是项目方发起了一个锁仓计划(即储蓄合约和取现合约),用户可以在准备期自由选择锁仓金额参与该计划,等到锁仓到期之后还可以自动获取锁仓的利润.用户可以在 ...

  5. CSS学习第三天

    定位布局: 相对定位:相对于自身的位置进行偏移position需要搭配left right top bottom      position: relative; 绝对定位:相对于有position属 ...

  6. C#LeetCode刷题-并查集

    并查集篇 # 题名 刷题 通过率 难度 128 最长连续序列   39.3% 困难 130 被围绕的区域   30.5% 中等 200 岛屿的个数   38.4% 中等 547 朋友圈   45.1% ...

  7. C#LeetCode刷题之#557-反转字符串中的单词 III（Reverse Words in a String III）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3955 访问. 给定一个字符串,你需要反转字符串中每个单词的字符顺 ...

  8. Vue 页面导出成PDF文件

    注意事项 如果导出的页面中设计到图片或者其他文件跨域文件,需要后端服务配合 安装依赖 npm install html2Canvas --save npm install jspdf--save 封装 ...

  9. python爬虫之Beautiful Soup基础知识+实例

    python爬虫之Beautiful Soup基础知识 Beautiful Soup是一个可以从HTML或XML文件中提取数据的python库.它能通过你喜欢的转换器实现惯用的文档导航,查找,修改文档 ...

  10. Java学习之反射篇

    Java学习之反射篇 0x00 前言 今天简单来记录一下,反射与注解的一些东西,反射这个机制对于后面的java反序列化漏洞研究和代码审计也是比较重要. 0x01 反射机制概述 Java反射是Java非 ...