我尝试在框架中使用 Three.js 库。
例如,
var helper = new THREE.MMDHelper(renderer);
Run Code Online (Sandbox Code Playgroud)
我不知道如何在框架中获得渲染器。
a-scene 有一个渲染器属性。
=> https://aframe.io/docs/0.3.0/core/scene.html
但是,它是未定义的。
document.querySelector('a-scene').renderer; <= undefined
Run Code Online (Sandbox Code Playgroud)
请告诉我如何获取渲染
当我创建一个动画元素时,我想知道动画完成的确切时间.我知道"dur"或"begin"可以计算出大概的时间,但是当我使用a-时有任何回调函数动画元素!
我在想...
是否可以将Three.js元素添加到A帧场景中?假设A帧建立在Three.js上,并且
three Version: ^0.74.0
Run Code Online (Sandbox Code Playgroud)
登录到你的控制台它不应该是一个奇怪的事情吗?
我在我的A-frame场景元素上尝试了这个代码:
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 );
Run Code Online (Sandbox Code Playgroud)
但它不起作用,因为场景对象没有添加函数..也许是因为A帧场景不是普通WebGLRenderer的实例?
有没有人有这方面的经验?这将是非常棒的!
当用户在浏览网页上的VR场景时进入VR模式时,是否触发任何JavaScript事件?
还是有任何功能可以返回用户是否正在以VR模式查看网页?
一个简单的问题。我用了4到6个小时来找到它,但没有找到。
例如,我正在构建全景查看器:<a-sky>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<a-scene>
<a-sky src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>Run Code Online (Sandbox Code Playgroud)
如何通过鼠标反转旋转?(从左到右,从右到左-像这样)
我正在尝试一个框架,找不到任何关于如何拖放元素的东西,并且已经找了几个小时!有人熟悉a-frame吗?谢谢
那是我的代码到目前为止:
<a-scene>
<a-cursor></a-cursor>
<a-assets>
<img id="enemy-sprite" crossorigin="" src="mustache1.jpg">
</a-assets>
<a-image look-at="#player" src="#enemy-sprite" transparent="true" position="0 1.8 -4"></a-image>
<a-camera id="player" position="0 1.8 0"></a-camera>
<a-sky src="street.jpg"></a-sky>
Run Code Online (Sandbox Code Playgroud)
编辑:browser/home.html:
<scene scene-id="sceneId"></scene>
Run Code Online (Sandbox Code Playgroud)
浏览器/ JS /应用/指令/ screne.html:
<a-scene>
<a-sphere click-drag position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-camera look-controls-enabled="false"></a-camera>
</a-scene>
Run Code Online (Sandbox Code Playgroud)
的index.html
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-click-drag-component"></script>
<script> registerAframeClickDragComponent(window.AFRAME); </script>
Run Code Online (Sandbox Code Playgroud) 我试图将.OBJ模型嵌入到元素中,以便将其限制为特定的宽度和高度,而不是整页画布.我正在尝试复制嵌入到https://sketchfab.com/标题中的"场景" .我希望我的场景中的相机围绕模型的中心轴平移(就像在示例中一样).
我无法完成此任务...到目前为止,我能够成功将以下afame场景加载到我的浏览器中:
<a-scene>
<a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
</a-scene>
Run Code Online (Sandbox Code Playgroud)
但我无法将场景调整大小并限制在div或画布内(我认为画布会更好?).
我试过:
1.将a-scene嵌套到div中并在CSS中调整div的大小
<div class="aframebox"><a-scene></a-scene></div>
2.我也试过跟随,我猜不再是版本0.3.0的一部分了?
<a-scene canvas="height: 50; width: 50"></a-scene>
0.2.0信息
如果有人能告诉我怎么做,我真的很感激,
谢谢.
我很难将SVG正确渲染到框架的场景中。我走了htmltexture-component路线,该路线依赖于draw-component。
问题在于要使SVG的背景呈现为透明。它根本不起作用。相反,我得到了在画布上绘制的默认白色背景。我的SVG是在Illustrator中创建的,是没有背景(作为彩色或光栅图像)的有效HTML对象。
<div id="bears">
<svg xmlns="http://www.w3.org/2000/svg" width="518" height="500" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M168.958 480.023c-12.18-1.57-24.62-6.847-34.293-14.544-9.103-7.25-11.733-15.34-7.8-23.99 4.594-10.11 22.386-19.1 27.564-13.92 1.71 1.71 2.03 5.14.68 7.27-.63.99-1.03.66-1.51-1.25-1.37-5.43-13.5-2.54-16.44 3.92-2.72 5.95-.57 14.06 4.3 16.28 5.39 2.45 15.09 1.04 23.89-3.49 3.63-1.87 13.35-9.11 19.14-14.25 12.62-11.23 19.38-16.07 28.49-20.42 5.93-2.84 7.37-3.11 16.5-3.11 8.3 0 10.88.39 15.18 2.32 2.84 1.27 5.95 3.17 6.9 4.22 2.05 2.26 3.74 2.42 5.34.5 2.24-2.71 11.83-6.6 17.78-7.23 6.83-.72 17.37.833 22.4 3.3 3.87 1.892 14 8.59 17.72 11.72 1.38 1.155 6.14 5.31 10.59 9.225 14.51 12.8 …Run Code Online (Sandbox Code Playgroud) 我已经成功地将模型加载到框架中。我有骨头的动画。我想加载它。或者可能只是关键帧。
如何导出框架的搅拌器骨骼动画?我怎么称呼那些动画?
也许这不是特定于Aframe所以道歉如果这更像是一个普通的html问题,但如果你有一个透明的PNG并把它放在另一个图像或任何不透明度小于1.0的对象前面,那么透明部分是PNG掩盖了它背后的东西.有没有办法解决这个问题而不将PNG放在另一个实体后面?
这是一个png的例子,表明它应该如何在基元前面.它的工作原理是因为基元完全不透明:https: //codepen.io/iBrews/pen/dWNymp
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-assets>
<img id="pngImage" crossorigin="anonymous"
src="http://ekladata.com/hXTGfWnZm170W274zDRObDlqOlc.png">
</a-assets>
<a-scene>
<a-image position = "0 1.5 -1" width="1" height="1" src="#pngImage"></a-image>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
Run Code Online (Sandbox Code Playgroud)
这是我的问题的一个例子.带有透明度的png会屏蔽其后面的所有图像,无论它们是否具有透明度,以及任何不透明度小于1.0的图元 https://codepen.io/iBrews/pen/ZKLpqp
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-assets>
<img id="transpImage" crossorigin="anonymous" src="http://ekladata.com/hXTGfWnZm170W274zDRObDlqOlc.png">
<img id="flatImage" crossorigin="anonymous" src="https://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png">
</a-assets>
<a-scene>
<a-image position = "0 1.6 …Run Code Online (Sandbox Code Playgroud)