Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.