如何解决为什么我的三js z-index无法创建平滑曲线
我正在尝试使用深度图将平面包裹在Three.js中的圆锥体上,以进行学习。我将深度图均匀地导入到我的顶点着色器中,然后在给定的uv坐标处从其获取颜色值,然后将顶点的z值移动给定的颜色值:
// Import depthmap
uniform sampler2D uDepthMap;
varying vec2 vUv;
void main() {
vUv = uv;
vec3 pos = position;
// Get depthmap green value
float bumpValue = texture2D(uDepthMap,vUv).g;
// Move Z by greenvalue of depthmap
pos.z = pos.z + bumpValue * 7.0;
gl_Position = projectionMatrix * modelViewMatrix * vec4( pos,1.0 );
}
鉴于下面的深度图(平滑的渐变),我希望飞机能够形成平滑的曲线,但是在远x顶点处,飞机看起来像图像中所示。
所以我想知道如何使用深度图正确地将平面弯曲成连续曲线吗?
编辑:
这是我的飞机和我的相机设置;
const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,60);
const planeGeometry = new THREE.PlaneBufferGeometry(10,5,128,64);
const planeMat = new THREE.ShaderMaterial(
{
wireframe: true,vertexShader: vshader,uniforms: this.uniforms,fragmentShader: fshader
}
);
除此之外,所有内容均为默认设置。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。