Hey gang, it’s been a while. I miss Away3D!
I’m experimenting with the TypeScript library, and have two questions I’ve been trying to work out all day.
I’ve followed the Away3D TypeScript - Getting Started guide.
Which is great, it gets it on screen. However the 3D view fills the browser.
I would like to fit the 3D view into a container.
1) How can I assign the dynamically created canvas a container element?
2) In the window.resize method, how can I then set the this._view’s width and height to the containing element’s height and width?
Things like “this. parentNode” don’t work because it is outside of the scope of the JavaScript.
I did accomplish what I am asking, by throwing in some jquery, its messy and I feel like there should be a better way.
As you’ll notice in the code below,
I append the first “canvas” element to my container “div”.
Then in the window.resize I use jquery to set the view’s height and width to the container’s dimensions.
This works for one page examples, but not if I want several away3D views on the same page. I’d rather it be more universal? If that makes sense.
///<reference path="../libs/away3d.next.d.ts" />
var examples;
(function (examples) {
var Test2 = (function () {
function Test2() {
this._view = new away.containers.View(new away.render.DefaultRenderer());
this._cubeGeometry = new away.primitives.CubeGeometry(100, 100, 100);
this._cubeMesh = new away.entities.Mesh(this._cubeGeometry);
this._timer = new away.utils.RequestAnimationFrame(this.onEnterFrame, this);
this._view.scene.addChild(this._cubeMesh);
window.onresize = function (event) {
return this.onResize(event);
};
this.onResize();
this._timer.start();
}
Test2.prototype.onEnterFrame = function (dt) {
this._cubeMesh.rotationY += 1;
this._view.render();
};
// stage listener for resize events
Test2.prototype.onResize = function (event) {
if (typeof event === "undefined") { event = null; }
this._view.x = 0;
this._view.y = 0;
this._view.width = $('#away3DContainer').width();
this._view.height = $('#away3DContainer').height();
};
return Test2;
})();
examples.Test2 = Test2;
})(examples || (examples = {}));
window.onload = function () {
new examples.Test2();
$('canvas:first-of-type').appendTo($('#away3DContainer'));
};
//# sourceMappingURL=Test2.js.map
