Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Change material colour

makugym

By makugym,
in Questions & Answers

 Share

Recommended Posts

makugym Newbie

makugym

Posted
Posted

Hi everyone,

I need help. Could someone write for me function 'myFunction' which changes the colour of the material. I don't know in which place I need add this.

Commented function setTimeot change the colour. When I added function 'myFunction' in this place i have error 'myFunction is not defined'.

Do you have good tutorials for the beginners?

  

<!DOCTYPE html>
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
      <title>Babylon - Getting Started</title>
      <!-- link to the last version of babylon -->
      <script src="js/babylon.2.5.js"></script>
      <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <canvas id="renderCanvas"></canvas>

  <div>
  	<button onclick="myFunction()">Click me</button>
  </div>

  <script>
    window.addEventListener('DOMContentLoaded', function() {

      // your code here
      var canvas = document.getElementById('renderCanvas');
      var engine = new BABYLON.Engine(canvas, true);


      var createScene = function() {
        // create a basic BJS Scene object
        var scene = new BABYLON.Scene(engine);

        // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
        var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

        // target the camera to scene origin
        camera.setTarget(BABYLON.Vector3.Zero());

        // attach the camera to the canvas
        camera.attachControl(canvas, false);

        // create a basic light, aiming 0,1,0 - meaning, to the sky
        var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

        // create a built-in "sphere" shape; its constructor takes 4 params: name, subdivisions, radius, scene
        var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

        // move the sphere upward 1/2 of its height
        sphere.position.y = 1;

        // create a built-in "ground" shape; its constructor takes 5 params: name, width, height, subdivisions and scene
        var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

        // Define a material
        var material = new BABYLON.StandardMaterial("std", scene);
        material.diffuseColor = new BABYLON.Color3(0.5, 1, 0.5);
        //setTimeout(function(){ material.diffuseColor = new BABYLON.Color3(0.5, 1, 2); }, 3000);

        // Apply the material
        sphere.material = material;

        // return the created scene
        return scene;
      }

      var scene = createScene();
      engine.runRenderLoop(function() {
          scene.render();
      });

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

  </script>
  </body>
</html>

 

Link to comment
Share on other sites
makugym Newbie

makugym

Posted
  • Author
Posted

Thanks for answers it is working.:D I have one more question. I exported the file from Blender.

How I can change colour of the Cube. 

Code from blender file 

{"producer":{"name":"Blender","version":"2.78 (sub 0)","exporter_version":"4.6.1","file":"szescian.babylon"},
"autoClear":true,"clearColor":[0.0509,0.0509,0.0509],"ambientColor":[0,0,0],"gravity":[0,-9.81,0],
"materials":[{"name":"szescian.Material","id":"szescian.Material","ambient":[0.8,0.8,0.8],"diffuse":[0.64,0.64,0.64],"specular":[0.5,0.5,0.5],"emissive":[0,0,0],"specularPower":50,"alpha":1,"backFaceCulling":true,"checkReadyOnlyOnce":false}],
"multiMaterials":[],
"skeletons":[],
"meshes":[{"name":"Cube","id":"Cube","materialId":"szescian.Material","billboardMode":0,"position":[0,1,0],"rotation":[0,0,0],"scaling":[1,1,1],"isVisible":true,"freezeWorldMatrix":false,"isEnabled":true,"checkCollisions":false,"receiveShadows":false
,"positions":[1,-1,-1,-1,-1,1,1,-1,1,-1,1,1,1,1,-1,1,1,1,-1,-1,-1,-1,1,-1]
,"normals":[0.5773,-0.5773,-0.5773,-0.5773,-0.5773,0.5773,0.5773,-0.5773,0.5773,-0.5773,0.5773,0.5773,0.5773,0.5773,-0.5773,0.5773,0.5773,0.5773,-0.5773,-0.5773,-0.5773,-0.5773,0.5773,-0.5773]
,"indices":[0,1,2,3,4,5,5,0,2,4,6,0,6,3,1,2,3,5,0,6,1,3,7,4,5,4,0,4,7,6,6,7,3,2,1,3]
,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":8,"indexStart":0,"indexCount":36}]
,"instances":[]}
],
"cameras":[{"name":"Camera","id":"Camera","position":[7.4811,5.3437,-6.5076],"rotation":[0.4615,-0.8149,0],"fov":0.8576,"minZ":0.1,"maxZ":100,"speed":1,"inertia":0.9,"checkCollisions":false,"applyGravity":false,"ellipsoid":[0.2,0.9,0.2],"cameraRigMode":0,"interaxial_distance":0.0637,"type":"FreeCamera"}],"activeCamera":"Camera",
"lights":[{"name":"Lamp","id":"Lamp","type":0,"position":[4.0762,5.9039,1.0055],"intensity":1,"diffuse":[1,1,1],"specular":[1,1,1]}],
"shadowGenerators":[]
}

Code from script 


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

	BABYLON.SceneLoader.Load("", "szescian.babylon", engine, function(newScene) {
		var Scene = newScene;
		Scene.executeWhenReady(function(){
			Scene.activeCamera.attachControl(canvas);
			engine.runRenderLoop(function(){
				Scene.render();
			});
		});

	window.addEventListener("resize",function(){
		engine.resize();
	});
</script>

 

Link to comment
Share on other sites
Borislav Newbie

Borislav

Posted
Posted
3 minutes ago, makugym said:

Thanks for answers it is working.:D I have one more question. I exported the file from Blender.

How I can change colour of the Cube. 

Code from blender file 


{"producer":{"name":"Blender","version":"2.78 (sub 0)","exporter_version":"4.6.1","file":"szescian.babylon"},
"autoClear":true,"clearColor":[0.0509,0.0509,0.0509],"ambientColor":[0,0,0],"gravity":[0,-9.81,0],
"materials":[{"name":"szescian.Material","id":"szescian.Material","ambient":[0.8,0.8,0.8],"diffuse":[0.64,0.64,0.64],"specular":[0.5,0.5,0.5],"emissive":[0,0,0],"specularPower":50,"alpha":1,"backFaceCulling":true,"checkReadyOnlyOnce":false}],
"multiMaterials":[],
"skeletons":[],
"meshes":[{"name":"Cube","id":"Cube","materialId":"szescian.Material","billboardMode":0,"position":[0,1,0],"rotation":[0,0,0],"scaling":[1,1,1],"isVisible":true,"freezeWorldMatrix":false,"isEnabled":true,"checkCollisions":false,"receiveShadows":false
,"positions":[1,-1,-1,-1,-1,1,1,-1,1,-1,1,1,1,1,-1,1,1,1,-1,-1,-1,-1,1,-1]
,"normals":[0.5773,-0.5773,-0.5773,-0.5773,-0.5773,0.5773,0.5773,-0.5773,0.5773,-0.5773,0.5773,0.5773,0.5773,0.5773,-0.5773,0.5773,0.5773,0.5773,-0.5773,-0.5773,-0.5773,-0.5773,0.5773,-0.5773]
,"indices":[0,1,2,3,4,5,5,0,2,4,6,0,6,3,1,2,3,5,0,6,1,3,7,4,5,4,0,4,7,6,6,7,3,2,1,3]
,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":8,"indexStart":0,"indexCount":36}]
,"instances":[]}
],
"cameras":[{"name":"Camera","id":"Camera","position":[7.4811,5.3437,-6.5076],"rotation":[0.4615,-0.8149,0],"fov":0.8576,"minZ":0.1,"maxZ":100,"speed":1,"inertia":0.9,"checkCollisions":false,"applyGravity":false,"ellipsoid":[0.2,0.9,0.2],"cameraRigMode":0,"interaxial_distance":0.0637,"type":"FreeCamera"}],"activeCamera":"Camera",
"lights":[{"name":"Lamp","id":"Lamp","type":0,"position":[4.0762,5.9039,1.0055],"intensity":1,"diffuse":[1,1,1],"specular":[1,1,1]}],
"shadowGenerators":[]
}

Code from script 



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

	BABYLON.SceneLoader.Load("", "szescian.babylon", engine, function(newScene) {
		var Scene = newScene;
		Scene.executeWhenReady(function(){
			Scene.activeCamera.attachControl(canvas);
			engine.runRenderLoop(function(){
				Scene.render();
			});
		});

	window.addEventListener("resize",function(){
		engine.resize();
	});
</script>

 

Same thing as sphere?

 

Also don't mix up Javascript and Python

Link to comment
Share on other sites
makugym Newbie

makugym

Posted
  • Author
Posted

Yes but cube have id: Cube in blender file. In which place i need add code with change colour. 

I will try something like this but doesn`t work. I have log from console with error 'Cube is not defined' 


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

	BABYLON.SceneLoader.Load("", "szescian.babylon", engine, function(newScene) {
		var Scene = newScene;
		Scene.executeWhenReady(function(){
			Scene.activeCamera.attachControl(canvas);
			engine.runRenderLoop(function(){
				Scene.render();
			});
		});
		
		// Define a material
    var material = new BABYLON.StandardMaterial("std", Scene);
    material.diffuseColor = new BABYLON.Color3(0.5, 1, 0.5);

    var coolButton = document.getElementById("sweetButton");
    var lol = 1;
    coolButton.onclick = function () {
      if (lol === 1) {
        material.diffuseColor = new BABYLON.Color3(0.5, 1, 2);
        lol = 0;
      } else {
        material.diffuseColor = new BABYLON.Color3(0.5, 1, 0.5);
        lol = 1;
      }
    }

    // Apply the material
    Cube.material = material;	
	});

	

	window.addEventListener("resize",function(){
		engine.resize();
	});
</script>

 

Link to comment
Share on other sites
Borislav Newbie

Borislav

Posted
Posted
5 minutes ago, makugym said:

Yes but cube have id: Cube in blender file. In which place i need add code with change colour. 

I will try something like this but doesn`t work. I have log from console with error 'Cube is not defined' 



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

	BABYLON.SceneLoader.Load("", "szescian.babylon", engine, function(newScene) {
		var Scene = newScene;
		Scene.executeWhenReady(function(){
			Scene.activeCamera.attachControl(canvas);
			engine.runRenderLoop(function(){
				Scene.render();
			});
		});
		
		// Define a material
    var material = new BABYLON.StandardMaterial("std", Scene);
    material.diffuseColor = new BABYLON.Color3(0.5, 1, 0.5);

    var coolButton = document.getElementById("sweetButton");
    var lol = 1;
    coolButton.onclick = function () {
      if (lol === 1) {
        material.diffuseColor = new BABYLON.Color3(0.5, 1, 2);
        lol = 0;
      } else {
        material.diffuseColor = new BABYLON.Color3(0.5, 1, 0.5);
        lol = 1;
      }
    }

    // Apply the material
    Cube.material = material;	
	});

	

	window.addEventListener("resize",function(){
		engine.resize();
	});
</script>

 

I guess that's seriously messed up?

You didn't define Cube anywhere in this script.

But you did mention it in the mesh script.

But....

Ok, just make something like  

BABYLON.SceneLoader.Load("", "szescian.babylon", engine, function(newScene) {
        Cube = newMeshes[0];
		var Scene = newScene;
		Scene.executeWhenReady(function(){
			Scene.activeCamera.attachControl(canvas);
			engine.runRenderLoop(function(){
				Scene.render();
			});
		});

Does that work?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...