Combining A-frame with Three.js

Question

I was wondering...

Is it possible to add Three.js elements to a A-frame scene? Assuming A-frame is built upon Three.js, and

three Version: ^0.74.0

is logged into your console it shouldn't be a weird thing right?

I tried this code onto my A-frame scene element:

let scene = document.getElementsByTagName('a-scene');
console.log(scene);

var sphereMaterial = new THREE.MeshLambertMaterial( {  } );
var sphere = new THREE.Mesh( new THREE.SphereGeometry( 15, 10, 10 ), sphereMaterial );
    sphere.position.set(150, 20, -170);
    scene.add( sphere );

But it doesnt work because the scene object doesnt have a add function.. Maybe because the A-frame scene is not an instance of a normal WebGLRenderer?

Does anybody have experience with this? It would be very awesome!

ngokevin · Accepted Answer · 2016-07-13 18:00:41Z

14

A-Frame is built on top of three.js and exposes all underlying functionality.

<a-scene>.object3D gives you access to the THREE.Scene.

Each <a-entity> has an object3D that is a group. You use getObject3D(name) and getOrCreateObject3D(name, constructor to add things to the group.

To add three.js elements within the A-Frame framework, use the Entity-Component system that A-Frame provides.

AFRAME.registerComponent('mythreejsthing', {
  schema: {
    // ... Define schema to pass properties from DOM to this component
  },

  init: function () {
    var el = this.el;  // Entity.
    var mythreejsobject = // ... Create three.js object.
    el.setObject3D('mesh', mythreejsobject);
  }
});

https://aframe.io/docs/0.2.0/core/entity.html#object3d https://aframe.io/docs/0.2.0/core/component.html

answered Jul 13, 2016 at 18:00

ngokevin

13.3k5 gold badges46 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jonathan Allen Grant Over a year ago

Can you give me an example of what goes inside the schema brackets? I tried this and I don't see my Three.JS object

dirkk0 Over a year ago

This would be a minimal example, then, based on Kevins answer. codepen.io/dirkk0/pen/YpNrQR

d0g Over a year ago

I'm working on a project on 8th Wall using A-Frame and Three.js. I'm using a component called "text-geometry" which generates extruded text. It keeps giving me an error getOrCreateObject3D has been deprecated. Use setObject3D() and object3dset event instead. for the line mesh = el.getOrCreateObject3D('mesh', THREE.Mesh) ... how would I do that?

Collectives™ on Stack Overflow

Combining A-frame with Three.js

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related