javascript - examples - react native 3d

AngularJS Enlace a WebGL/Canvas

Question

Estoy muy verde para AngularJS. Me pregunto si es posible usarlo cuando tu vista usa HTML5 Canvas o WebGL. Si es así, ¿hay algún buen tutorial sobre cómo hacerlo?

He visto varios juegos que se jactan de que están hechos usando AngularJS, pero no sé si eso se limita a sus menús, tablas de clasificación y otros elementos del tablero.

(No necesariamente usaría MVC en un juego, pero obviamente puedes hacer más que solo juegos con Canvas y WebGL).

¡Gracias!

Answer 1

EDITAR: Hice un ejemplo completo de una directiva WebGL utilizando three.js con enlaces para cambiar el tamaño del objeto o cambiar su tipo de material. Además, eventos como el cambio de tamaño de la ventana y el mouse se movieron:

• fuente: https://github.com/winkerVSbecks/angularWebglDirective
• demo: http://winkervsbecks.github.io/angularWebglDirective/

Sí, esto es muy posible. Más allá de los menús, tablas de clasificación, etc., también puedes envolver tu canvas en una directiva.

1. El controlador configurará el estado del juego
2. Pase este estado, cargue datos del servidor y cualquier otro dato que pueda tener sobre la directiva
3. Finalmente, inicie el lienzo en la función de enlace de directivas

Hice esta pequeña aplicación para ayudarme con un proyecto escolar: http://callmethey.herokuapp.com/polygons . Esta es la directiva que uso (con three.js para la parte del lienzo):

app.directive(''polygon'', function() {
return {
restrict: ''A'',
scope: {
vertices: ''=polygon'',
color: ''=color''
},
link: function(scope, element, attrs)
{
var camera, scene, renderer;
var polygon;
var targetRotation = 0;
var targetYRotation = 0, targetXRotation = 0;
var targetYRotationOnMouseDown = 0, targetXRotationOnMouseDown = 0;
var mouseX = 0, mouseY = 0;
var mouseXOnMouseDown = 0, mouseYOnMouseDown = 0;
var width = $(element).width();
var height = 200;
var widthHalfX = width/2;
var widthHalfY = height/2;
init();
function init() {
// Setup scene
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 300;
scene = new THREE.Scene();
// Build Polygon
var geometry = new THREE.Geometry();
angular.forEach(scope.vertices, function (v) {
geometry.vertices.push( new THREE.Vector3( v.x, v.y, v.z ) );
});
geometry.faces.push( new THREE.Face3(0, 1, 2 ));
THREE.GeometryUtils.center( geometry );
// Push polygon to scene
var material = new THREE.MeshBasicMaterial( { color: cols[scope.color], side: THREE.DoubleSide } );
polygon = new THREE.Mesh( geometry, material );
scene.add(polygon);
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
}
// ..... rest of the code truncated for readability
};
});

Answer 2

Otra técnica es encapsular la escena WebGL como una fábrica y exponer el acceso a la escena 3D al módulo a través de la API de fábrica devuelta. Una ventaja de este enfoque es que puede inyectar la escena en cualquier otro controlador o directiva. Las fábricas en Angular son singleton, por lo que solo hay una copia de la escena 3D flotando.

Este método de encapsulación también le permite aislar tanto la lógica de escena 3D de su lógica de aplicación.

Debería poder usar el código WebGL MÁS preexistente siempre que inicie la fábrica a través de Factory API expuesta. Para hacer esto, copie todo su código de escena 3D en una fábrica y luego llame a una función de inicio de la fábrica 3D inyectada desde su controlador para inicializar la representación.

• Demostración en 3D tic-tac-toe
• Repo de Github

Utilicé directivas en el elemento canvas para definir la interacción de escena. Clic, marquesina, presionar teclas, eventos.