Javascript THREE.js-如何实现这种效果？

我有一个Codepen演示：我想把它转换成这个网站英雄部分的背景效果：

下面的图片可能会使这一点更加清楚：

这：

改为：

我真的不知道该怎么办！如果有人能帮助我，甚至创造一支新钢笔，那将是非常棒的

非常感谢你

这是Codepen演示的JavaScript代码：

/***/----核心--*/
/**/常量mainColor='#070707'，
/**/secondaryColor='#FF7F16'，
/**/bgColor='#ffae1e'；
/**/设windowWidth=window.innerWidth，
/**/windowHeight=window.innerHeight；
/**/类Webgl{
/**/建造师（w，h）{
/**/这个.meshCount=0；
/**/this.meshListeners=[]；
/**/this.renderer=new THREE.WebGLRenderer（{antialas:true}）；
/**/this.renderer.setPixelRatio（window.devicePixelRatio）；
/**/this.renderer.setClearColor（新的THREE.Color（bgColor））；
/**/this.scene=新的三个.scene（）；
// http://stackoverflow.com/questions/23450588/isometric-camera-with-three-js
这方面=w/h；
这个距离=5；
this.camera=新的三个正交摄影机（-this.distance*this.aspect，this.distance*this.aspect，this.distance，-this.distance，11000）；
这个.摄像机.位置.设置（20,10,20）；
this.camera.rotation.order='YXZ'；
this.camera.rotation.y=-Math.PI/4；
this.camera.rotation.x=Math.atan（-1/Math.sqrt（2））；
/**/this.dom=this.renderer.domeElement；
this.controls=新的三个.OrbitControls（this.camera，this.dom）；
/**/this.update=this.update.bind（this）；
/**/this.resize=this.resize.bind（this）；
/**/this.resize（w，h）；//设置渲染大小
/**/   }
/**/添加（网格）{
/**/this.scene.add（网格）；
/**/如果（！mesh.update）返回；
/**/this.meshListeners.push（mesh.update）；
/**/这个.meshCount++；
/**/   }
/**/更新（）{
/**/设i=this.meshCount；
/**/而（--i>=0）{
/**/this.meshListeners[i].apply（this，null）；
/**/     }
/**/this.renderer.render（this.scene，this.camera）；
/**/   }
/**/调整大小（宽、高）{
/**/this.renderer.setSize（w，h）；
this.camera.left=-w/100；
this.camera.right=w/100；
this.camera.top=h/100；
this.camera.bottom=-h/100；
this.camera.updateProjectMatrix（）；
/**/   }
/**/ }
/**/const webgl=新的webgl（窗宽、窗高）；
/**/document.body.appendChild（webgl.dom）；
/**/
/**/
/*----正在创建区域--*/
//道具/图形用户界面
常数沉淀=40；
常量道具={
位移：0.3，//0-1
位移x:0.8，//0-1
置换：1，//0-1
速度：1，/-20-20
speedX:1，/-20-20
速度：1，/-20-20
振幅：1，//0-2
高度：2，/-2-2
};
constgui=new dat.gui（）；
gui.close（）；
添加（道具，“置换”，0，1）；
添加（道具，“置换X”，0，1）；
添加（道具，“置换”，0,1）；
添加（道具，'速度'，-20,20）；
添加（道具，'speedX'，0,20）；
添加（道具，'speedY'，0,20）；
添加（道具，“振幅”，0,2）；
添加（道具，高度，-1,4）；
//物体
类扩展了3.Object3D{
建造商（尺寸=5，分段=10，深度=1）{
超级（）；
这个。大小=大小；
本段=段；
这个。深度=深度；
this.part=this.size/this.segment；
this.updateVertice=v=>v；
this.material=新的3.meshlambert材质({
颜色：新三种颜色（第二种颜色），
//明暗处理：3.5倍明暗处理，
三面，双面，
//线框：对，
});
this.geometry=新的三个平面几何体（this.size，this.size，this.segment，this.segment）；
让我；
对于（i=1；i// from the fragment-shader
void main() {
  float val = min(quarticIn(1.0 - (vPositionY ) * (1.0 - vLL)), 1.06);
  gl_FragColor = vec4( val * mix(shadowColor, blendColor, val), 1.0);
  gl_FragColor = vec4(vPositionY * 10.0, 0.0, 0.0, 1.0);
}

gl_FragColor = vec4(vPositionY * 10.0, 0.0, 0.0, 1.0);

gl_FragColor = vec4(vLL, 0.0, 0.0, 1.0);

float val = min(quarticIn(1.0 - vPositionY), 1.06);
gl_FragColor = vec4( val * mix(shadowColor, blendColor, val), 1.0);