How to use the aframe/src.THREE.Mesh function in aframe
To help you get started, we’ve selected a few aframe examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
kabbi / zanzarah-tools / src / three / TransformControls.js View on Github 
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 PICKERSthis.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) {object3D.rotation.y = Math.atan2(rotation[0], rotation[2]);
if (oldData.type !== type) {
zEntity.toggleMarker(true);
if (this.el.getObject3D('mesh')) {
this.el.removeObject3D('mesh');
}
switch (type) {
case 'UnknownTrigger0': {
const { target } = this.data;
const geometry = new THREE.SphereBufferGeometry(0.5, 4, 2);
const material = new THREE.MeshBasicMaterial({
color: zEntity.getMarkerColor(),
wireframe: true,
});
const sphere = new THREE.Mesh(geometry, material);
sphere.position.fromArray(target).sub(object3D.position);
this.el.setObject3D('mesh', sphere);
break;
}
case 'UnknownTrigger1': {
const { radius } = this.data;
const geometry = new THREE.SphereBufferGeometry(radius, 8, 8);
const material = new THREE.MeshBasicMaterial({
color: zEntity.getMarkerColor(),
wireframe: true,
});
const sphere = new THREE.Mesh(geometry, material);
this.el.setObject3D('mesh', sphere);
zEntity.toggleMarker(false);
break;
}this.pickerGizmos = {
X: [
[ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
],
Y: [
[ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0, 0.6, 0 ] ],
],
Z: [
[ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ] ],
],
XYZ: [
[ new THREE.Mesh(new THREE.BoxBufferGeometry(0.4, 0.4, 0.4), pickerMaterial) ],
],
};
this.setActivePlane = function (axis, eye) {
const tempMatrix = new THREE.Matrix4();
eye.applyMatrix4(tempMatrix.getInverse(tempMatrix.extractRotation(this.planes.XY.matrixWorld)));
if (axis === 'X') {
this.activePlane = this.planes.XY;
if (Math.abs(eye.y) > Math.abs(eye.z)) {
this.activePlane = this.planes.XZ;
}
}
if (axis === 'Y') {[ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0xff0000 })), [ 0.5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
[ new THREE.Line(lineXGeometry, new GizmoLineMaterial({ color: 0xff0000 })) ],
],
Y: [
[ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x00ff00 })), [ 0, 0.5, 0 ] ],
[ new THREE.Line(lineYGeometry, new GizmoLineMaterial({ color: 0x00ff00 })) ],
],
Z: [
[ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x0000ff })), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ],
[ new THREE.Line(lineZGeometry, new GizmoLineMaterial({ color: 0x0000ff })) ],
],
XYZ: [
[ new THREE.Mesh(new THREE.OctahedronGeometry(0.1, 0), new GizmoMaterial({ color: 0xffffff, opacity: 0.25 })), [ 0, 0, 0 ], [ 0, 0, 0 ] ],
],
XY: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({ color: 0xffff00, opacity: 0.25 })), [ 0.15, 0.15, 0 ] ],
],
YZ: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({ color: 0x00ffff, opacity: 0.25 })), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ] ],
],
XZ: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({ color: 0xff00ff, opacity: 0.25 })), [ 0.15, 0, 0.15 ], [ -Math.PI / 2, 0, 0 ] ],
],
};Z: [
[ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x0000ff })), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ],
[ new THREE.Line(lineZGeometry, new GizmoLineMaterial({ color: 0x0000ff })) ],
],
XYZ: [
[ new THREE.Mesh(new THREE.BoxBufferGeometry(0.125, 0.125, 0.125), new GizmoMaterial({ color: 0xffffff, opacity: 0.25 })) ],
],
};
this.pickerGizmos = {
X: [
[ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
],
Y: [
[ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0, 0.6, 0 ] ],
],
Z: [
[ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ] ],
],
XYZ: [
[ new THREE.Mesh(new THREE.BoxBufferGeometry(0.4, 0.4, 0.4), pickerMaterial) ],
],
};],
XYZ: [
[ new THREE.Mesh(new THREE.OctahedronGeometry(0.1, 0), new GizmoMaterial({ color: 0xffffff, opacity: 0.25 })), [ 0, 0, 0 ], [ 0, 0, 0 ] ],
],
XY: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({ color: 0xffff00, opacity: 0.25 })), [ 0.15, 0.15, 0 ] ],
],
YZ: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({ color: 0x00ffff, opacity: 0.25 })), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ] ],
],
XZ: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({ color: 0xff00ff, opacity: 0.25 })), [ 0.15, 0, 0.15 ], [ -Math.PI / 2, 0, 0 ] ],
],
};
this.pickerGizmos = {
X: [
[ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
],
Y: [
[ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0, 0.6, 0 ] ],
],
Z: [
[ new THREE.Mesh(new THREE.CylinderBufferGeometry(0.2, 0, 1, 4, 1, false), pickerMaterial), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ] ],lineZGeometry.addAttribute('position', new THREE.Float32BufferAttribute([ 0, 0, 0, 0, 0, 1 ], 3));
this.handleGizmos = {
X: [
[ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0xff0000 })), [ 0.5, 0, 0 ], [ 0, 0, -Math.PI / 2 ] ],
[ new THREE.Line(lineXGeometry, new GizmoLineMaterial({ color: 0xff0000 })) ],
],
Y: [
[ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x00ff00 })), [ 0, 0.5, 0 ] ],
[ new THREE.Line(lineYGeometry, new GizmoLineMaterial({ color: 0x00ff00 })) ],
],
Z: [
[ new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x0000ff })), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ],
[ new THREE.Line(lineZGeometry, new GizmoLineMaterial({ color: 0x0000ff })) ],
],
XYZ: [
[ new THREE.Mesh(new THREE.OctahedronGeometry(0.1, 0), new GizmoMaterial({ color: 0xffffff, opacity: 0.25 })), [ 0, 0, 0 ], [ 0, 0, 0 ] ],
],
XY: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({ color: 0xffff00, opacity: 0.25 })), [ 0.15, 0.15, 0 ] ],
],
YZ: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({ color: 0x00ffff, opacity: 0.25 })), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ] ],
],
XZ: [_handleRwAtomicSector(section) {
const data = this._getData(section);
const { vertices, indices } = data;
verbose('Processing sector, %d vertices, %d indices', vertices.length, indices.length);
const geometry = this._parseGeometry(data);
const material = new THREE.MultiMaterial(this._materials);
const mesh = new THREE.Mesh(geometry, material);
this._group.add(mesh);
}],
XYZ: [
[ new THREE.Mesh(new THREE.OctahedronGeometry(0.2, 0), pickerMaterial) ],
],
XY: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.4, 0.4), pickerMaterial), [ 0.2, 0.2, 0 ] ],
],
YZ: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.4, 0.4), pickerMaterial), [ 0, 0.2, 0.2 ], [ 0, Math.PI / 2, 0 ] ],
],
XZ: [
[ new THREE.Mesh(new THREE.PlaneBufferGeometry(0.4, 0.4), pickerMaterial), [ 0.2, 0, 0.2 ], [ -Math.PI / 2, 0, 0 ] ],
],
};
this.setActivePlane = function (axis, eye) {
const tempMatrix = new THREE.Matrix4();
eye.applyMatrix4(tempMatrix.getInverse(tempMatrix.extractRotation(this.planes.XY.matrixWorld)));
if (axis === 'X') {
this.activePlane = this.planes.XY;
if (Math.abs(eye.y) > Math.abs(eye.z)) {
this.activePlane = this.planes.XZ;
}
}aframe
A web framework for building virtual reality experiences.
Package Health Score
86 / 100Popular aframe functions
- aframe.registerComponent
- aframe.registerSystem
- aframe.THREE
- aframe.utils
- aframe.utils.bind
- aframe.utils.debug
- aframe/src.registerComponent
- aframe/src.THREE.BufferAttribute
- aframe/src.THREE.BufferGeometry
- aframe/src.THREE.Euler
- aframe/src.THREE.FileLoader
- aframe/src.THREE.Float32BufferAttribute
- aframe/src.THREE.Line
- aframe/src.THREE.Math
- aframe/src.THREE.Matrix4
- aframe/src.THREE.Mesh
- aframe/src.THREE.MeshBasicMaterial
- aframe/src.THREE.Quaternion
- aframe/src.THREE.Vector2
- aframe/src.THREE.Vector3