I use the code:
var canvas = document.getElementById('application-canvas');
var app = new pc.Application(canvas, {
mouse: new pc.Mouse(document.body),
touch: new pc.TouchDevice(document.body)
});
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
app.graphicsDevice.maxPixelRatio = window.devicePixelRatio;
app.start();
app.scene.ambientLight = new pc.Color(0, 0, 0);
// create camera
var camera = new pc.Entity();
camera.addComponent('camera', {
clearColor: new pc.Color(44/255, 62/255, 80/255),
farClip: 10000,
fov: 90
});
camera.translate(1,0.5,1);
// camera.translate(0,0,1);
camera.lookAt(0,0,0);
app.root.addChild(camera);
//
app.on("update", function (dt) {
drawAxes(pc.Vec3.ZERO, .75)
});
var Triangle = pc.createScript('triangle');
Triangle.prototype.initialize = function () {
var node = new pc.scene.GraphNode();
var positions = [
0, 0, 0,
0, .5, 0,
.5, 0, 0
];
var normals = [
0, 0, 1,
0, 0, 1,
0, 0, 1
];
var colors = [
255, 0, 0, 255,
0, 255, 0, 255,
0, 0, 255, 255
];
var indices = [ 2, 1, 0 ];
var options = {
normals: normals,
indices: indices,
colors: colors
};
var mesh = pc.scene.procedural.createMesh(app.graphicsDevice, positions, options);
var material = new pc.StandardMaterial();
material.update();
var instance = new pc.scene.MeshInstance(node, mesh, material);
var model = new pc.scene.Model();
model.graph = node;
model.meshInstances = [ instance ];
this.entity.addChild(node);
app.scene.addModel(model);
};
Triangle.prototype.update = function () {
};
var triangle = new pc.Entity();
app.root.addChild(triangle);
triangle.addComponent('script');
triangle.script.create('triangle');
window.addEventListener("resize", function () {
console.log('resize');
//
app.resizeCanvas(canvas.width, canvas.height);
});
And I get the result:
How do I get a multi-colored triangle?