I'm getting started with A-Frame and this is a very basic question. I checked a number of examples to draw a line and then a curve in A-Frame but they don't show up in the scene. I have a plane there that shows up correctly.
I can use document.querySelector('a-plane').object3D; to get the plane but document.querySelector('a-curve').object3D; returns undefined.
Here is a code sample:
<!DOCTYPE html>
<html>
<head>
<title>A-frame room</title>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"> </a-plane>
<a-sky color="#ffffff"></a-sky>
<a-curve type="CatmullRom" curve="closed:true" visible="true">
<a-curve-point id="checkpoint1" position="0 0 -4" visible="true"></a-curve-point>
<a-curve-point id="checkpoint2" position="0 10 -4" visible="true"></a-curve-point>
<a-curve-point id="checkpoint3" position="0 10 -8" visible="true"></a-curve-point>
<a-curve-point id="checkpoint4" position="0 0 -8" visible="true"></a-curve-point>
</a-curve>
</a-scene>
</body>
</html>
You need to import the JS component that provides <a-curve>. It's a community component.
https://www.npmjs.com/package/aframe-curve-component
Related
I want to know if I can make one object, like a box or sphere, do 2 animations, as in rotation and color.
I know you can set these in the property section of the animation attribute, but if I try to put multiple animation attributes on one object, or if I try to put 2 properties in 1 animation attribute, it either doesn't animate, or only does one of the animations.
Here is the code I'm using, I would appreciate if any of you could edit it to make it work, if this is possible:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="lightblue"></a-sky>
<a-box position="0 0 -5" width="2" depth="2" height="2" color= rgb(0,0,0)
animation="
property: rotation;
from: 0 0 0;
to: -360 -360 -360;
loop: true;
dur: 3000;
dir: alternate;
property: color;
from: rgb(0,0,0);
to: rgb(255,255,255);
loop: true;
dur: 3000;
dir: alternate;"></a-box>
</a-scene>
</body>
</html>
You need to split the animation instructions into separate animation components, which should look like this:
animation__<id>="stuff"
// like this:
animation__first="single animation related stuff"
animation__second="another single animation related stuff"
your code should look a bit more like this:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-sky color="lightblue"></a-sky>
<a-box position="0 0 -5" width="2" depth="2" height="2" color=rgb(0,0,0)
animation__rotation="
property: rotation;
from: 0 0 0;
to: -360 -360 -360;
loop: true;
dur: 3000;
dir: alternate;"
animation__color="
property: color;
from: rgb(0,0,0);
to: rgb(255,255,255);
loop: true;
dur: 3000;
dir: alternate;"></a-box>
</a-scene>
In this jsbin I'm using cdn to get d3 version 3 to display a rect but it only shows using the html svg tags but with D3. What am I missing? Thank you.
Here is the html mark up for the rect using d3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Drawing SVG Shapes with D3</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
</head>
<body>
<h3>SVG Bar</h3>
<svg>
<rect width="50" height="200" style="fill:blue"/>
</svg>
<h3>D3 Bar</h3>
<script>
d3.select("body")
.append("svg")
.append("rect")
.attr("widt",50)
.attr("height",200)
.style("fill","blue");
</script>
</body>
</html>
Based on this How do I rotate a box in A-Frame by moving or dragging the mouse?
how i can do it with a 3d model? i need rotate a 3d model/object in a view
i have tried this code, but doesn't works
<html>
<head>
<title>Rotation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
</head>
<body>
<script type="text/javascript">
AFRAME.registerComponent('drag-rotate-component',{
schema : { speed : {default:1}},
init : function(){
this.ifMouseDown = false;
this.x_cord = 0;
this.y_cord = 0;
document.addEventListener('mousedown',this.OnDocumentMouseDown.bind(this));
document.addEventListener('mouseup',this.OnDocumentMouseUp.bind(this));
document.addEventListener('mousemove',this.OnDocumentMouseMove.bind(this));
},
OnDocumentMouseDown : function(event){
this.ifMouseDown = true;
this.x_cord = event.clientX;
this.y_cord = event.clientY;
},
OnDocumentMouseUp : function(){
this.ifMouseDown = false;
},
OnDocumentMouseMove : function(event)
{
if(this.ifMouseDown)
{
var temp_x = event.clientX-this.x_cord;
var temp_y = event.clientY-this.y_cord;
if(Math.abs(temp_y)<Math.abs(temp_x))
{
this.el.object3D.rotateY(temp_x*this.data.speed/1000);
}
else
{
this.el.object3D.rotateX(temp_y*this.data.speed/1000);
}
this.x_cord = event.clientX;
this.y_cord = event.clientY;
}
}
});
</script>
<a-scene>
<a-assets>
<a-asset-item id="man" src="./assets/models/man/man.dae"></a-asset-item>
</a-assets>
<a-collada-model src="#man" rotation="0 45 0"></a-model>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 -0.5 1">
<a-camera look-controls="enabled:false"></a-camera>
</a-entity>
</a-scene>
</body>
</html>
Thanks in advance!
Also have tried this, but not luck
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title - Demo 3D Model</title>
<meta name="description" content="Inlabs demo - 3D Model">
<script src="../../../dist/aframe-master.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="man" src="./assets/models/man/man.dae"></a-asset-item>
</a-assets>
<a-collada-model src="#man" rotation="0 45 0"></a-model>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 -0.5 1">
<a-camera drag-rotate-component look-controls="enabled:false"></a-camera>
</a-entity>
</a-scene>
</body>
</html>
Attach the drag-rotate-component to the model not the camera.
<a-collada-model drag-rotate-component>
Also, you don't need to add -component to the component name.
EDIT: sorry, my bad, this is not correct as it doesn't answer the question.
I think you simply forgot to append the name of the component drag-rotate-component as an attribute to the camera entity. See this pen.
<a-camera drag-rotate-component look-controls="enabled:false"></a-camera>
When I create an element of a-animation,I want to know the exact time when the animation finished.I know the "dur" or "begin" can calculate the approximate time,but is there any callback function when I use the a-animation element!
You can listen to the animationend event on the a-animation element. Like so:
sphereAnimation.addEventListener('animationend', function () {
sphere.setAttribute('color', '#88ff99');
});
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<a-scene>
<a-plane color="#EFED5E" rotation="45 0 0" scale="3 3 3" position="0 0 -3"></a-plane>
<a-sphere id="sphere" color="#EF2D5E" position="0 0 -3">
<a-animation
id="sphereAnimation"
attribute="position"
to="0 2 -3"
direction="alternate"
repeat="3"
easing="ease-in-out">
</a-animation>
</a-sphere>
</a-scene>
The 'a-animation' tag is depricated in favour of animation="". You need to attach the event handler for the animationcomplete event to the object which is being animated. Here's what worked for me.
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
function sphereEventListener(){
aSphere.addEventListener('animationcomplete', function(){
console.log("Do something interesting here...");
});
};
</script>
</head>
<body onload="sphereEventListener()">
<a-scene>
<a-sphere
animation="dur: 1000; property: position; to: 5 0 -10"
id="aSphere"
position="-5 0 -10"
>
</a-sphere>
<a-sky color="black"></a-sky>
</a-scene>
</body>
How can I change the view area for a graph.
I have this example below se code an image
The left axes goes from 0 to 10 because there is data from 0 to 10 , but I still would like to show only 4 to 9, almost like its zoomed.
Is it possible ?
<title>Graf TEST </title>
</head>
<script src="http://127.0.0.1/charts/js/teechart.js" type="text/javascript"> </script>
<script src="http://127.0.0.1/charts/js/teechart-extras.js" type="text/javascript"></script>
<script language="JavaScript">
function draw() {
var Chart1=new Tee.Chart("canvas");
Chart1.title.text="test";
Chart1.applyTheme("minimal");
Chart1.palette.colors[0] ="green";
Chart1.addSeries(new Tee.Line([]) );
var Series1 = Chart1.series.items[0];
Series1.marks.style="value";
Series1.marks.visible=true;
Series1.colorEach="no";
Series1.format.stroke.size=3;
Series1.pointer.visible=true;
Series1.data.values[0]=6;
Series1.data.labels[0] ="Okt";
Series1.data.values[1]=9;
Series1.data.labels[1] ="Nov";
Series1.data.values[2]=10;
Series1.data.labels[2] ="Dec";
Series1.data.values[3]=0;
Series1.data.labels[3] ="Jan";
Chart1.draw();Chart1.toImage("img");canvas.style.display="none";
}
</script>
<p>
<BODY onload="draw()">
<img id="img"><canvas id="canvas" width="800" height="400"></canvas>
</html>
You should do that manually setting axis minimum and maximum values, for example:
Chart1.axes.left.setMinMax(4,9);