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

Source: Internet
Author: User

"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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.