I've asked this question as a part of Huge question but was recommended to ask in parts. Here comes the part of my previous question. My previous question was: Here
I've been using Three.js Release 50 and able to show/hide the objects (In my application, it is a mesh child) with the help of:
THREE.SceneUtils.traverseHierarchy(mesh,function(child){
var z = document.getElementById("cameras").selectedIndex*5 -10;
if (z === -10){
child.visible = true;
} else if (child.position.z !== z){
child.visible = false;
} else {
child.visible = true;
};
});
But while using release 54, it is said that to use, object.traverse but found very difficult to the same. How to replace the above code using release 54? The error I'm getting while using release 54 is:
Please help me to sort this out.
Is the 'mesh' variable you are sending the 'traverseHierarchy' function an Object3d?
If so have you tried 'mesh.children' which should return an array of child objects, or you could use the traverse function on the mesh object.
See: http://mrdoob.github.com/three.js/docs/54/#Reference/Core/Object3D
mesh.traverse(function(child) {
var z = document.getElementById("cameras").selectedIndex * 5 - 10;
if (z === -10) {
child.visible = true;
} else if (child.position.z !== z) {
child.visible = false;
} else {
child.visible = true;
};
});
Dig deeper, answers you will find.
object.traverseHierarchy() was renamed to object.traverse()
$ grep -A10 'traverse: function' build/three.js
traverse: function ( callback ) {
callback( this );
for ( var i = 0, l = this.children.length; i < l; i ++ ) {
this.children[ i ].traverse( callback );
}
},
simply use the object traverse method to hide the mesh in three.js.In my code hide the object based on its name
object.traverse ( function (child) {
if (child instanceof THREE.Mesh) {
if (child.name.includes("3F")) {
child.visible = true;
} else {
child.visible = false;
}
}
});
Related
I use a script for moving an object both with mouse and touch screen. This works.
I have another script to make the object rotate 90 degrees with each click, this also works.
It just doesn't work together.
When I merge them, the move still works, but with a click the object moves back to the starting position and only rotates there.
I've read that I should merge this but I don't know how. Below both scripts.
Thanks in advance for responses.
var container = document.querySelector("#container");
var activeItem = null;
var active = false;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
if (e.target !== e.currentTarget) {
active = true;
// this is the item we are interacting with
activeItem = e.target;
if (activeItem !== null) {
if (!activeItem.xOffset) {
activeItem.xOffset = 0;
}
if (!activeItem.yOffset) {
activeItem.yOffset = 0;
}
if (e.type === "touchstart") {
activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
} else {
console.log("doing something!");
activeItem.initialX = e.clientX - activeItem.xOffset;
activeItem.initialY = e.clientY - activeItem.yOffset;
}
}
}
}
function dragEnd(e) {
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
}
function drag(e) {
if (active) {
if (e.type === "touchmove") {
e.preventDefault();
activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
} else {
activeItem.currentX = e.clientX - activeItem.initialX;
activeItem.currentY = e.clientY - activeItem.initialY;
}
activeItem.xOffset = activeItem.currentX;
activeItem.yOffset = activeItem.currentY;
setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
// Make blocks rotate 90 deg on each click
var count=0;
function rot(e){
count++;
var deg=count*90;
e.style.transform = "rotate("+deg+"deg)";
}
So I put them in a file but then it only works as described above.
How can I abort the traverse when I traverse a three.js object?
scene.traverse(x => {
if (x.userData)
// stop traversing here
});
return and break do not work
Object3D.traverse code (r134)
You would need to modify the traverse function to bail based on output from your callback function.
Something like this (untested):
// three.js/src/core/Object3D.js
traverse( callback ) {
let bailedOut = callback( this );
if( !bailedOut ) {
const children = this.children;
for ( let i = 0, l = children.length; i < l && !bailedOut; i ++ ) {
bailedOut = children[ i ].traverse( callback );
}
}
return bailedOut;
}
And then call it like:
function doTheThing( node ) {
let bailOut = false;
if( node.userData ) {
bailOut = true;
}
else {
// do the thing
}
return bailOut;
}
scene.traverse( doTheThing );
The processing basically continues until your callback returns true, at which point it triggers a cascade back up the traverse recursion chain until it exits the original call.
I'm quite used to nextSiblingand nextElementSibling in the DOM. Is there an easy way of doing a similar thing with Boomla files?
I would need the next sibling within the same placeholder (and null if this is the last), but I'd be interested about finding the next sibling in any placeholder (and null if this is the last file in the last placeholder).
Currently, there is no built-in method for this.
Here are 2 methods for the sjs-4 engine for getting the next in the placeholder or parent:
var nextInBucket = function(f) {
var bucket = f.bucketId();
var bucketSiblings = f.query("../:" + bucket);
var path = f.path();
var index = 0;
var found = false;
bucketSiblings.each(function(t) {
if (t.path() == path) {
found = true;
return false;
}
index++;
});
if ( ! found) {
return null;
}
return bucketSiblings.eq(index + 1);
}
var nextInParent = function(f) {
var parentChildren = f.query("../*");
var path = f.path();
var index = 0;
var found = false;
parentChildren.each(function(t) {
if (t.path() == path) {
found = true;
return false;
}
index++;
});
if ( ! found) {
return null;
}
return parentChildren.eq(index + 1);
}
Using the Ace Code Editor can I lock or make readonly a segment of code but still allow other lines of code to be written or edited during a session?
Here is the start of a solution:
$(function() {
var editor = ace.edit("editor1")
, session = editor.getSession()
, Range = require("ace/range").Range
, range = new Range(1, 4, 1, 10)
, markerId = session.addMarker(range, "readonly-highlight");
session.setMode("ace/mode/javascript");
editor.keyBinding.addKeyboardHandler({
handleKeyboard : function(data, hash, keyString, keyCode, event) {
if (hash === -1 || (keyCode <= 40 && keyCode >= 37)) return false;
if (intersects(range)) {
return {command:"null", passEvent:false};
}
}
});
before(editor, 'onPaste', preventReadonly);
before(editor, 'onCut', preventReadonly);
range.start = session.doc.createAnchor(range.start);
range.end = session.doc.createAnchor(range.end);
range.end.$insertRight = true;
function before(obj, method, wrapper) {
var orig = obj[method];
obj[method] = function() {
var args = Array.prototype.slice.call(arguments);
return wrapper.call(this, function(){
return orig.apply(obj, args);
}, args);
}
return obj[method];
}
function intersects(range) {
return editor.getSelectionRange().intersects(range);
}
function preventReadonly(next, args) {
if (intersects(range)) return;
next();
}
});
see it working in this fiddle: http://jsfiddle.net/bzwheeler/btsxgena/
The major working pieces are:
create start and end ace anchors which track the location of a 'readonly' portion as the document around it changes.
create a range to encapsulate the anchors
add a custom keyhandler to check if the current impending keypress will affect the readonly range and cancel it if so.
add custom paste/cut handlers to protect against right-click menu and browser menu cut/paste actions
You can do it by listening to the exec events:
// Prevent editing first and last line of editor
editor.commands.on("exec", function(e) {
var rowCol = editor.selection.getCursor();
if ((rowCol.row === 0) || ((rowCol.row + 1) === editor.session.getLength())) {
e.preventDefault();
e.stopPropagation();
}
});
Source: https://jsfiddle.net/tripflex/y0huvc1b/
I suggest something else easier and more reliable to prevent range to be modified (check it!)
var old$tryReplace = editor.$tryReplace;
editor.$tryReplace = function(range, replacement) {
return intersects(range)?null:old$tryReplace.apply(this, arguments);
}
var session = editor.getSession();
var oldInsert = session.insert;
session.insert = function(position, text) {
return oldInsert.apply(this, [position, outsideRange(position)?text:""]);
}
var oldRemove = session.remove;
session.remove = function(range) {
return intersects(range)?false:oldRemove.apply(this, arguments);
}
var oldMoveText = session.moveText;
session.moveText = function(fromRange, toPosition, copy) {
if (intersects(fromRange) || !outsideRange(toPosition)) return fromRange;
return oldMoveText.apply(this, arguments)
}
outsideRange = function (position) {
var s0 = range.start;
if (position.row < s0.row || (position.row == s0.row && position.column <= s0.column)) return true; // position must be before range.start
var e0 = range.end;
if (position.row > e0.row || (position.row == e0.row && position.column >= e0.column)) return true; // or after range.end
return false;
}
intersects = function(withRange) {
var e = withRange.end, s0 = range.start, s = withRange.start, e0 = range.end;
if (e.row < s0.row || (e.row == s0.row && e.column <= s0.column)) return false; // withRange.end must be before range.start
if (s.row > e0.row || (s.row == e0.row && s.column >= e0.column)) return false; // or withRange.start must be after range.end
return true;
}
I am creating game like http://www.puzzlegames.org/814games-Connect-2-Game-game.html. so what should i add in connected() function?
fB and sB are First and second button selected.
fBN and sBN are names of those buttons.
allNull() makes fB,sB, fBN, sBN null.
function onClick(e:MouseEvent):void {
if (! another) {
another = true;
fB = e.target;
fBN = e.target.name;
}
else {
sB = e.target;
sBN = e.target.name;
if (fBN == sBN)
{
allNull();
}
else if (connected())
{
fB.removeEventListener(MouseEvent.MOUSE_DOWN, onClick);
sB.removeEventListener(MouseEvent.MOUSE_DOWN, onClick);
fB.alpha = 0;
sB.alpha = 0;
pairCount++;
allNull();
if (pairCount == 25)
{
gameOver = false;
showScore();
endGame();
}
}
another = false;
}
}
Please help. I am trying to solve this problem since 15 days.
Thanks in advance.