分类: 翻译 > babylonjs

05-Lights

发表于5年前(May 9, 2017 7:33:00 PM)  阅读 3437  评论 2

分类: 翻译 babylonjs

标签: babylonjs

现在您已经了解了各种camera,以及如何将它们加入到scene,接下来我们将继续我们的教程,来学习lights。

上面的球体是不是很漂亮,因为有多个光源的照射。

我们该如何做?

lights用来产生像素接收的漫射和镜面反射。这个颜色通过materials最终决定每个像素的颜色。

通过这节,我们将学会使用各种各样的light。

激活/解除lights

light可以通过调用setEnabled(true/false)方法来激活或者解除。你也可以通过设置intensity属性来设置全局所有light的光线强度。intensity是浮点数(如1.5)。在章节末尾我们将演示如何使用intensity属性以及setEnabled()方法。

各种Lights类型

下面我们将介绍4种很cool的light:

  • Point Light

......

04-Cameras

发表于5年前(Apr 14, 2017 5:50:00 PM)  阅读 6281  评论 0

分类: 翻译 babylonjs

标签: babylonjs cameras

Babylon.js Cameras

 在所有的babylon场景中,您可以创建任意数量的cameras,但是,在同一时刻只能有一个camera是被激活的(除非您在使用multi-viewports)。

Camera的管理在babylon.js中非常简单:首先,您得创建一个camera,然后将它绑定到canvas的mouse、touch输入(参见Wrapping Up章节)。

Babylon.js支持许多类型的cameras。我们从两种常用的讲起-FreeCamera和ArcRotateCamera。

  • FreeCamera-这是一个FPS(第一人称射击游戏)类型的camera。像大多数别的cameras一样,您可以为他们添加控制键,或者为他们指定新的快捷键,如'w','a','s'和
......

03-Materials(材料,材质)

发表于6年前(Mar 29, 2017 10:00:00 AM)  阅读 6567  评论 0

分类: babylonjs 翻译

标签: babylonjs

介绍

现在您已经可以在场景的任意位置来创建不同的基础元素,接下来,我们将给这些元素一些materials,用来定义他们的材质外观。

Playground Demo Scene 4 - Materials

我们该怎么做呢?

我们现在已经非常熟练createScene方法的使用,闭着眼睛都能做到。现在我们来使用一个全方位的PointLight光源和一个ArcRotateCamera摄像头,然后我们来测试我们的材料。

function createScene() {
    var scene = new BABYLON.Scene(engine);
    var light = new BABYLON.PointLight("Omni", new B
......

02-了解基础图形

发表于6年前(Mar 26, 2017 3:21:00 PM)  阅读 5848  评论 0

分类: 翻译 babylonjs

标签: babylonjs

介绍

在这篇教程,我们将学习如何通过Babylon.js来创建像盒子,球体还有平面这样的基础图形。

Playground Demo Scene02-7个基础的形状/物体

我们如何画出这些?

一个简单的办法就是访问Playground Demo Scene02,选择顶部菜单中的Get.zip选项,index.html将会同zip一起下载下来。index.html包含了我们上图的所有基本图形。记住这个链接地址,接下来我们还会多次提到它。

我相信您已经阅读了Babylon.js介绍

......

01-创建一个基础场景

发表于6年前(Mar 23, 2017 7:49:00 PM)  阅读 4194  评论 0

分类: 翻译 babylonjs

标签: babylonjs

在本教程,我们将会使用Babylon.js创建一个基础的3D场景。

在上面基础场景里面有两个基础图形。

在开始前,请您确认您的浏览器是否支持WebGL特性(Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+等等是支持的)。

HTML代码部分

首先,创建一个基本的HTML5 web页面:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>Babylon - Basic scene<
......

00-入门

发表于6年前(Mar 23, 2017 12:25:00 PM)  阅读 3098  评论 0

分类: 翻译 babylonjs

标签: babylonjs

babylonjs

一个基于webGL和JavaScript的开源3D引擎。

快速安装

使用BdbylonJS开发应用并不需要在您电脑上额外安装其他软件。同样客户运行您的应用也不需要安装任何东西。您待会可以在下面的入门教程中看到这一切。您可以通过查看文档结构图来了解一个大概,或者查看更详细的内容。

WebGL

Web图形库,也可以说它是一个JavsScript的API,用来在一些兼容WebGL的浏览器上展现可交互的3D图形以及2D图形,而且不需要别的任何插件。

JavaScript

同ECMAScript,JavaScript是一个动态的、基于原型的脚本语言,功能非常强大。广泛用于客户端(有时甚至用于服务端,本站就是)。BabylonJS就是基于JavsScript语言的。

快速入门

首先,我们下载最新版本的BabylonJS,然后,检查一下您的浏览器是否支持WebGL特性(支持的有

......