继续上篇随笔

步骤如下：

一：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. 使用Flask开发简单接口(3)--引入MySQL

    前言 前面的两篇文章中,我们已经学习了通过Flask开发GET和POST请求接口,但一直没有实现操作数据库,那么我们今天的目的,就是学习如何将MySQL数据库运用到当前的接口项目中. 本人环境:Pyt ...

  2. python 版本 jaeger-client 导入失败 jaeger-client-python

    环境为: OS: ubuntu18.04 Python: 3.6 问题原因: 尝试使用 jaeger-client-python,官方给出的示例(https://github.com/jaegertr ...

  3. Android ExpandListView的用法（补上昨天的）（今天自习）

    今天自习写ExpandListView的作业,昨天没写博客就是去写作业去了. 今天来说昨天内容吧! 其实ExpandListView和ListView的用法大同小异. 首先就是创建一个自己的适配器(现 ...

  4. 她娇羞道“不用这样细致认真的说啊~~”———详细图解在Linux环境中创建运行C程序

    她娇羞说,不用这样细致认真的说啊———详细图解在Linux环境中创建运行C程序“不,这是对学习的负责”我认真说到 叮叮叮,停车,让我们看看如何在Linux虚拟机环境中,创建运行C程序 详细图解在Lin ...

  5. Druid数据源的使用

    1 Druid数据源简介 Druid是Java语言中最好的数据库连接池.Druid能够提供强大的监控和扩展功能.通过访问http://localhost:8080(自己的端口)/druid/ 可以查看 ...

  6. 常见排序算法原理及JS代码实现

    目录 数组 sort() 方法 冒泡排序 选择排序 插入排序 希尔排序 归并排序 堆排序 快速排序 创建时间:2020-08-07 本文只是将作者学习的过程以及算法理解进行简单的分享,提供多一个角度的 ...

  7. Vue 页面导出成PDF文件

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

  8. 用ps实现提高照片的清晰度

    首先通过ctrl+j 拷贝一份 然后选择滤镜-->其他-->高反差包留 选择叠加,就可以达到效果了,实在不行,多弄几层图层

  9. ANALYZE导致的阻塞问题分析

    背景 问题描述 DBA同学收到qps大量下降的告警,qps从2w下降到1w,然后又自动恢复了. 基于Analysis Report信息,发现有很多 STATE:Waiting for table fl ...

  10. Mysql多条数据以一条展示和判断某字符是否在某字段

    多条数据以一条数据展示:GROUP_CONCAT select GROUP_CONCAT(uuid) from user; 判断某字符是否存在某字段:INSTR select * from( sele ...