Three.js 如何将二维几何图形覆盖在三维长方体上并固定其相对位置w.r.t长方体图像

我想将一个三角形led（2d几何体）覆盖在一个长方体几何体上，长方体几何体的侧面使用纹理图像进行渲染。使用轨道控制旋转场景时，三角形led应保持在其原始位置，始终覆盖方框上的三角形灰色空间

这就是我所做的，但我无法达到预期的结果

<script type="text/javascript">

  window.onload = function() {


  var count = 0;
  var azimuthalAngle = 0;
  
  const canvas = document.querySelector('#chassis');
  const overlay = document.querySelector('#overlay');

  // Create the renderer and add it to the page's body element
  const renderer = new THREE.WebGLRenderer({canvas: canvas, alpha: true, antialias: true});
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.sortObjects = false;

  // Create the scene to hold the object
  var scene = new THREE.Scene();

  // Create the camera
  var camera = new THREE.PerspectiveCamera(
    40,                                    // Field of view
    window.innerWidth/window.innerHeight,  // Aspect ratio
    10,                                    // Near plane distance
    1000                                   // Far plane distance
  );

  // Position the camera
  camera.position.set( 0, 0, 25);
  scene.add( camera );

  // Add the lights
  var light = new THREE.PointLight( 0xeaeaea, .35);
  light.position.set( 10, 10, 10 );
  scene.add( light );

  ambientLight = new THREE.AmbientLight( 0xffffff );
  scene.add( ambientLight );

  // Load the textures (chassis images)
  var textureLoader = new THREE.TextureLoader();
  var chassisCoverTexture = textureLoader.load( 'Front.png' );
  var chassisSpineTexture = textureLoader.load( 'side.png' );
  var chassisBackTexture = textureLoader.load( 'Back.png' );
  var chassisPagesTexture = textureLoader.load( 'side.png' );
  var chassisPagesTopBottomTexture = textureLoader.load( 'topbottom.png' );


  // Use the linear filter for the textures to avoid blurriness
  chassisCoverTexture.minFilter
    = chassisSpineTexture.minFilter
    = chassisBackTexture.minFilter
    = chassisPagesTexture.minFilter
    = chassisPagesTopBottomTexture.minFilter
    = THREE.LinearFilter;

  // Create the materials
  var chassisCover = new THREE.MeshLambertMaterial( { color: 0xffffff, transparent: false, map: chassisCoverTexture } );
  var chassisSpine = new THREE.MeshLambertMaterial( { color: 0xffffff, map: chassisSpineTexture } );
  var chassisBack = new THREE.MeshLambertMaterial( { color: 0xffffff, map: chassisBackTexture } );
  var chassisPages = new THREE.MeshLambertMaterial( { color: 0xffffff, map: chassisPagesTexture } );
  var chassisPagesTopBottom = new THREE.MeshLambertMaterial( { color: 0xffffff, map: chassisPagesTopBottomTexture } );

  var materials = [
    chassisPages,          // Right side
    chassisSpine,          // Left side
    chassisPagesTopBottom, // Top side
    chassisPagesTopBottom, // Bottom side
    chassisCover,          // Front side
    chassisBack            // Back side
  ];

  // Create the chassis and add it to the scene
  var chassis = new THREE.Mesh( new THREE.BoxGeometry( 20, 2, 10, 0, 0, 0 ), materials );

  // Create the orbit controls for the camera
  controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.addEventListener('change', shift);
  controls.enableDamping = true;
  controls.dampingFactor = 0.5;
  controls.enablePan = false;
  controls.enableZoom = false;
  controls.minPolarAngle = Math.PI/2;
  controls.maxPolarAngle = Math.PI/2;

  var geometry = new THREE.Geometry();
  geometry.vertices.push(
      new THREE.Vector3( -0.1175, -0.745, 0 ),
      new THREE.Vector3( -0.235, -0.93, 0 ),
      new THREE.Vector3(  0, -0.93, 0 )
  );

  var face = new THREE.Face3(0, 1, 2);
  geometry.faces.push(face);
  var material = new THREE.MeshPhongMaterial({color: 0xff0000, depthTest: false});
  var triangle = new THREE.Mesh(geometry, material);

  var group = new THREE.Group(); 
  group.add( chassis ); 
  group.add( triangle ); 
  scene.add( group );

  scene.add(new THREE.AxesHelper(4));

  console.log("Angle: " + controls.getAzimuthalAngle());
  
  function shift() {
    triangle.position.x = 0.217047*Math.cos(controls.getAzimuthalAngle());
    triangle.position.z = 0.217047*Math.sin(controls.getAzimuthalAngle());
    console.log("X: " + controls.getAzimuthalAngle());
  }

  // Begin the animation
  animate();

  /* Animate a frame */
  function animate(time) {
    
    // Update the orbit controls
    controls.update();

    // Render the frame
    renderer.render( scene, camera );
    
    //(count % 10 == 0) ? material.setValues({color:0xdbdbdb}) : material.setValues({color:0xff0000});
    //count = (count != 1000) ? count+1 : 0;

    // Keep the animation going
    requestAnimationFrame( animate );
  }
}

</script>

window.onload=函数（）{
var计数=0；
var方位角=0；
const canvas=document.querySelector（“#机箱”）；
const overlay=document.querySelector（“#overlay”）；
//创建渲染器并将其添加到页面的body元素中
const renderer=new THREE.WebGLRenderer（{canvas:canvas，alpha:true，antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.sortObjects=false；
//创建场景以容纳对象
var scene=new THREE.scene（）；
//创建摄影机
var摄像机=新的三视角摄像机(
40，//视野
window.innerWidth/window.innerHeight，//纵横比
10，//近平面距离
1000//远平面距离
);
//把相机放好
摄像机位置设置（0,0,25）；
场景。添加（摄影机）；
//加灯
var灯=新的三点灯（0xEAEA，.35）；
光。位置。设置（10，10，10）；
场景。添加（灯光）；
环境光=新的三个环境光（0xffffff）；
场景。添加（环境光）；
//加载纹理（机箱图像）
var textureLoader=new THREE.textureLoader（）；
var chassisCoverTexture=textureLoader.load（'Front.png'）；
var chassissspineTexture=textureLoader.load（'side.png'）；
var chassisBackTexture=textureLoader.load（'Back.png'）；
var chassisPagesTexture=textureLoader.load（'side.png'）；
var chassisPagesTopBottomTexture=textureLoader.load（'topbottom.png'）；
//对纹理使用线性过滤器以避免模糊
chassisCoverTexture.minFilter
=chassisSpineTexture.minFilter
=chassisBackTexture.minFilter
=chassisPagesTexture.minFilter
=chassisPagesTopBottomTexture.minFilter
=三个线性过滤器；
//创建材质
var chassisCover=new THREE.MeshLambertMaterial（{color:0xffffff，transparent:false，map:chassisCoverTexture}）；
var chassissspine=new THREE.MeshLambertMaterial（{color:0xffffff，map:chassissspineTexture}）；
var chassisBack=new THREE.MeshLambertMaterial（{color:0xffffff，map:chassisBackTexture}）；
var chassisPages=new THREE.MeshLambertMaterial（{color:0xffffff，map:chassisPagesTexture}）；
var chassisPagesTopBottom=new THREE.MeshLambertMaterial（{color:0xffffff，map:chassisPagesTopBottomTexture}）；
var材料=[
chassisPages，//右侧
ChassissSpine，//左侧
chassisPagesTopBottom，//顶部
chassisPagesTopBottom，//底侧
底盘盖，//正面
chassisBack//背面
];
//创建机箱并将其添加到场景中
var机箱=新的3.Mesh（新的3.BoxGeometry（20,2,10,0,0,0），材质）；
//为摄影机创建动态观察控件
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
控件。addEventListener（'change'，shift）；
controls.enableDamping=true；
控制。阻尼系数=0.5；
controls.enablePan=false；
controls.enableZoom=false；
controls.minPolarAngle=Math.PI/2；
controls.maxPolarAngle=Math.PI/2；
var geometry=new THREE.geometry（）；
geometry.vertices.push(
新三矢量3（-0.1175，-0.745,0），
新三矢量3（-0.235，-0.93,0），
新三矢量3（0，-0.93,0）
);
变量面=新的三个面3（0，1，2）；
几何。面。推（面）；
var material=new THREE.MeshPhongMaterial（{color:0xff0000，depthTest:false}）；
var三角形=新的三个网格（几何体、材质）；
var group=新的三个.group（）；
添加组（机箱）；
组。添加（三角形）；
场景。添加（组）；
场景。添加（新的三个。AxeHelper（4））；
log（“角度：+controls.getAzimuthalAngle（））；
函数移位（）{
triangle.position.x=0.217047*Math.cos（controls.getAzimuthalAngle（））；
triangle.position.z=0.217047*Math.sin（controls.getAzimuthalAngle（））；
log（“X:+controls.getAzimuthalAngle（））；
}
//开始动画
制作动画（）；
/*为一帧设置动画*/
函数动画（时间）{
//更新轨道控制
控件更新（）；
//渲染帧
渲染器。渲染（场景、摄影机）；
//（计数%10==0）？material.setValues（{color:0xdbdb}）：material.setValues（{color:0xff0000}）；
//计数=（计数！=1000）？计数+1:0；
//继续播放动画
请求动画帧（动画）；
}
}