初学WebGL引擎-BabylonJS：第3篇-方向纹理与相机

【playground】-rotatuib abd scaling（方向）

源码

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

    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI, Math.PI / 8, 150, BABYLON.Vector3.Zero(), scene);

    camera.attachControl(canvas, true);

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

    //Creation of 3 boxes and 2 spheres
    var box1 = BABYLON.Mesh.CreateBox("Box1", 6.0, scene);
    var box2 = BABYLON.Mesh.CreateBox("Box2", 6.0, scene);
    var box3 = BABYLON.Mesh.CreateBox("Box3", 6.0, scene);
    var box4 = BABYLON.Mesh.CreateBox("Box4", 6.0, scene);
    var box5 = BABYLON.Mesh.CreateBox("Box5", 6.0, scene);
    var box6 = BABYLON.Mesh.CreateBox("Box6", 6.0, scene);
    var box7 = BABYLON.Mesh.CreateBox("Box7", 6.0, scene);

    //Moving boxes on the x axis
    box1.position.x = -20;
    box2.position.x = -10;
    box3.position.x = 0;
    box4.position.x = 15;
    box5.position.x = 30;
    box6.position.x = 45;

    //Rotate box around the x axis
    box1.rotation.x = Math.PI / 6;

    //Rotate box around the y axis
    box2.rotation.y = Math.PI / 3;

    //Scaling on the x axis
    box4.scaling.x = 2;

    //Scaling on the y axis
    box5.scaling.y = 2;

    //Scaling on the z axis
    box6.scaling.z = 2;

    //Moving box7 relatively to box1
    box7.parent = box1;
    box7.position.z = -10;

    return scene;
}

效果

笔记：

该案例主要讲解物体的方向和定位处理。在原有的声明变量中的定位改为更新新的定位和指定方向

基于X轴的定位更新：box1.position.x = -20;

基于X轴的旋转更新：box1.rotation.x = Math.PI / 6;

基于X轴的拉伸更新：box4.scaling.x = 2;

父子相对定位：box7.parent = box1;box7.position.z = -10;（该部分和用于茶座与杯子的关系处理）

---

【playground】-materials（纹理）

源码

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

    //Create a light
    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);

    //Create an Arc Rotate Camera - aimed negative z this time
    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 110, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    //Creation of 6 spheres
    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 9.0, scene);
    var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 2.0, 9.0, scene);//Only two segments
    var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 10.0, 9.0, scene);
    var sphere4 = BABYLON.Mesh.CreateSphere("Sphere4", 10.0, 9.0, scene);
    var sphere5 = BABYLON.Mesh.CreateSphere("Sphere5", 10.0, 9.0, scene);
    var sphere6 = BABYLON.Mesh.CreateSphere("Sphere6", 10.0, 9.0, scene);

    //Position the spheres
    sphere1.position.x = 40;
    sphere2.position.x = 25;
    sphere3.position.x = 10;
    sphere4.position.x = -5;
    sphere5.position.x = -20;
    sphere6.position.x = -35;

    //Creation of a plane
    var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
    plane.position.y = -5;
    plane.rotation.x = Math.PI / 2;

    //Creation of a material with wireFrame
    var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
    materialSphere1.wireframe = true;

    //Creation of a red material with alpha
    var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene);
    materialSphere2.diffuseColor = new BABYLON.Color3(1, 0, 0); //Red
    materialSphere2.alpha = 0.3;

    //Creation of a material with an image texture
    var materialSphere3 = new BABYLON.StandardMaterial("texture3", scene);
    materialSphere3.diffuseTexture = new BABYLON.Texture("textures/misc.jpg", scene);

    //Creation of a material with translated texture
    var materialSphere4 = new BABYLON.StandardMaterial("texture4", scene);
    materialSphere4.diffuseTexture = new BABYLON.Texture("textures/misc.jpg", scene);
    materialSphere4.diffuseTexture.vOffset = 0.1;//Vertical offset of 10%
    materialSphere4.diffuseTexture.uOffset = 0.4;//Horizontal offset of 40%

    //Creation of a material with an alpha texture
    var materialSphere5 = new BABYLON.StandardMaterial("texture5", scene);
    materialSphere5.diffuseTexture = new BABYLON.Texture("textures/tree.png", scene);
    materialSphere5.diffuseTexture.hasAlpha = true;//Has an alpha

    //Creation of a material and show all the faces
    var materialSphere6 = new BABYLON.StandardMaterial("texture6", scene);
    materialSphere6.diffuseTexture = new BABYLON.Texture("textures/tree.png", scene);
    materialSphere6.diffuseTexture.hasAlpha = true;//Have an alpha
    materialSphere6.backFaceCulling = false;//Show all the faces of the element

    //Creation of a repeated textured material
    var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
    materialPlane.diffuseTexture = new BABYLON.Texture("textures/grass.jpg", scene);
    materialPlane.diffuseTexture.uScale = 5.0;//Repeat 5 times on the Vertical Axes
    materialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the Horizontal Axes
    materialPlane.backFaceCulling = false;//Always show the front and the back of an element

    //Apply the materials to meshes
    sphere1.material = materialSphere1;
    sphere2.material = materialSphere2;

    sphere3.material = materialSphere3;
    sphere4.material = materialSphere4;

    sphere5.material = materialSphere5;
    sphere6.material = materialSphere6;

    plane.material = materialPlane;

    return scene;
};

效果

笔记：

本案例讲解了6种纹理的处理方式

1.镂空

materialSphere1.wireframe = true

2.纯色+透视

materialSphere2.diffuseColor = new BABYLON.Color3(1, 0, 0); 纯色贴图

materialSphere2.alpha = 0.3;透视

3.jpg贴图

materialSphere3.diffuseTexture = new BABYLON.Texture("textures/misc.jpg", scene);jpg贴图

4.jpg贴图翻转

materialSphere4.diffuseTexture.vOffset = 0.1;垂直翻转
    materialSphere4.diffuseTexture.uOffset = 0.4;水平翻转

5.png贴图

materialSphere5.diffuseTexture = new BABYLON.Texture("textures/tree.png", scene);
    materialSphere5.diffuseTexture.hasAlpha = true;//适用png的透明（游戏开发的朋友告诉我png比较消耗性能）

6.png贴图翻转

materialSphere6.backFaceCulling = false;//背面贴图显示

另外本案例的镜头比较有意思，可以自由移动切换视角

---

【playground】-cameras（相机）

源码

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

    // Setup a simple environment
    var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 2, 8), scene);
    var box1 = BABYLON.Mesh.CreateBox("b1", 1.0, scene);
    var box2 = BABYLON.Mesh.CreateBox("b2", 1.0, scene);
    box2.position.x = -3;
    var box3 = BABYLON.Mesh.CreateBox("b3", 1.0, scene);
    box3.position.x = 3;

    // ArcRotateCamera >> Camera rotating around a 3D point (here Vector zero)
    // Parameters : name, alpha, beta, radius, target, scene
    var arcCamera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
    arcCamera.setPosition(new BABYLON.Vector3(0, 0, 50));
    arcCamera.target = new BABYLON.Vector3(3, 0, 0);

    // FreeCamera >> You can move around the world with mouse and keyboard (LEFT/RIGHT/UP/DOWN)
    // Parameters : name, position, scene
    var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, 5), scene);
    freeCamera.rotation = new BABYLON.Vector3(0, Math.PI, 0);

    // TouchCamera >> Move in your world with your touch screen (or with your mouse, by drag/drop)
    // Parameters : name, position, scene
    var touchCamera = new BABYLON.TouchCamera("TouchCamera", new BABYLON.Vector3(0, 0, 10), scene);
    touchCamera.rotation = new BABYLON.Vector3(0, Math.PI, 0);

    //Attach a camera to the scene and the canvas
    scene.activeCamera = freeCamera;
    freeCamera.attachControl(canvas, true);

    return scene;
}

效果

笔记：

该案例介绍了3种相机的处理

ArcRotateCamera：以一点为镜头方向点运转，移动相机位置后仍旧镜头朝向目标

FreeCamera：相机固定，可自由变换镜头方向（类似于CS活着时候的视角）

TouchCamera：相机移动，镜头点也跟着移动（类似CS死掉后的上帝视角）

可以更换scene.activeCamera = freeCamera;freeCamera.attachControl(canvas, true);的相机指定，拖动鼠标和键盘上下左右感受不一样的效果