MODIFICA: Ho creato un esempio completo di una direttiva WebGL utilizzando three.js con associazioni per ridimensionare l'oggetto o modificarne il tipo di materiale. Inoltre, eventi come il ridimensionamento della finestra e il mouse spostati:
Sì questo è molto possibile. Oltre i menu, le classifiche, ecc. Puoi anche inserire il tuo canvas
in una direttiva.
- Il controller configura lo stato del gioco
- Passo questo stato, i dati caricati da server e qualsiasi altro dato che potrebbe avere alla direttiva
- Infine init la tela nella funzione direttive collegamento
Ho realizzato questa piccola app per aiutarmi con un progetto scolastico: http://callmethey.herokuapp.com/polygons. Questa è la direttiva che uso (con Three.js per la parte tela):
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
};
});
direttive WebGL, questo deve essere il futuro – jolySoft
I suoi esempi non funzionano in cromo su Mac. Questi errori vengono generati: Errore durante la creazione del contesto WebGL. three.min.js: 412 TypeError: impossibile chiamare il metodo 'getExtension' di null – BuildingJarl
Chorome auto disabilita WEBGL all'aggiornamento a volte. Questo sembra essere un problema per i macbook di vecchia generazione. Assicurati che chrome: // flags/# disable-webgl sia 'disabled' e ricomincerà a funzionare. – winkerVSbecks