【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);的相机指定，拖动鼠标和键盘上下左右感受不一样的效果