Babylon.js - 起步

最新推荐文章于 2024-07-07 11:31:22 发布

木·本

最新推荐文章于 2024-07-07 11:31:22 发布

阅读量2.1k

点赞数 1

分类专栏： BabylonJS

本文链接：https://blog.csdn.net/qq_43758883/article/details/107122990

版权

BabylonJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CDN

可以在https://cdn.babylonjs.com/xxx上找到其他参考，其中xxx是可以在/dist文件夹中找到的文件夹结构，如下所示：

https://cdn.babylonjs.com/gui/babylon.gui.min.js

对于预览版本，可以使用以下URL链接：

其他参考资料可在https://preview.babylonjs.com/xxx上找到，其中xxx是可以在/dist/预览版文件夹（如https://preview.babylonjs.com/gui/babylon.gui.min.js）中找到的文件夹结构

<!--- 使用cdn提供的url链接 --->
<!--- Link to the last version of BabylonJS --->
<script src="https://cdn.babylonjs.com/babylon.js"></script>

npm

使用npm来为项目安装BabylonJS：

npm install babylonjs --save

使用以下命令导入BabylonJS：

import * as BABYLON from 'babylonjs';

或加载特定的类：

import { Scene, Engine } from 'babylonjs';

在这里插入图片描述

Start

/第一步从HTML文档中获取canvas元素的引用：

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

然后，加载 Babylon 3D 引擎：

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

创建名为 createScene 的 function，并返回 scene ：

var createScene = function(){
	// Create a basic BJS Scene object.
	var scene = new BABYLON.Scene(engine);
	
	var camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5, -10), scene);

    // Target the camera to scene origin.
    camera.setTarget(BABYLON.Vector3.Zero());

    // Attach the camera to the canvas.
    camera.attachControl(canvas, false);
    
	...
	
	// Return the created scene.
	return scene;
}

注意: 其中的 camera 是必须的。

接下来渲染场景：

// 调用createScene
var scene = createScene();

// 注册一个渲染循环来重复渲染画布上的场景：
engine.runRenderLoop(function () {
    scene.render();
});

以上便创建了一个最基本的BabylonJS场景，不过场景中还未添加任何物体，之后的文章中再来介绍如何添加物体。

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Babylon - Getting Started</title>

    <style>
		html, body {
		    overflow: hidden;
		    width: 100%;
		    height: 100%;
		    margin: 0;
		    padding: 0;
		}
		
		#renderCanvas {
		    width: 100%;
		    height: 100%;
		    touch-action: none;
		}
	</style>
		
    <!--- Link to the last version of BabylonJS --->
    <script src="https://cdn.babylonjs.com/babylon.js"></script>

</head>

<body>

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

    <script>

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

		    var canvas = document.getElementById('renderCanvas');
		
		    var engine = new BABYLON.Engine(canvas, true);
		    
		    var createScene = function () {
		
		        // Create a basic BJS Scene object.
		        var scene = new BABYLON.Scene(engine);
		
		        // Create a FreeCamera, and set its position to (x:0, y:5, z:-10).
		        var camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5, -10), scene);
		
		        // Target the camera to scene origin.
		        camera.setTarget(BABYLON.Vector3.Zero());
		
		        // Attach the camera to the canvas.
		        camera.attachControl(canvas, false);
		
		        // Return the created scene.
		        return scene;
		
		    }
		
		    // 调用createScene
		    var scene = createScene();
		
		    // 注册一个渲染循环来重复渲染画布上的场景：
		    engine.runRenderLoop(function () {
		        scene.render();
		    });
		
		    // 最后，您应该实现一个canvas/window resize 事件处理程序，如下所示：
		    window.addEventListener('resize', function () {
		        engine.resize();
		    });
		
		});

    </script>
</body>

</html>

木·本

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Babylon.js - 起步

相关网站Babylon.js 官方网站Babylon.js 中文网Babylon.js Github地址CDNhttps://cdn.babylonjs.com/babylon.jshttps://cdn.babylonjs.com/babylon.max.js可以在https://cdn.babylonjs.com/xxx上找到其他参考，其中xxx是可以在/dist文件夹中找到的文件夹结构，如下所示：https://cdn.babylonjs.com/gui/babylon.gui.
复制链接

扫一扫