结合 A-frame 和 Three.js

Posted 2023-02-27

【中文标题】结合 A-frame 和 Three.js

【英文标题】：Combining A-frame with Three.js

【发布时间】：2016-11-01 13:45:00

【问题描述】：

我在想……

是否可以将 Three.js 元素添加到 A 帧场景？ 假设 A-frame 是基于 Three.js 构建的，并且

three Version: ^0.74.0

已登录到您的控制台，这应该不是什么奇怪的事情吧？

我在我的 A 帧场景元素上尝试了这段代码：

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 );

但它不起作用，因为场景对象没有添加功能..可能是因为A帧场景不是普通WebGLRenderer的实例？

有人有这方面的经验吗？这将是非常棒的！

【参考方案1】：

A-Frame 建立在 three.js 之上并公开所有底层功能。

<a-scene>.object3D 让您可以访问THREE.Scene。

每个<a-entity> 都有一个object3D，它是一个组。您可以使用 getObject3D(name) 和 getOrCreateObject3D(name, constructor 向群组添加内容。

要在 A-Frame 框架中添加三个.js 元素，请使用 A-Frame 提供的 Entity-Component 系统。

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

【讨论】：

你能举个例子说明模式括号内的内容吗？我试过这个，我没有看到我的 Three.JS 对象

这将是一个最小的例子，然后，基于凯文斯的回答。 codepen.io/dirkk0/pen/YpNrQR