I need to rotate a mesh "cylinder_weapon" for a trivial game by using Three.js. The problem is that the weapon follow the movements of the player but when I rotate the visual the position of the weapon stays static.
//////////////////////////////////////////////////////////////////////////////////
// render the scene //
//////////////////////////////////////////////////////////////////////////////////
updateFcts.push(function(){
var time = Date.now() * 0.0005;
renderer.render( scene, camera );
controls.update(clock.getDelta());
castRays();
cylinder_weapon.position.set(
camera.position.x - Math.sin(camera.rotation.y + Math.PI/6) * 0.75+1,
camera.position.y - 0.5 + Math.sin(time*4 + camera.position.x + camera.position.z)*0.01,
camera.position.z + Math.cos(camera.rotation.y + Math.PI/6) * 0.75);
cylinder_weapon.rotation.set(
camera.rotation.x,
camera.rotation.y - Math.PI,
camera.rotation.z
);
})
Here is an example of what I need
Does anyone got any hint ?
Related
I am not able to figure out how to re position an svg animation that i add dynamically on my paper during a zoom in or zoom out.
I add the animation when the link is active according to business logic in the following way.
c = joint.V('circle', { r: 8, fill: 'green' });
c.animateAlongPath({ dur: '4s', repeatCount: 'indefinite' }, canvasPaper.findViewByModel(link).$('.connection')[0]);
joint.V(canvasPaper.svg).append(c)
Now i go to the canvas and zoom in or zoom out the elements in the canvas scale appropriately . i use the paper.scale command. But the animation that i added does not move. I was able to get it scaled down to size but not its position. How do i achieve this?.
My zoom in and zoom out code is as below. I also know that i have to use the translate command on the svg object but i do not know how to calculate the translate values based on the zoomLevel
$('#zoom-in').on('click', function(e) {
e.preventDefault();
zoomLevel = Number((Math.min(1, zoomLevel + 0.2)).toFixed(1));
canvasPaper.scale(zoomLevel, zoomLevel,0,0);
_.each(canvasGraph.getLinks(), function(link) {
if(link.attr('linkActiveAnimationSvgId/text')) {document.getElementById(link.attr('linkActiveAnimationSvgId/text')).setAttribute("transform", "scale(" + zoomLevel + "," + zoomLevel + ")")
}
})
})
My zoom out code is as below
$('#zoom-out').on('click', function(e) {
e.preventDefault();
zoomLevel =Number((Math.max(0.2, zoomLevel - 0.2)).toFixed(1));
canvasPaper.scale(zoomLevel, zoomLevel,0,0);
_.each(canvasGraph.getLinks(), function(link) {
if(link.attr('linkActiveAnimationSvgId/text')) {document.getElementById(link.attr('linkActiveAnimationSvgId/text')).setAttribute("transform", "scale(" + zoomLevel + "," + zoomLevel + ")")
}
})
})
ok all i had to do was to find the view of the paper and then
paperView.vel.append(c)
instead of
joint.V(canvasPaper.svg).append(c)
and now i scale the paper and the animation scales/translates appropriately
could you please help me with zooming to SVG objects. no idea how to do this.
i need to zoom and center by click on object, i've made a test plunkr, so please take a look: http://plnkr.co/edit/ZQxhQ8VVoIXjMvdFIvQF
here's full code:
$(function(){
svg = d3.select("#svg");
svg_group = d3.select('#outer_group');
zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([.5, 20])
.on("zoom", zoomed);
svg.call(zoom);
function zoomed() {
svg_group.style("stroke-width", 1.5 / d3.event.scale + "px");
svg_group.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
$zoomService.$broadcast('zoom', {
scale: d3.event.scale
});
}
$('.sector').click(function(){
//zoom to somehow??
});
});
You have to use call zoom.event explicitly on the correct element after setting the desired translation and scaling.
var zoomed = false;
$('.sector').click(function(){
var bbox = this.getBBox();
var scale = 4;
// Manually calculating the position to which to transition to
// Will differ on a case by case basis.
svg
.call(zoom
.translate([ (- bbox.x - bbox.width / 2) * scale
, (- bbox.y - bbox.height / 2) * scale
])
.scale(scale).event
);
});
Demo: http://plnkr.co/edit/h1UP87dfQneRCFye9Xtu?p=preview
In the demo, I changed the position of the polygons and the viewBox on the svg to make it easier to calculate the exact coordinates to transition to for the zoom to stay centered. I also added some transitions and zoom-to-zero behavior not shown in the code excerpt above.
Sidenote: You don't have to use jQuery here to bind to click events; D3's selection.on can provide that function.
So SVG and expecially Snap.svg is very new to me an I am stuck on trying to get my svg object to animate along a defined path.
I have setup a fiddle showing what I have been able to accomplish so far:
http://jsfiddle.net/k1L0g5j2/1/
// ---------
// SVG C
// ---------
var snapC = Snap("#svgC");
// SVG C - "Squiggly" Path
var myPathC = snapC.path("M1462,170c0,0,42,282-236,290s-270-68-506,60s-273.7,70.4-466-160C32,94-232,170-240,358c0,420.4,498-272,598-68").attr({
fill: "none"
});
// SVG C - Draw Path
var lenC = myPathC.getTotalLength();
// SVG C - Triangle (As Polyline)
var Triangle = snapC.polyline("0,30 15,0 30,30");
Triangle.attr({
id: "plane",
fill: "#fff"
});
var triangleGroup = snapC.g(Triangle); // Group polyline
setTimeout(function () {
Snap.animate(0, lenC, function (value) {
movePoint = myPathC.getPointAtLength(value);
triangleGroup.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y - 15) + 'r' + (movePoint.alpha - 90));
}, 4500, mina.easeinout);
});
But I need to change this triangle to be another SVG object (moth.svg). I can't figure out how this is done.
I'm having trouble connecting points with a line on a map using d3. I think that I should use d3.svg.line() to create the points - but when I do it, I simply get a very small blob. Please see the link below for a screenshot of what I've been able to accomplish thus far - I want to connect the black dots with a line. Any help would be much appreciated.
Screenshot
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height*3 + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var group = svg.selectAll("g")
.data(data)
.enter()
.append("g")
var projection = d3.geo.mercator().scale(5000).translate([-2000,5900])
var path = d3.geo.path().projection(projection)
var graticule = d3.geo.graticule()
var line = d3.svg.line()
.interpolate("linear")
.x(function(d) { d.geometry.coordinates[0]; })
.y(function(d) { return d.geometry.coordinates[1] ; });
// this returns a parse error
// .x(function(d) { return projection(d.geometry.coordinates[0]); })
// .y(function(d) { return projection(d.geometry.coordinates[1]) ; });
var area = group.append("path")
.attr("d", path)
// .attr("d", line(data))
.attr("class", "area")
})
You have to pass both components of your coordinate to the d3.geo.mercator object, before taking each one separately as your x and y values. Your 'parse error' should go away if you use
.x(function(d) { return projection([d.lon, d.lat])[0]; })
.y(function(d) { return projection([d.lon, d.lat])[1]; });
instead. This post has a more complete example: D3 map Styling tutorial III: Drawing animated paths.
Hopefully once you are drawing the lines in the correct projection, they'll appear as you expect.
I try to create a WordPress TinyMCE plugin, that will use the Thickbox in order to display the popup dialog.
Now, I like to know if there is a way to resize the Thickbox, based on screen size, and not based on static values for width and height I can give on plugin development.
Any idea please ?
OK, I found out the solution, and I place it here for the future use of another member.
I plug the following code into the TinyMCE plugin code:
ed.addCommand(
'openPluginDialog',
function()
{
var w = window.innerWidth; // Get the inner window width
var h = window.innerHeight; // Get the inner window height
w = (w * 90) / 100; // Calculate the dialog width
h = (h * 85) / 100; // Calculate the dialog height
ed.windowManager.open(
{
file : url + '/plugin_dialog.html',
width : w, // The calculated window width
height : h, // The calculated window height
inline : 1,
title: 'Plugin dialog title'
},
{
plugin_url : url
}
);
}
);