Right now I am having issues updating the dimensions/materials of walls.
The A-Scene in question is one that i am hosting(not hosted on 3d.io website/platform) that was obtained via uploading a 2d floorplan.
Here is a snippet from my code. Basically, this snippet appears to be updating the data of the walls effectively, changing the height to 1 meter. But, the changes are not being reflected visually.
let walls = document.querySelectorAll('[io3d-wall]')
for(let i = 0; i<walls.length; i ++){
walls[i].components['io3d-wall'].data.h = 1
walls[i].components['io3d-wall'].update()
}
If you have any notions as to why I am experiencing this issue please share.
Thank You
Kashi Rana Halma
Blockvue
use standard A-frame syntax
let walls = document.querySelectorAll('[io3d-wall]')
for(let i = 0; i<walls.length; i ++){
walls[i].setAttribute('io3d-wall', {h: 1})
}
Related
I have a large set of block objects using a custom geometry, that I am hoping to merge into a smaller number of larger geometries, as I believe this will reduce rendering costs.
I have been following guidance here: https://aframe.io/docs/1.2.0/introduction/best-practices.html#performance which has led me to the geometry-merger component here:
https://github.com/supermedium/superframe/tree/master/components/geometry-merger/
The A-Frame docs say:
"You can use geometry-merger and then make use a three.js material with vertex colors enabled. three.js geometries keep data such as color, uvs per vertex."
The geometry-merger component also says:
"Useful if using vertex or face coloring as individual geometries' colors can still be manipulated individually since this component keeps a faceIndex and vertexIndex."
However I have a couple of problems.
If I set vertexColors on my material (as suggested by the A-Frame docs), then this ruins the appearance of my blocks.
Whether or not I set vertexColors on my material, all material information seems to be lost when the geometries are merged, and everything just ends up white.
See this glitch for a demonstration of both problems.
https://tundra-mercurial-garden.glitch.me/
My suspicion is that the A-Frame geometry-merger component just won't do what I need here, and I need to implement something myself using the underlying three.js functions.
Is that right, or is there a way that I could make this work using geometry-merger?
For the vertexColors to work, you need to have your vertices coloured :)
More specifically - the BufferGeometry expects an array of rgb values for each vertex - which will be used as color for the material.
In this bit of code:
var geometry = new THREE.BoxGeometry();
var mat = new THREE.MeshStandardMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});
var mesh = new THREE.Mesh(geometry, mat);
The mesh will be be black unless the geometry contains information about the vertex colors:
// create a color attribute in the geometry
geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(vertices_count), 3));
// grab the array
const colors = this.geometry.attributes.color.array;
// fill the array with rgb values
const faceColor = new THREE.Color(color_hex);
for (var i = 0; i < vertices_count / 3; i += 3) {
colors[i + 0] = faceColor.r; // lol +0
colors[i + 1] = faceColor.g;
colors[i + 2] = faceColor.b;
}
// tell the geometry to update the color attribute
geometry.attributes.color.needsUpdate = true;
I can't make the buffer-geometry-merger component work for some reason, but It's core seems to be valid:
AFRAME.registerComponent("merger", {
init: function() {
// replace with an event where all child entities are ready
setTimeout(this.mergeChildren.bind(this), 500);
},
mergeChildren: function() {
const geometries = [];
// traverse the child and store all geometries.
this.el.object3D.traverse(node => {
if (node.type === "Mesh") {
const geometry = node.geometry.clone();
geometry.applyMatrix4(node.parent.matrix);
geometries.push(geometry)
// dispose the merged meshes
node.parent.remove(node);
node.geometry.dispose();
node.material.dispose();
}
});
// create a mesh from the "merged" geometry
const mergedGeo = THREE.BufferGeometryUtils.mergeBufferGeometries(geometries);
const mergedMaterial = new THREE.MeshStandardMaterial({color: 0xffffff, roughness: 0.3, vertexColors: THREE.FaceColors});
const mergedMesh = new THREE.Mesh(mergedGeo, mergedMaterial);
this.el.object3D.add(mergedMesh)
}
})
You can check it out in this glitch. There is also an example on using the vertex colors here (source).
I agree it sounds like you need to consider other solutions. Here are two different instances of instancing with A-Frame:
https://github.com/takahirox/aframe-instancing
https://github.com/EX3D/aframe-InstancedMesh
Neither are perfect or even fully finished, but can hopefully get you started as a guide.
Although my original question was about geometry merging, I now believe that Instanced Meshes were a better solution in this case.
Based on this suggestion I implemented this new A-Frame Component:
https://github.com/diarmidmackenzie/instanced-mesh
This glitch shows the scene from the original glitch being rendered with just 19 calls using this component. That compares pretty well with > 200 calls that would have been required if every object were rendered individually.
https://dull-stump-psychology.glitch.me/
A key limitation is that I was not able to use a single mesh for all the different block colors, but had to use one mesh per color (7 meshes total).
InstancedMesh can support different colored elements, but each element must have a single color, whereas the elements in this scene had 2 colors each (black frame + face color).
Okay so I am making one of those scrolling shooter Galaga-type game using Game Maker Studio. I created the first enemy and set up a spawner for them. They are supposed to just fly downwards towards your ship. That worked fine. But when I made the 2nd enemy, I wanted to make it move more slowly and side-to-side. I also wanted to make them bounce off the edges of the screen. But it just won't work. I can't figure what the hell the problem is and it it driving me insane. If anyone has any ideas, please, share them with me. If you need any more info on the game i can provide it. Here is the code for the step event of the 2nd enemy:
// Control the enemy
if (y > room_height+16)
{
instance_destroy();
}
// Die code
if (armor <= 0)
{
instance_create(x, y, o_explosion_center);
instance_destroy();
}
// Bounce off edges
if (x >= room_width-16)
{
hspeed = -1;
}
if (x < 16)
{
hspeed = 1;
}
First of all, you didn't say what wasn't working. The code you posted is correct, everything depends on the expected result.
One issue I can see id if this code is used by the two enemies. You want them to have different speeds, but once they bounce, their horizontal speeds will be 1 because you set hspeed to 1 and -1. When you create them, you should set a move_speed variable, and for the bouncing, write in the step event :
hspeed = -1*move_speed //instead of hspeed = -1
and
hspeed = move_speed //instead of hspeed = 1
This way, they will keep their initial speeds.
For more help, could you please explain what doesn't work and post the creation code ?
I'm new to GameMaker, and to making games, for my second game ever I was just going to use GameMakers built in physics. It's a RPG and I'm having lot's of trouble getting the guy to shoot the bullet. I can get the bullet to be placed in the room and at the angle it needs to be at. You could normally then just use the objectnamehere.speed = to what ever you want your speed to be. But! using physics you could use the phy.speed but that's a read only variable. So i half to use the phy_speed_x and phy_speed_y. But how do I get it to shoot in the direction the bullet object is? Here's the code I have so far.
// Player shoot
var shootButton = mouse_check_button_pressed(mb_left);
var bulletSpeed = 10;
if (shootButton) {
bullet = instance_create(ot_player.x, ot_player.y, ot_bullet);
bullet.phy_rotation = phy_rotation;
bullet.phy_speed_x = bulletSpeed;
bullet.phy_speed_y = bulletSpeed;
}
I have tried putting many different variables where I have the bulletSpeed variables but nothing has seem to work. I'm stuck here, I've watch tutorials and read lots of stuff but nothing has worked!
I figured it out.
var shootButton = mouse_check_button_pressed(mb_left);
var bulletSpeed = 10;
if (shootButton) {
bullet = instance_create(ot_player.x, ot_player.y, ot_bullet);
with(bullet) {
phy_rotation = other.phy_rotation;
ldx = lengthdir_x(15, -phy_rotation)
ldy = lengthdir_y(15, -phy_rotation)
physics_apply_impulse(x, y, ldx, ldy);
}
}
I am trying to change the color of the face on a CC3MeshNode. I am retrieving the selected face data with the below code.
CC3MeshNode*node = (CC3MeshNode*)aNode;
CC3MeshIntersection myMeshIntersection[kMeshHitCountMax];
CC3Ray touchRay = [self.activeCamera unprojectPoint:touchPoint];
CC3Ray localRay = [aNode.globalTransformMatrixInverted transformRay:touchRay];
[node findFirst:kMeshHitCountMax intersections:myMeshIntersection ofLocalRay:localRay acceptBackFaces:NO acceptBehindRay:NO];
CC3FaceIndices indices = [node faceIndicesAt:myMeshIntersection[0].faceIndex];
Ive tried to change the VertexColor but it doesn't change anything.
ccColor4F color = ccc4f(255, 0, 0, 255);
for (int i = 0; i < 3; i++) {
[node setVertexColor4F:color at:indices.vertices[i]];
}
Nothing happens.
Actually, I changed the vertex color on a object in Maya and I didn't get what I was looking for. I'm actually not sure if changing the VertexColor would be what I should be doing. I want to achieve something like this:
I'm new to the whole 3d thing, can someone shine a light on a solution?
-Thanks for your time. :)
EDIT
I got the above code working, I was just forgetting to update the Buffers
[node updateGLBuffers];
but it wasn't what I was going after.
Can someone point me in the general direction of what to look up so that I highlight the selected face?
i have the following javascript below after i finish an ajax query
all of my images have name="pic"
<script type="text/javascript">
function done() {
var e = document.getElementsByName("pic");
alert(e.length);
for (var i = 0; i < e.length; i++) {
cvi_instant.add(e[i], { shadow: 75, shade: 10 });
}
}
my goal is to apply an image border around using this library:
http://www.netzgesta.de/instant/
the problem is that for some reason this works but it only seem to apply to every other picture instead of every one. any clue why the code above would skip every other element??
EDIT: I added an alert in the loop and it does correctly go 0, 1,2,3,4,5,6 . .
for (var i = 0; i < e.length; i++)
{
alert(i);
cvi_instant.add(e[i], { shadow: 75, shade: 10 });
}
it only seem to apply to every other picture instead of every one
That's a classic sign of destructive iteration.
Consider what happens if, as I'm guessing, the function cvi_instant.add replaces the element named pic with some other element or elements.
getElementsByName returns a ‘live’ NodeList: it is kept up to date every time you make a change to the DOM. So if it had five elements before, after your call to cvi_instant.add it now contains only four: the first node is gone and nodes 1–4 have moved down to positions 0–3.
Now you go around the loop again. i++, so we're looking at element 1. But element 1 is now what was originally element 2! We skipped the original element 1, and we will continue skipping every other element until we reach the end of the (now half as long) list.
Altering a list at the same time as iterating it causes this kind of problem. If the process inside the iteration actually adds elements to the list you can even get an infinite loop!
The quick fix is to iterate the loop backwards. Now you do the last element first, leaving all the other elements in their original positions and causing no skipping:
var e= document.getElementsByName("pic");
for (var i= e.length; i-->0;) {
cvi_instant.add(e[i], { shadow: 75, shade: 10 });
}
Another simple solution if you know you're always going to be removing the element from the list on each call is:
var e= document.getElementsByName("pic");
while (e.length>0) {
cvi_instant.add(e[0], { shadow: 75, shade: 10 });
}
The most general solution is needed when your loop body can do anything to the list, such as inserting new elements named pic at the start of the document or removing other elements from the middle. It is slightly slower but always safe to make a static copy of the list to work from:
function Array_fromList(l) {
var a= [];
for (var i= 0; i<l.length; i++)
a.push(l[i]);
return a;
}
var e= Array_fromList(document.getElementsByName("pic"));
for (var i= 0; i<e.length; i++) {
cvi_instant.add(e[i], { shadow: 75, shade: 10 });
}
My guess is that cvi_instant.add() is doing some incrementing or iteration on the values passed to it. Try doing this instead - it's easier, and I believe it will fix your problem:
function done() {
var e = document.getElementsByName('pic');
for (pic in e) { cvs_instant.add(pic, { shadow: 75, shade: 10 }); }
}
Hi I came across the same problem.
My script was skipping every other
element. I finally solved it by simply
changing the variable name from i to
k in my loop. My guess is therefor
that the variable i is used by
getElementsByTagName internally to
keep track of where it is in the
live nodelist and is leaking out
to the programmers interface somehow.
So its a bug! :-)
-- EDIT:
All of what I claim below appears to be totally wrong. I leave this here as a point for anyone who thought the same :) I tested in FF3. I would love to claim that I saw this behaviour once, in IE, but maybe it was many years ago (come to think of it, it was probably 7 years ago). My memory is probably bad :)
-- OLD:
To slightly expand on my wild guess, if it turns out to be accurate:
From memory, if you don't declare a variable ('var ...') it'll use one from somewhere else.
Thus, without testing, this code:
for(var k = 0; k < 2; k++){
f();
alert("k: " + k);
}
function f () {
k++;
}
Should show the same behaviour. I think TML's solution is quite nice, from a 'defensive coding' point of view, it my analysis turns out to be correct.