My goal is to be able to create a navbar in the three.js environment. Iv set up all the CSS3D appropriately and have set up a mouse down event listener but when it comes to intersects nothing comes up.
//CSS3D Scene
scene2 = new THREE.Scene();
//HTML
element = document.getElementById('dialogueBox');
shop = document.getElementById('shop');
FREEkxxx = document.getElementById('FREEkxxx');
//card
card = new THREE.CSS3DObject(element);
card.position.x = 0;
card.position.y = 0;
card.position.z = 0;
scene2.add(card);
//shop link
shopNav = new THREE.CSS3DObject(shop);
shopNav.position.x = -250;
shopNav.position.y = 250;
shopNav.position.z = 0;
shopNav.userData = {
URL: "http://stackoverflow.com",
name: "shopNav"
};
scene2.add(shopNav);
// videolink
FREEkNav = new THREE.CSS3DObject(FREEkxxx);
FREEkNav.position.x = 220;
FREEkNav.position.y = 250;
FREEkNav.position.z = 0;
FREEkNav.userData = {
URL: "http://stackoverflow.com",
name: "FREEkNav"
};
scene2.add(FREEkNav);
// grouping the nav objects
nav = new THREE.Object3D();
nav.add(shopNav);
nav.add(FREEkNav);
nav.userData = {
URL: "http://stackoverflow.com",
name: "FREEkNav"
};
scene2.add(nav);
document.addEventListener('mousedown', onDocumentMouseDown, false);
var raycaster = new THREE.Raycaster(),
INTERSECTED;
var mouse = new THREE.Vector2();
function onDocumentMouseDown(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
intersects = raycaster.intersectObjects(nav.children);
console.log(intersects)
if (raycaster.intersects === shopNav) {
window.open(link1)
} else if (raycaster.intersects === FREEkNav) {
window.open(link2)
}
};
I'v grouped the 2 nav elements using THREE.Object3D(); so i assumed i could intersect using nav.children but when you console.log intersects and click one the nav elements you get nothing / [].
There's no need to do raycasting on CSS3D Objects. After all, a CSS3DObject is still an HTML element, just with a more complex CSS transformMatrix() property. You can add event listeners to it like any other HTML element, as it's still part of the DOM:
var element = document.getElementById('dialogueBox');
// Add click listener as usual
element.addEventListener("click", function(event){
console.log("I've been clicked!");
console.log(event);
});
//card
card = new THREE.CSS3DObject(element);
card.position.x = 0;
card.position.y = 0;
card.position.z = 0;
scene2.add(card);
You only need to do raycasting when dealing with THREE.Mesh, THREE.Point or other WebGL-based elements that live inside the <canvas> context.
Related
I'm having trouble moving an svg that is inside another svg. I would like to directly effect the x and y value but I get a "read-only" error. Then I tried to use transform however it doesn't do anything. I'm currently using Chrome to test.
Code:
http://jsfiddle.net/un6ep/68/
"use strict";
function SVGGraph(div, data, pos) {
this.div = (div===undefined)?document.getElementsByTagName("BODY")[0]:div;
this.data = (data===undefined)?[]:data;
this.children = [];
this.width = 100;
this.height = 100;
this.pos = {x:0,y:0};
this.scale = 1;
this.rotation = 0;
this.ns = "http://www.w3.org/2000/svg";
/////////////////////////////////////////////////////////
//Functions to set the display the information to the user
/////////////////////////////////////////////////////////
this.generateSelf = function() {
var line = document.createElementNS(this.ns, 'path');
var start = {x:0,y:0}
var end = {x:100,y:100}
var ctrl = 100;
line.setAttribute("d", "M"+start.x+","+start.y+" C"+(start.x+ctrl)+","+start.y+" "+(end.x-ctrl)+","+end.y+" "+end.x+","+end.y+"");
line.style.stroke = "#ff00ff";
line.style.fill = "none";
line.style.strokeWidth = "5px";
this.svg.appendChild(line);
}
/////////////////////////////////////////////////////////
//Functions to deal with child object
/////////////////////////////////////////////////////////
this.addChild = function(data) {
data = (data===undefined)?[]:data;
this.children.push(new SVGGraph(this.svg, data));
}
/////////////////////////////////////////////////////////
//Functions to set the properties of the svg
/////////////////////////////////////////////////////////
this.setPos = function(x, y) {
this.pos.x = x;
this.pos.y = y;
//I would like to do this.svg.x = <some number>
this.updateTransform();
}
this.updateTransform = function() {
console.log('translate('+this.pos.x+','+this.pos.y+')');
this.svg.setAttribute('transform','translate(50,50)');
//this.svg.setAttributeNS(this.ns,'transform','translate(50,50)');
}
/////////////////////////////////////////////////////////
//Init function
/////////////////////////////////////////////////////////
this.init = function() {
//create the svg area
this.svg = document.createElementNS(this.ns, 'svg');
if (this.div.nodeName.toLowerCase() != "svg") {//if the div is not a sub div then make it fill the space
this.svg.style.width = "100%";
this.svg.style.height = "100%";
}
this.svg.style.overflow = "visible";
this.div.appendChild(this.svg);
//generate what this looks like
this.generateSelf();
}
this.init();
}
var temp;
window.onload = mainInit;
function mainInit() {
console.log("hello");
temp = new SVGGraph();
temp.addChild();
temp.children[0].setPos(50,50)
}
mainInit()
As described here, transforms are not supported for svg elements.
But, in order to achieve what you need you will need to wrap everything in a g element (a group) and you can apply the transform to that:
...
var group = document.createElementNS(this.ns, 'g');
group.appendChild(line);
this.svg.appendChild(group);
and then when you set the transform
this.svg.children[0].setAttribute('transform','translate(50,50)');
Like this each SVG you create will have a group and the group will contains everything you need to be translated, and this group will alos support other kinds of transformations. http://jsfiddle.net/un6ep/69/
EDIT: Better you need to use this to work on IE ... seems that IE does not know children:
this.svg.childNodes[0].setAttribute('transform','translate(50,50)');
http://jsfiddle.net/un6ep/70/
I have a clock hand that rotates as a timer. If the user completed activity before the time runs out I need to stop that tween.
I tried remove tween with no luck. What am I doing wrong?
I get into my levelup function but the remove tween does not work.
function Clock() {
// this.board = board;
clockContainer = new createjs.Container();
contain = new createjs.Container();
var clockBack = new createjs.Bitmap(queue.getResult("clockBack"));
clockHand = new createjs.Bitmap(queue.getResult("clockHand"));
clockBack.x = 40;
clockBack.y = 480;
clockHand.x = 95;
clockHand.y = 539;
clockHand.regX = 20
clockHand.regY = 105;
clockHand.scaleX = clockHand.scaleY = 0.50;
clockBack.scaleX = clockBack.scaleY = 0.50;
clockContainer.addChild(clockBack, clockHand);
TimerLength = 30000;
stage.addChild(clockContainer)
mytweentodisable = createjs.Tween.get(clockHand, { loop: false }).to({ rotation: 360 }, TimerLength).call(function () {
//this will trigger the timer is up
GamehasEnded = true;
checkWrongAndRight();
});
}
function levelUp() {
createjs.Tween.removeTweens(mytweentodisable)
console.log("adding Level up button");
levelUpContainer = new createjs.Container();
levelUpIcon = new createjs.Bitmap(queue.getResult("levelUp"));
levelUpContainer.addChild(levelUpIcon);
stage.addChild(levelUpContainer)
levelUpContainer.x = 350
levelUpContainer.y = 500
levelUpContainer.addEventListener("click", function () {
console.log("clicked it");
});
}
This should do the trick:
mytweentodisable.setPaused(true);
When we create multiple sprites, the function mouseover is called when any hover in hitArea polygon. Regardless, whether applied to another object.
Visibility of sprite governed by sorting the array. The later was added to the sprite in stage.children, the higher it will be. Here is an example in which one rectangle superimposed on the other. At the same time, when we put things on the upper left corner of the bottom sprite, at the top of the object function mouseover will work call, although it is under the other.
How to solve this problem? hitarea not suitable, since the facilities will be constantly dragging.
Thanks in advance for your reply!
var stage = new PIXI.Stage(0x97c56e, true);
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame( animate );
var texture = new PIXI.RenderTexture()
r1 = new PIXI.Graphics()
r1.beginFill(0xFFFF00);
r1.drawRect(0, 0, 400, 400)
r1.endFill()
texture.render(r1);
var texture2 = new PIXI.RenderTexture()
r1 = new PIXI.Graphics()
r1.beginFill(0xDDDD00);
r1.drawRect(0, 0, 300, 300)
r1.endFill()
texture2.render(r1);
createBunny(100, 100, texture)
createBunny(120, 120, texture2)
function createBunny(x, y, texture) {
var bunny = new PIXI.Sprite(texture);
bunny.interactive = true;
bunny.buttonMode = true;
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.scale.x = bunny.scale.y = 0.5;
bunny.mouseover = function(data) {
console.log('mouse over!')
}
bunny.mousedown = bunny.touchstart = function(data) {
this.data = data;
this.alpha = 0.9;
this.dragging = true;
this.sx = this.data.getLocalPosition(bunny).x * bunny.scale.x;
this.sy = this.data.getLocalPosition(bunny).y * bunny.scale.y;
};
bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data) {
this.alpha = 1
this.dragging = false;
this.data = null;
};
bunny.mousemove = bunny.touchmove = function(data) {
if(this.dragging) {
var newPosition = this.data.getLocalPosition(this.parent);
this.position.x = newPosition.x - this.sx;
this.position.y = newPosition.y - this.sy;
}
}
bunny.position.x = x;
bunny.position.y = y;
stage.addChild(bunny);
}
function animate() {
requestAnimFrame( animate );
renderer.render(stage);
}
http://jsfiddle.net/sD8Tt/48/
I know this is old thread, but for those who come to this page, the issue can be fixed by extending the PIXI's Sprite Class, Look at the following code.
PIXI.Sprite.prototype.bringToFront = function() {
if (this.parent) {
var parent = this.parent;
parent.removeChild(this);
parent.addChild(this);
}
}
And call above method in mousedown event like this
this.bringToFront();
Working JSFiddle
http://jsfiddle.net/6rk58cqa/
I just started working with the easeljs library. I have created a canvas with a stage and it works.
I want to add bitmaps as buttons and add them side by side in the bottom on the stage.
I have tried with the following, but it place the bitmaps on top on each other.
var button = new createjs.Bitmap(queue.getResult("largebrick"));
var contentWidth = document.getElementById("content").offsetWidth;
var contentHeight = document.getElementById("content").offsetHeight;
var container = new createjs.Container();
stage.addChild(container);
stage.enableMouseOver(10);
for(var i = 0; i <10; i++){
button.x = 0 + button.getBounds().width * i;
button.y = contentHeight - button.getBounds().height;
button.addEventListener("mouseover", function() { document.body.style.cursor = 'pointer'; });
button.addEventListener("mouseout", function() { document.body.style.cursor = 'default'; });
button.addEventListener("click", function(event) {addBricks(button); });
container.addChild(button);
}
I hope some of you guys can help.
A couple things here. You need to create a new instance of the button inside the loop, otherwise you are just moving the original instance of button on each iteration. In this example, I simplified everything a bit by using a shape, but you could easily do the same with your Bitmap.
var xPos = 0;
for(var i = 0; i < 10; i++){
var button = new createjs.Bitmap(queue.getResult("largebrick"));
button.cursor = "pointer";
button.x = xPos;
button.y = contentHeight - 50;
xPos += 60;
container.addChild(button);
}
Also, createjs supports defining cursors as a property of a display object like so
button.cursor = "pointer";
which should simplify your code a little.
I want to set a new position of body on BeginContact event but it's still not functional. It's writed in JavaSript with drawing to canvas but it doesn't matter for Box2d. In HTML file in body is only empty canvas, nothing else. Here is my code:
In the beginning of JS file are only declarated some variables.
Vec2 = Box2D.Common.Math.b2Vec2;
BodyDef = Box2D.Dynamics.b2BodyDef;
Body = Box2D.Dynamics.b2Body;
FixtureDef = Box2D.Dynamics.b2FixtureDef;
Fixture = Box2D.Dynamics.b2Fixture;
World = Box2D.Dynamics.b2World;
PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
DebugDraw = Box2D.Dynamics.b2DebugDraw;
var player;
It's followed by a setup function which is called in the beginning.
function setup()
{
canvas = document.getElementById("collisionCanvas");
context = canvas.getContext('2d');
document.getElementsByTagName('body')[0].style.backgroundColor = "black";
canvas.style.backgroundColor = "white";
canvas.width = 320;
canvas.height = 320;
world = new World(new Vec2(0, 10), false);
//Point of the problem!!!
//setting contact listener
var listener = new Box2D.Dynamics.b2ContactListener;
listener.BeginContact = function(contact)
{
var body1 = contact.GetFixtureA().GetBody();
var body2 = contact.GetFixtureB().GetBody();
if(body1.GetUserData().type == "player")
{
body1.SetPosition({x:5, y:5});
}
else
{
body2.SetPosition({x:5, y:5});
}
}
world.SetContactListener(listener);
var fixDef = new FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2;
var bodyDef = new BodyDef;
//creating ground
bodyDef.type = Body.b2_staticBody;
bodyDef.position.x = convertPixelsToMeters(160);
bodyDef.position.y = convertPixelsToMeters(320-32/2);
bodyDef.userData = {type: "static"};
fixDef.shape = new PolygonShape;
fixDef.shape.SetAsBox(convertPixelsToMeters(canvas.width/2), convertPixelsToMeters(32/2));
world.CreateBody(bodyDef).CreateFixture(fixDef);
//creating player
bodyDef.type = Body.b2_dynamicBody;
bodyDef.fixedRotation = true;
bodyDef.position.x = convertPixelsToMeters(160);
bodyDef.position.y = convertPixelsToMeters(160);
bodyDef.userData = {type: "player"};
fixDef.shape = new PolygonShape;
fixDef.shape.SetAsBox(convertPixelsToMeters(16), convertPixelsToMeters(16));
player = world.CreateBody(bodyDef);
player.CreateFixture(fixDef);
//setup debug draw
var debugDraw = new DebugDraw();
debugDraw.SetSprite(document.getElementById("collisionCanvas").getContext("2d"));
debugDraw.SetDrawScale(32.0);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(DebugDraw.e_shapeBit | DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
window.setInterval(update, 1000 / 60);
}
And in the end are only update function, one helping function and that's it.
function update()
{
world.Step(
1 / 60 //frame-rate
, 10 //velocity iterations
, 10 //position iterations
);
world.DrawDebugData();
world.ClearForces();
}
function convertPixelsToMeters(x)
{
return x*0.03125;
}
$(function(){
setup();
})
Important is only the middle code where is BeginContact event where is calling the SetPosition function which doesn't work.
I tried change position in other places, for example on KeyDown event and there it was correct, so it's for me understandable why it doesn't work.
In the b2Contactlistner method we can not change any prperty or position.
You can take any boolean variable and make it true when in beign contact and if change the position of body according to boolean variable.
as in your code.......
var bodyyy;
var boolennn
listener.BeginContact = function(contact)
{
var body1 = contact.GetFixtureA().GetBody();
var body2 = contact.GetFixtureB().GetBody();
if(body1.GetUserData().type == "player")
{
//body1.SetPosition({x:5, y:5});
bodyyy = body1;
booleannn = true;
}
else
{
// body2.SetPosition({x:5, y:5});
bodyyy = body2;
boolennn = true;
}
}
Now In your Update method
if(booleann)
{
bodyyy.SetPosition({x:5, y:5})
}
SORRY I Donot know syntax of java script