webGL 3D 从 three.js 到 babylon.js
2018-10-03 本文已影响8人
x1911
试了多个月的three.js，已经做出一个多人在线的游戏，可经历了多次写入新功能，对于这个渲染引擎做一个游戏，实在需要太多劳心的内容，决定从今天开始试试微软的babylon.js
最初级的babylon教程可以看这个
http://ljzc002.github.io/BABYLON/HTML/001Basic_scene.html
html 中的内容很简单了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style>
<!-- 自动获取最新版的baby -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="js/main.js"></script>
</body>
</html>
然后自己写的main.js的内容如下
window.addEventListener('DOMContentLoaded', function() {
// All the following code is entered here.
var canvas = document.getElementById('renderCanvas');
start(canvas)
});
function start (canvas) {
// get the canvas DOM element
// load the 3D engine
var engine = new BABYLON.Engine(canvas, true);
// createScene function that creates and return the scene
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('camera1', 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);
// create a basic light, aiming 0,1,0 - meaning, to the sky
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
light.intensity = 0.4
// create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
// move the sphere upward 1/2 of its height
sphere.position.y = 1;
// create a built-in "ground" shape;
var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);
// return the created scene
return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
engine.resize();
});
}
把上面的代码码出来就有了一个最简单的场景
对于从three切换过来的我，这样的相机控制实在不舒服
那就把camera的内容切换成
var camera = new BABYLON.ArcRotateCamera("Camera", 1.0,
1.0, 12, BABYLON.Vector3.Zero(), scene);
image.png
做到这里你应该就和我一样看到这个基本球配面的内容，这里就可以用鼠标自由转动了～～
