小编use*_*142的帖子

标准全屏四重设置在 Three.js 中不起作用

我正在尝试使用 THREE.js 中的直通顶点着色器建立一个全屏四边形。四边形本身是一个平面几何体,尺寸 (2, 2) 位于原点。它被分配了 ShaderMaterial。相机瞄准z = 1四边形。

着色器非常简单:

顶点着色器:

void main() {
   gl_Position = vec4( position, 1.0 );
}
Run Code Online (Sandbox Code Playgroud)

片段着色器:

void main() {
   gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
Run Code Online (Sandbox Code Playgroud)

但屏幕上什么也没有显示。此设置是渲染到纹理的标准方法,为什么它在 THREE.js 中不起作用?

我尝试过plane.frustumCulled = false更改相机的剪辑平面,但无济于事。

任何帮助表示赞赏。


经过进一步调查,看不到渲染结果的原因更为复杂,并指出了 Three.js 中的一些奇怪行为。

我使用的是应用了旋转矩阵的 PlaneGeometry,然后由具有反向旋转的 Object3D 包裹。

var geometry = new THREE.PlaneGeometry(2, 2);
var m4 = new THREE.Matrix4().makeRotationX(Math.PI * 0.5);
geometry.applyMatrix(m4);

var mesh = new THREE.Mesh(geometry, material);
var obj = new THREE.Object3D();
obj.add(mesh);
obj.rotation.x = -Math.PI * …
Run Code Online (Sandbox Code Playgroud)

html javascript three.js

4
推荐指数
1
解决办法
5039
查看次数

标签 统计

html ×1

javascript ×1

three.js ×1