标准全屏四屏设置在三.js中不起作用
Standard Full Screen Quad Setup not Working in Three.js
我正在尝试使用 THREE.js 中的直通顶点着色器建立一个全屏四边形。 四边形本身是一个平面几何,其尺寸 (2, 2) 位于原点。 它被分配了着色器材质。 相机z = 1
瞄准四边形。
着色器非常简单:
顶点着色器:
void main() {
gl_Position = vec4( position, 1.0 );
}
片段着色器:
void main() {
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
但是屏幕上没有显示任何内容。 这种设置是渲染到纹理的标准方式,为什么在 THREE.js 中不起作用?
我已经尝试plane.frustumCulled = false
并更改相机的剪辑平面无济于事。
任何帮助,不胜感激。
经过进一步调查,看不到渲染结果的原因更加复杂,并指出了三.js中的一些奇怪行为。
我正在使用应用了旋转矩阵的平面几何体,然后由带有计数器旋转的 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 * 0.5;
scene.add(obj);
此设置似乎抛出了三.js并且没有显示渲染。
好的,旋转被丢弃了,因为它是我在顶点着色器中忽略的模型视图矩阵的一部分。我必须回顾我目前正在做的事情。
我不确定您遇到的确切问题,但这里有一个使用相同技术的工作全屏四屏四边形的示例。
var canvas = document.getElementById('canvas');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
var camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientWidth, 1, 1000);
var clock = new THREE.Clock();
var quad = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2),
new THREE.ShaderMaterial({
vertexShader: document.getElementById('vertex-shader').textContent,
fragmentShader: document.getElementById('fragment-shader').textContent,
depthWrite: false,
depthTest: false
})
);
scene.add(quad);
var box = new THREE.Mesh(
new THREE.BoxGeometry(50, 50, 50),
new THREE.MeshBasicMaterial({color: '#000', wireframe: true})
);
scene.add(box);
camera.position.z = 200;
render();
function render() {
requestAnimationFrame(render);
if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
var dt = clock.getDelta();
box.rotation.x += dt * 2 * Math.PI / 5;
box.rotation.y += dt * 2 * Math.PI / 7;
box.rotation.z += dt * 2 * Math.PI / 11;
renderer.render(scene, camera);
}
html, body, #canvas {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<canvas id="canvas"></canvas>
<script id="vertex-shader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 1.0);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
varying vec2 vUv;
void main() {
gl_FragColor = vec4(vUv, 0.0, 1.0);
}
</script>
相关文章:
- 预编译的JSX React,js不起作用
- Backbone.js 不起作用,而 Underscore、JSON 和 jQuery 可以
- HTML 显示/隐藏元素 JS 不起作用
- 为什么这个JS不起作用
- 主干上的无限滚动/分页.js不起作用
- AngularJs 和时刻.js不起作用
- 为什么图像选择器程序中的这个函数 js 不起作用
- EasyPieChart.js不起作用
- Int Array Django 通过上下文传递到 JS 不起作用
- tty.js不起作用
- 三元操作 JS 不起作用
- Rails 4 - 没有JavaScript错误,但JS不起作用
- 无法加载高图.js和高图.js(地图.js不起作用)
- 刻字.js不起作用
- 幻灯片.js不起作用
- 在我更改我的 .htaccess 后,我的 Css An Js 不起作用
- 可排序.js不起作用:列表项不可拖动
- 在视图源代码中阻碍 Js 不起作用
- 角度JS不起作用
- 推特引导程序 - JS不起作用