改变babylon.js中材料的颜色

时间:2017-07-10 19:32:51

标签: javascript babylonjs

我刚刚进入babylon.js,但我似乎无法弄清楚,你会如何改变材料的颜色?

我的代码目前是:

/* eslint-disable */
import * as BABYLON from 'babylonjs';


// Get the canvas element from our HTML above
const canvas = document.getElementById("root");

// Load the BABYLON 3D engine
const engine = new BABYLON.Engine(canvas, true);
let fn;
let mainColor = new BABYLON.Color3(1.0, 0.2, 0.7);

setTimeout(() => {
  mainColor = new BABYLON.Color3(0.3, 0.2, 0.2);
  fn();
}, 2000);

// This begins the creation of a function that we will 'call' just after it's built
function createScene () {

    // Now create a basic Babylon Scene object 
    const scene = new BABYLON.Scene(engine);

    // Change the scene background color to green.
    scene.clearColor = new BABYLON.Color4(0.5, 0.8, 0.6, 0.8);

    // This creates and positions a free camera
    const camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 30, new BABYLON.Vector3(0, 0, 0), scene);

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

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

    // This creates a light, aiming 0,1,0 - to the sky.
    const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 1), scene);

    // Dim the light a small amount
    light.intensity = .5;

    // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene
    const sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

    const materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
    materialSphere1.alpha = 1;
    materialSphere1.diffuseColor = mainColor;

    sphere.material = materialSphere1;
    sphere.position.y = 1;
    // Move the sphere upward 1/2 its height

    // Let's try our built-in 'ground' shape.  Params: name, width, depth, subdivisions, scene
    const ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
    fn = () => {
      materialSphere1.diffuseColor = mainColor;
    }
    // Leave this function
    return scene;

  };  // End of createScene function
  const scene = createScene();
  engine.runRenderLoop(function () {
    scene.render();
  });
  window.addEventListener("resize", function () {
    engine.resize();
  });

对我来说这看起来很可怕。如您所见,我在fn中定义了createScene,然后允许我以这种方式修改它,但我相信应该有更好的方法。我尝试在createScene()之外创建一个函数来获取颜色,然后将其用于materialSphere1.diffuseColor,但这不起作用。所以我的问题是:有没有其他(更好的)方法来改变babylon.js中材料的颜色

1 个答案:

答案 0 :(得分:1)

为什么不在回调之外声明您的资料? 您还可以使用scene.materials浏览材料