Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Combining A-frame with Three.js

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!

like image 373
Fabian Tjoe A On Avatar asked Jun 29 '16 17:06

Fabian Tjoe A On


People also ask

Does a frame use three js?

A-Frame is an abstraction on top of three. js, but we still operate with three. js underneath. A-Frame's elements have doors that lead to three.

Does Three js use WebGL?

Three. js is an open source JavaScript library that is used to display the graphics, 3D and 2D objects on the web browser. It uses WebGL API behind the scene.

What can you do with three js?

Three. js is a powerful library for creating three-dimensional models and games. With just a few lines of JavaScript, you can create anything from simple 3D patterns to photorealistic, real-time scenes. You can build simple and complex 3D geometrics, animate and move objects through a lifelike scene, and more.


1 Answers

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

like image 127
ngokevin Avatar answered Oct 17 '22 00:10

ngokevin