Beginner WebGL Engine-babylonjs: 3rd-direction textures with camera

"Playground"-rotatuib abd scaling (direction)

Source

varCreatescene =function () {    varScene =NewBABYLON.    Scene (engine); varCamera =NewBABYLON. Arcrotatecamera ("Camera", Math.PI, MATH.PI/8, 150, BABYLON.    Vector3.zero (), scene); Camera.attachcontrol (Canvas,true); varLight =NewBABYLON. Hemisphericlight ("Hemi",NewBABYLON. Vector3 (0, 1, 0), Scene); //Creation of 3 boxes and 2 spheres    varBox1 = BABYLON. Mesh.createbox ("Box1", 6.0, Scene); varBox2 = BABYLON. Mesh.createbox ("Box2", 6.0, Scene); varBox3 = BABYLON. Mesh.createbox ("Box3", 6.0, Scene); varBox4 = BABYLON. Mesh.createbox ("Box4", 6.0, Scene); varBOX5 = BABYLON. Mesh.createbox ("Box5", 6.0, Scene); varbox6 = BABYLON. Mesh.createbox ("Box6", 6.0, Scene); varBOX7 = BABYLON. Mesh.createbox ("Box7", 6.0, Scene); //Moving boxes on the x axisbox1.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 axisbox1.rotation.x = MATH.PI/6; //Rotate box around the y axisBOX2.ROTATION.Y = MATH.PI/3; //Scaling on the x axisbox4.scaling.x = 2; //Scaling on the y axisBOX5.SCALING.Y = 2; //Scaling on the z axisBox6.scaling.z = 2; //moving box7 relatively to box1Box7.parent =Box1; Box7.position.z=-10; returnscene;}

View Code

Effect

Notes:

This case focuses on the orientation and positioning of the object. Positioning in the original declaration variable to update the new orientation and the specified direction

Location update based on X-axis: box1.position.x =-20;

Rotation update based on x-axis: box1.rotation.x = MATH.PI/6;

X-axis-based extrude update: box4.scaling.x = 2;

Parent-child relative positioning: box7.parent = Box1;box7.position.z =-10; (This part and the relationship between the tea House and the cup processing)

"Playground"-materials (texture)

Source

varCreatescene =function () {    varScene =NewBABYLON.    Scene (engine); //Create a light    varLight =NewBABYLON. Pointlight ("Omni",NewBABYLON. Vector3 (-60, 60, 80), Scene); //Create an Arc Rotate camera-aimed negative Z this time    varCamera =NewBABYLON. Arcrotatecamera ("Camera", MATH.PI/2, 1.0, 110, BABYLON.    Vector3.zero (), scene); Camera.attachcontrol (Canvas,true); //Creation of 6 spheres    varSphere1 = BABYLON. Mesh.createsphere ("Sphere1", 10.0, 9.0, Scene); varSphere2 = BABYLON. Mesh.createsphere ("Sphere2", 2.0, 9.0, Scene);//Only segments    varSphere3 = BABYLON. Mesh.createsphere ("Sphere3", 10.0, 9.0, Scene); varSphere4 = BABYLON. Mesh.createsphere ("Sphere4", 10.0, 9.0, Scene); varSphere5 = BABYLON. Mesh.createsphere ("Sphere5", 10.0, 9.0, Scene); varSphere6 = BABYLON. Mesh.createsphere ("Sphere6", 10.0, 9.0, Scene); //Position the SpheresSphere1.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    varPlane = BABYLON. Mesh.createplane ("Plane", 120, Scene); PLANE.POSITION.Y=-5; Plane.rotation.x= MATH.PI/2; //Creation of a material with WireFrame    varMaterialSphere1 =NewBABYLON. Standardmaterial ("Texture1", Scene); Materialsphere1.wireframe=true; //Creation of a red material with alpha    varMaterialSphere2 =NewBABYLON. Standardmaterial ("Texture2", Scene); Materialsphere2.diffusecolor=NewBABYLON. Color3 (1, 0, 0);//RedMaterialsphere2.alpha = 0.3; //Creation of a material with an image texture    varMaterialSphere3 =NewBABYLON. Standardmaterial ("Texture3", Scene); Materialsphere3.diffusetexture=NewBABYLON. Texture ("Textures/misc.jpg", Scene); //Creation of a material with translated texture    varMaterialSphere4 =NewBABYLON. Standardmaterial ("Texture4", Scene); Materialsphere4.diffusetexture=NewBABYLON. 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    varMaterialSphere5 =NewBABYLON. Standardmaterial ("Texture5", Scene); Materialsphere5.diffusetexture=NewBABYLON. Texture ("Textures/tree.png", Scene); MaterialSphere5.diffuseTexture.hasAlpha=true;//Have an alpha    //Creation of a material and show all the Faces    varMaterialSphere6 =NewBABYLON. Standardmaterial ("Texture6", Scene); Materialsphere6.diffusetexture=NewBABYLON. Texture ("Textures/tree.png", Scene); MaterialSphere6.diffuseTexture.hasAlpha=true;//Has an alphaMaterialsphere6.backfaceculling =false;//Show All the faces of the element    //Creation of a repeated textured material    varMaterialplane =NewBABYLON. Standardmaterial ("Textureplane", Scene); Materialplane.diffusetexture=NewBABYLON. Texture ("Textures/grass.jpg", Scene); MaterialPlane.diffuseTexture.uScale= 5.0;//Repeat 5 times on the Vertical AxesMaterialPlane.diffuseTexture.vScale = 5.0;//Repeat 5 times on the horizontal AxesMaterialplane.backfaceculling =false;//Always show the front and the back of an element    //Apply The materials to meshesSphere1.material =MaterialSphere1; Sphere2.material=MaterialSphere2; Sphere3.material=MaterialSphere3; Sphere4.material=MaterialSphere4; Sphere5.material=MaterialSphere5; Sphere6.material=MaterialSphere6; Plane.material=Materialplane; returnscene;};

View Code

Effect

Notes:

This case explains how 6 textures are handled

1. Cutout

Materialsphere1.wireframe = True

2. Solid Color + Perspective

Materialsphere2.diffusecolor = new BABYLON. Color3 (1, 0, 0); Solid Color Map

Materialsphere2.alpha = 0.3; perspective

3.jpg Map

Materialsphere3.diffusetexture = new BABYLON. Texture ("Textures/misc.jpg", scene); JPG map

4.jpg Map Rollover

MaterialSphere4.diffuseTexture.vOffset = 0.1; vertical Flip
MaterialSphere4.diffuseTexture.uOffset = 0.4; Flip horizontally

5.png Map

Materialsphere5.diffusetexture = new BABYLON. Texture ("Textures/tree.png", Scene);
MaterialSphere5.diffuseTexture.hasAlpha = true;//for PNG transparent (game development friends tell me PNG compare consumption performance)

6.png Map Rollover

materialsphere6.backfaceculling = false;//back map display

In addition, the lens of this case is more interesting, can be moved freely to switch perspective

"Playground"-cameras (camera)

Source

varCreatescene =function () {    varScene =NewBABYLON.    Scene (engine); //Setup a simple environment    varLight0 =NewBABYLON. Pointlight ("Omni",NewBABYLON. Vector3 (0, 2, 8), Scene); varBox1 = BABYLON. Mesh.createbox ("B1", 1.0, Scene); varBox2 = BABYLON. Mesh.createbox ("B2", 1.0, Scene); Box2.position.x=-3; varBox3 = 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    varArccamera =NewBABYLON. Arcrotatecamera ("Arcrotatecamera", 1, 0.8, 10,NewBABYLON. Vector3 (0, 0, 0), Scene); Arccamera.setposition (NewBABYLON. Vector3 (0, 0, 50)); Arccamera.target=NewBABYLON. Vector3 (3, 0, 0); //Freecamera >> You can move around the world with Mouse and keyboard (Left/right/up/down)    //parameters:name, position, scene    varFreecamera =NewBABYLON. Freecamera ("Freecamera",NewBABYLON. Vector3 (0, 0, 5), Scene); Freecamera.rotation=NewBABYLON. Vector3 (0, Math.PI, 0); //Touchcamera >> Move in your world with your touch screens (or with your mouse, by Drag/drop)    //parameters:name, position, scene    varTouchcamera =NewBABYLON. Touchcamera ("Touchcamera",NewBABYLON. Vector3 (0, 0, 10), Scene); Touchcamera.rotation=NewBABYLON. Vector3 (0, Math.PI, 0); //Attach A camera to the scene and the canvasScene.activecamera =Freecamera; Freecamera.attachcontrol (Canvas,true); returnscene;}

View Code

Effect

Notes:

This case describes the processing of 3 cameras

Arcrotatecamera: Operates at one point for the lens direction, and still moves the camera position towards the target

Freecamera: Camera fixed, free to change lens orientation (similar to CS's viewing angle when alive)

Touchcamera: Camera moves, lens points also move (like the god perspective after CS dies)

can be replaced Scene.activecamera = Freecamera;freecamera.attachcontrol (canvas, true); The camera specifies that dragging the mouse and the keyboard feel differently around the top and bottom

Beginner WebGL Engine-babylonjs: 3rd-direction textures and cameras