Web 3d世界使用Babylon.js 渲染第一台车Web 3d世界使用Babylon.js 渲染第一台车，学会了吗？

基本HTML来快速开发

<!DOCTYPE html>
<html>
<head>
    <title>3D世界之使用BabylonJs生产第一台车</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <style>
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        
    </script>
</body>
</html>

设置Babylon.js场景

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);

var createScene = function () {
    var scene = new BABYLON.Scene(engine);
    return scene;
};

var scene = createScene();

engine.runRenderLoop(function () {
    scene.render();
});

window.addEventListener("resize", function () {
    engine.resize();
});

添加相机（参考之前的文章3D世界的窗口和导航者——探索Babylon.js相机）

var camera = new BABYLON.ArcRotateCamera("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 1, 0), scene);
camera.attachControl(canvas, true);

导入和加载车模型

BABYLON.SceneLoader.ImportMesh("", "", "car.babylon", scene, function (newMeshes) {  var car = newMeshes[0]; car.position = new BABYLON.Vector3(0, 0, 0); car.scaling = new BABYLON.Vector3(0.1, 0.1, 0.1); });

添加光源

var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

到此第一台车已经渲染好，学会了吗？动手run起来，犒劳自己一台3d车。