Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'aframe' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
import AFRAME from 'aframe';
const THREE = AFRAME.THREE;
AFRAME.registerComponent('fire-manager', {
init: function () {
this.el.addEventListener('vertex-cache-loaded', (evt) => {
this.model = this.el.object3D.children[0];
this.model.visible = false;
});
this.el.sceneEl.addEventListener('start-char-fire', (evt) => {
this.el.emit('start-vertex-animation'); // vertex cache texture waits for this event to start the animation
this.animateScale = true;
this.model.visible = true;
});
this.el.sceneEl.addEventListener('stop-char-fire', (evt) => {
this.el.emit('stop-vertex-animation');
this.animateScale = true;
this.model.visible = false;
this.audioLoader.load(src, function (buffer) {
self.pool.children.forEach(function (sound) {
sound.setBuffer(buffer);
});
self.loaded = true;
// Remove this key from cache, otherwise we can't play it again
AFRAME.THREE.Cache.remove(src);
if (self.data.autoplay || self.mustPlay) { self.playSound(); }
self.el.emit('sound-loaded');
});
}
import AFRAME from 'aframe';
AFRAME.registerComponent('web-ui-controller', {
init: function () {
const { sceneEl } = this.el;
const startBtnEl = document.getElementById('startBtn');
const mainScene = document.getElementById('mainScene');
const introScreen = document.getElementById('introScreen');
const enterVRButton = document.querySelector('.VRButton');
const introText = document.getElementById('introText');
const winningText = document.getElementById('winningText');
const losingText = document.getElementById('losingText');
const creditText = document.getElementById('creditText');
const mainCamera = document.getElementById('camera');
sceneEl.addEventListener('loaded', (event) => {
// all game assets loaded
introScreen.classList.remove('hidden');
});
THREE.OrbitControls = function (object, domElement) {
this.object = object;
this.domElement = (domElement === undefined) ? document : domElement;
// Set to false to disable this control
this.enabled = true;
// "target" sets the location of focus, where the object orbits around
this.target = new THREE.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only )
this.minDistance = 0;
this.maxDistance = Infinity;
// How far you can zoom in and out ( OrthographicCamera only )
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
this.update = (function () {
const offset = new THREE.Vector3();
// so camera.up is the orbit axis
const quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
const quatInverse = quat.clone().inverse();
const lastPosition = new THREE.Vector3();
const lastQuaternion = new THREE.Quaternion();
return function update() {
const position = scope.object.position;
offset.copy(position).sub(scope.target);
// rotate offset to "y-axis-is-up" space
offset.applyQuaternion(quat);
// angle from z-axis around y-axis
spherical.setFromVector3(offset);
if (scope.autoRotate && state === STATE.NONE) {
rotateLeft(getAutoRotationAngle());
}
_parseGeometry(data) {
const geometry = new THREE.Geometry();
const { vertices } = data;
for (const [ x, y, z ] of vertices) {
geometry.vertices.push(new THREE.Vector3(x, y, z));
}
const { indices, colors } = data;
for (const [ materialIndex, a, b, c ] of indices) {
const indexes = [a, b, c];
const faceColors = colors ? indexes.map(index => {
const color = colors[index];
return new THREE.Color(parseInt(color, 16) & 0xFFFFFF)
.multiplyScalar(ColorMultiplier);
}) : null;
geometry.faces.push(new THREE.Face3(a, b, c, null, faceColors, materialIndex));
}
const { textureCoords } = data;
const uvLayer = geometry.faceVertexUvs[0] = [];
// eslint-disable-next-line no-unused-vars
this.handles = new THREE.Object3D();
this.pickers = new THREE.Object3D();
this.planes = new THREE.Object3D();
this.add(this.handles);
this.add(this.pickers);
this.add(this.planes);
// // PLANES
const planeGeometry = new THREE.PlaneBufferGeometry(50, 50, 2, 2);
const planeMaterial = new THREE.MeshBasicMaterial({ visible: false, side: THREE.DoubleSide });
const planes = {
XY: new THREE.Mesh(planeGeometry, planeMaterial),
YZ: new THREE.Mesh(planeGeometry, planeMaterial),
XZ: new THREE.Mesh(planeGeometry, planeMaterial),
XYZE: new THREE.Mesh(planeGeometry, planeMaterial),
};
this.activePlane = planes.XYZE;
planes.YZ.rotation.set(0, Math.PI / 2, 0);
planes.XZ.rotation.set(-Math.PI / 2, 0, 0);
for (const i in planes) {
planes[i].name = i;
this.planes.add(planes[i]);
this.planes[i] = planes[i];
}
// // HANDLES AND PICKERS
this.planes = new THREE.Object3D();
this.add(this.handles);
this.add(this.pickers);
this.add(this.planes);
// // PLANES
const planeGeometry = new THREE.PlaneBufferGeometry(50, 50, 2, 2);
const planeMaterial = new THREE.MeshBasicMaterial({ visible: false, side: THREE.DoubleSide });
const planes = {
XY: new THREE.Mesh(planeGeometry, planeMaterial),
YZ: new THREE.Mesh(planeGeometry, planeMaterial),
XZ: new THREE.Mesh(planeGeometry, planeMaterial),
XYZE: new THREE.Mesh(planeGeometry, planeMaterial),
};
this.activePlane = planes.XYZE;
planes.YZ.rotation.set(0, Math.PI / 2, 0);
planes.XZ.rotation.set(-Math.PI / 2, 0, 0);
for (const i in planes) {
planes[i].name = i;
this.planes.add(planes[i]);
this.planes[i] = planes[i];
}
// // HANDLES AND PICKERS
const setupGizmos = function (gizmoMap, parent) {
// current position in spherical coordinates
const spherical = new THREE.Spherical();
const sphericalDelta = new THREE.Spherical();
let scale = 1;
const panOffset = new THREE.Vector3();
let zoomChanged = false;
const rotateStart = new THREE.Vector2();
const rotateEnd = new THREE.Vector2();
const rotateDelta = new THREE.Vector2();
const panStart = new THREE.Vector2();
const panEnd = new THREE.Vector2();
const panDelta = new THREE.Vector2();
const dollyStart = new THREE.Vector2();
const dollyEnd = new THREE.Vector2();
const dollyDelta = new THREE.Vector2();
function getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
}
function getZoomScale() {
return Math.pow(0.95, scope.zoomSpeed);
}
function rotateLeft(angle) {
sphericalDelta.theta -= angle;
}
const STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };
let state = STATE.NONE;
const EPS = 0.000001;
// current position in spherical coordinates
const spherical = new THREE.Spherical();
const sphericalDelta = new THREE.Spherical();
let scale = 1;
const panOffset = new THREE.Vector3();
let zoomChanged = false;
const rotateStart = new THREE.Vector2();
const rotateEnd = new THREE.Vector2();
const rotateDelta = new THREE.Vector2();
const panStart = new THREE.Vector2();
const panEnd = new THREE.Vector2();
const panDelta = new THREE.Vector2();
const dollyStart = new THREE.Vector2();
const dollyEnd = new THREE.Vector2();
const dollyDelta = new THREE.Vector2();
function getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
}
function getZoomScale() {