如何在具有自定义尺寸的一帧场景中显示 360 度图像？

Posted 2023-02-25

【中文标题】如何在具有自定义尺寸的一帧场景中显示 360 度图像？

【英文标题】：How do I show 360 image in a-frame a-scene with custom size?

【发布时间】：2017-10-31 06:40:24

【问题描述】：

我有这样的代码

HTML

<a-scene embedded>
  <a-sky  src="modules/core/client/img/images/some.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

CSS

a-scene 
  height: 300px;
  width: 50%;

标题

<script src="../../../dist/aframe-master.js"></script>

它适用于全屏（不添加嵌入到 a-scene 标记）。添加 embedded 后，它给了我这些 WebGL 的错误和警告。

three.js:17443 THREE.WebGLShader: Shader couldn't compile.
WebGL: INVALID_OPERATION: useProgram: program not valid
three.js:16803 WebGL: INVALID_OPERATION: drawArrays: no valid shader program in use

【参考方案1】：

你需要有一个像这样的包装元素：

<div id="wrapper" style="height:600px;width:600px">
    <a-scene embedded style="height:100%;width:100%>
    </a-scene>
</div>

现场小提琴here