why are my Listbox items not added? to Listbox, I don't get it.
the code looks ok just did some modification to the new instance of GUI and now my Listbox items not adding
not sure where the error is just testing as i await your response from all you pros.
feel free to run this and test it and kindly point out the issue thanks.
gridder.buildGUI =function(thisObj){
dialog = (thisObj instanceof Panel) ? thisObj : new Window("palette", thisObj.scriptTitle, undefined, {resizeable:true});
var w = dialog;
dialog.text = "ALL IN ONE TOOLBOX 2022";
dialog.preferredSize.width = 180;
dialog.preferredSize.height = 520;
dialog.orientation = "column";
dialog.alignChildren = ["fill","top"];
dialog.spacing = 10;
dialog.margins = 16;
var tpanel = dialog.add("tabbedpanel", undefined, undefined, {name: "tpanel"});
tpanel.alignChildren = "fill";
tpanel.preferredSize.width = 348;
tpanel.margins = 0;
// CLRTAB
// ======
var Main = tpanel.add("tab", undefined, undefined, {name: "clrTab"});
Main.text = "Main";
Main.orientation = "column";
Main.alignChildren = ["fill","top"];
Main.spacing = 10;
Main.margins = 10;
// CLRTAB_LSTGRP
// =============
var clrTab_LstGrp = Main.add("group", undefined, {name: "clrTab_LstGrp"});
//clrTab_LstGrp.orientation = "row";
clrTab_LstGrp.alignChildren = ["left","center"];
clrTab_LstGrp.spacing = 10;
clrTab_LstGrp.margins = 0;
var t = Main.add("statictext", undefined, "Hello", {multiline:false});
t.text = "Create Solids";
t.graphics.foregroundColor = t.graphics.newPen (t.graphics.PenType.SOLID_COLOR, [0.0, 1.0, 1.0], 1);
t.graphics.font = ScriptUI.newFont ("Arial", "Bold", 30);
var listBoxxa = Main.add("listbox", undefined, undefined, {name: "listBoxxa", items: listBoxxa_array});
listBoxxa.preferredSize.width = 300;
listBoxxa.size = [100, 130];
var listBoxxa_array = [
"Create 2 solids",
"Create Solid",
"Create Solid with fractual noise",
"Create Solid CC Particle World",
"Create Solid Particular",
"Solid With BCC Sphere",
"Solid With BCC Turbulence",
];
if (dialog instanceof Window){
dialog.center();
dialog.show();
}
else dialog.layout.layout(true);
};
gridder.buildGUI(gridder);
When you create the Listbox you haven't yet initialised listBoxxa_array. So when you create the control object you're giving it an undefined variable as its contents. Move the section where you define listBoxxa_array above the line where you define listBoxxa.
Related
I have imported a test SVG using the SVGLoader and am able to tween the SVG object using Tween.js.
I would like to tween the individual paths and polygons within the loaded SVG object - is this possible?
SVGLoader:
var loader = new THREE.SVGLoader();
loader.load( 'svg/test.svg', function ( paths ) {
var group = new THREE.Group();
group.scale.multiplyScalar( 0.25 );
group.position.x = -150;
group.position.y = 70;
group.scale.y *= - 1;
for ( var i = 0; i < paths.length; i ++ ) {
var path = paths[ i ];
var material = new THREE.MeshBasicMaterial( {
color: path.color,
side: THREE.DoubleSide,
depthWrite: false
} );
var shapes = path.toShapes( true );
for ( var j = 0; j < shapes.length; j ++ ) {
var shape = shapes[ j ];
var geometry = new THREE.ShapeBufferGeometry( shape );
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
}
}
scene.add( group );
} );
Tween Function:
triggerTweens();
function triggerTweens() {
new TWEEN.Tween( title.position ).to( { x: 10 }, 5000 ).start();
}
I have found the following solution to this. Essentially adding the tween trigger into the loader function and passing the variable mesh, ( not group ) - allows tweening on the constituent paths and polygons etc of the SVG. To take this a step further I will figure out how to perform the tween for each separately which shouldn't be too tricky at this point.
New SVG Loader:
var loader = new THREE.SVGLoader();
loader.load( 'svg/test.svg', function ( paths ) {
var group = new THREE.Group();
group.scale.multiplyScalar( 0.25 );
group.position.x = -150;
group.position.y = 70;
group.scale.y *= - 1;
for ( var i = 0; i < paths.length; i ++ ) {
var path = paths[ i ];
var material = new THREE.MeshBasicMaterial( {
// color: path.color,
color: 0xff0000,
side: THREE.DoubleSide,
depthWrite: false
} );
var shapes = path.toShapes( true );
for ( var j = 0; j < shapes.length; j ++ ) {
var shape = shapes[ j ];
var geometry = new THREE.ExtrudeGeometry(shape, {
depth: 1,
bevelEnabled: false
});
var mesh = new THREE.Mesh( geometry, material );
// Randomly position each constituent mesh to demo
randX = Math.random() * (20000 - -20000) + -20000;
randY = Math.random() * (20000 - -20000) + -20000;
randZ = Math.random() * (20000 - -20000) + -20000;
mesh.position.set( randX, randY, randZ );
group.add( mesh );
}
triggerTweens(mesh); // Trigger tweens passing mesh variable
}
scene.add( group );
} );
New Tween Function:
// Bring all meshes back to position 0,0,0 Over 5000ms
function triggerTweens(mesh) {
new TWEEN.Tween( mesh.position ).to( { x: 0, y: 0, z: 0 }, 5000 ).easing(TWEEN.Easing.Cubic.In).start();
}
I'm a beginner in three.js. My task is to build a simple FPS game. I'm having many troubles with the gun and the bullets. When I press "spacebar" my weapon shoots but the problem is that the bullets go in the right direction only for a small part of the screen then they start to go in direction that are not the ones I want.
This is an example :
image1
image2
Here is the code I wrote for the bullet :
// SHOOT BULLET
for(var index=0; index<bullets.length; index+=1){
if( bullets[index] === undefined ) continue;
if( bullets[index].alive == false ){
bullets.splice(index,1);
continue;
}
bullets[index].position.add(bullets[index].velocity);
}
if(keyboard[32] && canShoot <= 0){ // spacebar key
// creates a bullet as a Mesh object
var bullet = new THREE.Mesh(
new THREE.SphereGeometry(0.2,8,8),
new THREE.MeshBasicMaterial({color:0x42FFFF})
);
// position the bullet to come from the player's weapon
bullet.position.set(
camera.position.x - 0.7*parseInt(-Math.cos(camera.rotation.z)),
camera.position.y - 0.3,
camera.position.z +1*parseInt(-Math.cos(camera.rotation.z))
);
// set the velocity of the bullet
bullet.velocity = new THREE.Vector3( (-mouse.x - Math.sin(camera.rotation.y + Math.PI/6) * 7),//*parseInt(-Math.cos(camera.rotation.z)) ,
mouse.y,
Math.cos(camera.rotation.y)*parseInt(-Math.cos(camera.rotation.z))
).normalize();
console.info(bullet.velocity);
// after 1000ms, set alive to false and remove from scene
// setting alive to false flags our update code to remove
// the bullet from the bullets array
bullet.alive = true;
setTimeout(function(){
bullet.alive = false;
scene.remove(bullet);
}, 1000);
// add to scene, array, and set the delay to 10 frames
bullets.push(bullet);
scene.add(bullet);
canShoot = 10;
}
if(canShoot > 0) canShoot -= 1;
A rough concept of how you can set direction and movement of bullets:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 10000);
camera.position.set(0, 0, 1);
scene.add(camera);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var background = new THREE.Mesh(new THREE.SphereGeometry(1000, 90, 45), new THREE.MeshBasicMaterial({
color: "gray",
wireframe: true
}));
scene.add(background);
var weapon = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 5), new THREE.MeshBasicMaterial({
color: 0x5555ff
}));
weapon.position.set(2, -1, -2.5);
camera.add(weapon);
var emitter = new THREE.Object3D();
emitter.position.set(2, -1, -5);
camera.add(emitter);
var plasmaBalls = [];
window.addEventListener("mousedown", onMouseDown);
function onMouseDown() {
let plasmaBall = new THREE.Mesh(new THREE.SphereGeometry(0.5, 8, 4), new THREE.MeshBasicMaterial({
color: "aqua"
}));
plasmaBall.position.copy(emitter.getWorldPosition()); // start position - the tip of the weapon
plasmaBall.quaternion.copy(camera.quaternion); // apply camera's quaternion
scene.add(plasmaBall);
plasmaBalls.push(plasmaBall);
}
var speed = 50;
var clock = new THREE.Clock();
var delta = 0;
(function render() {
requestAnimationFrame(render);
delta = clock.getDelta();
plasmaBalls.forEach(b => {
b.translateZ(-speed * delta); // move along the local z-axis
});
renderer.render(scene, camera);
})()
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.115.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115.0/examples/js/controls/OrbitControls.js"></script>
When I set up text as a link, set a bounds shape, and set the hit area to the bounds shape, my hit area is off if the textAlign = 'center'. Any ideas?
var linkColor = "#0000ff";
var linkFont = "bold 14px Times";
var presentationLink = new createjs.Text("View Presentation", linkFont, linkColor);
presentationLink.textAlign = "left";
presentationLink.maxWidth = 170;
presentationLink.x = 300;
presentationLink.y = 125;
stage.addChild(presentationLink);
var plBounds = presentationLink.getTransformedBounds();
var s = new createjs.Shape().set({ x: plBounds.x, y: plBounds.y + plBounds.height });
s.graphics.s(linkColor).moveTo(0, 0).lineTo(plBounds.width, 0);
stage.addChild(s);
var hitAreaForPLink = new createjs.Shape(new createjs.Graphics().beginFill("#ffffff").drawRect(-10, -10, plBounds.width + 20, plBounds.height + 10));
presentationLink.hitArea = hitAreaForPLink;
stage.enableMouseOver();
presentationLink.on("mouseover", function () {
presentationLink.cursor = "pointer";
});
The hitArea is positioned according to its owner's coordinate system. That is, all of the owner's transformations are applied to the hitArea. This is so that if you were to animate the owner, the hitArea would track it as expected.
Since the transformation is already applied, you need to use getBounds, not getTransformedBounds. See this example: http://jsfiddle.net/gskinner/uagv5t84/2/
I have a LineString and some points on it as Polygon. When I click on the yellow line, than the green polygon gets rendered behind the line. I would like to disable the click on the line.
Here is a picture about my problem
http://i57.tinypic.com/2rc3kg3.png
Here is a code snipet:
function PointDrawing(Lon, Lat, VectorLayer)
{
var circlreFeatureStyle = new OpenLayers.Style();
circlreFeatureStyle.fillColor = '#009900';
circlreFeatureStyle.fillOpacity =0.8
circlreFeatureStyle.strokeColor = '#004F00';
var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(Lon, Lat),
(1 * 15),
30
);
circleFeature = new OpenLayers.Feature.Vector(circle);
circleFeature.style = circlreFeatureStyle;
VectorLayer.addFeatures(circleFeature);
}
function LineDrawing(Map,VectorLayer)
{
var line = new OpenLayers.Geometry.LineString(points);
var style = {
strokeColor: 'yellow',
strokeOpacity: 4.5,
strokeWidth: 5
};
var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
VectorLayer.removeAllFeatures();
VectorLayer.addFeatures([lineFeature]);
}
In fabricjs, I want to create a scene in which the object under the mouse rises to the top of the scene in z-index, then once the mouse leaves that object, it goes back to the z-index where it came from. One cannot set object.zindex (which would be nice). Instead, I'm using a placeholder object which is put into the object list at the old position, and then the old object is put back in the position where it was in the list using canvas.insertAt. However this is not working.
See http://jsfiddle.net/rFSEV/ for the status of this.
var canvasS = new fabric.Canvas('canvasS', { renderOnAddition: false, hoverCursor: 'pointer', selection: false });
var bars = {}; //storage for bars (bar number indexed by group object)
var selectedBar = null; //selected bar (group object)
var placeholder = new fabric.Text("XXXXX", { fontSize: 12 });
//pass null or a bar
function selectBar(bar) {
if (selectedBar) {
//remove the old topmost bar and put it back in the right zindex
//PROBLEM: It doesn't go back; it stays at the same zindex
selectedBar.remove();
canvasS.insertAt(selectedBar, selectedBar.XZIndex, true);
selectedBar = null;
}
if (bar) {
//put a placeholder object ("XXX" for now) in the position
//where the bar was, and put the bar in the top position
//so it shows topmost
selectedBar = bar;
canvasS.insertAt(placeholder, selectedBar.XZIndex, true);
canvasS.add(bar);
canvasS.renderAll();
}
}
canvasS.on({
'mouse:move': function(e) {
//hook up dynamic zorder
if (!e.target) return;
if (bars[e.target])
selectBar(e.target);
else
selectBar(null);
},
});
var objcount = canvasS.getObjects().length;
//create bars
for (var i = 0; i < 20; ++i) {
var rect = new fabric.Rect({
left: 0,
top: 0,
rx: 3,
ry: 3,
stroke: 'red',
width: 200,
height: 25
});
rect.setGradientFill({
x1: 0,
y1: 0,
x2: 0,
y2: rect.height,
colorStops: {
0: '#080',
1: '#fff'
}
});
var text = new fabric.Text("Bar number " + (i+1), {
fontSize: 12
});
var group = new fabric.Group([ rect, text ], {
left: i + 101,
top: i * 4 + 26
});
group.hasControls = group.hasBorders = false;
//our properties (not part of fabric)
group.XBar = rect;
group.XZIndex = objcount++;
canvasS.add(group);
bars[group] = i;
}
canvasS.renderAll();
Since fabric.js version 1.1.4 a new method for zIndex manipulation is available:
canvas.moveTo(object, index);
object.moveTo(index);
I think this is helpful for your use case. I've updated your jsfiddle - i hope this is what you want:
jsfiddle
Also make sure you change z-index AFTER adding object to canvas.
So code will looks like:
canvas.add(object);
canvas.moveTo(object, index);
Otherwise fabricjs don`t care about z-indexes you setup.
After I added a line object, I was make the line appear under the object using:
canvas.add(line);
canvas.sendToBack(line);
Other options are
canvas.sendBackwards
canvas.sendToBack
canvas.bringForward
canvas.bringToFront
see: https://github.com/fabricjs/fabric.js/issues/135
You can modify your _chooseObjectsToRender method to have the following change at the end of it, and you'll be able to achieve css-style zIndexing.
objsToRender = objsToRender.sort(function(a, b) {
var sortValue = 0, az = a.zIndex || 0, bz = b.zIndex || 0;
if (az < bz) {
sortValue = -1;
}
else if (az > bz) {
sortValue = 1;
}
return sortValue;
});
https://github.com/fabricjs/fabric.js/pull/5088/files
You can use these two functions to get z-index of a fabric object and modify an object's z-index, since there is not specific method to modify z-index by object index :
fabric.Object.prototype.getZIndex = function() {
return this.canvas.getObjects().indexOf(this);
}
fabric.Canvas.prototype.moveToLayer = function(object,position) {
while(object.getZIndex() > position) {
this.sendBackwards(object);
}
}