我们如何在three.js的背景中添加Gif

如何解决我们如何在three.js的背景中添加Gif

function createScene() {
  cubeSize = 200;
  fieldDepth = 50;
  fieldWidth = 200;
  fieldHeight = 200;
  initObstacles = _ => _;
  // set the scene size
  var WIDTH = 1000;
  var HEIGHT = 500;

  // set camera attributes
  var VIEW_ANGLE = 40,ASPECT = WIDTH / HEIGHT,NEAR = 0.1,FAR = 1000;

  // --------------create a WebGL renderer,camera and a scene------------------


  renderer = new THREE.Webglrenderer({
    antialias: true,alpha: true
  });
  // start the renderer
  renderer.setSize(WIDTH,HEIGHT);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(500,1.25,0.1,1000);

  // ----------Add the camera to the scene----------
  scene.add(camera);

  // Set a default position for the camera
  camera.position.z = 225;


  // Attach the render-supplied DOM element to the gameCanvas
  var c = document.getElementById("gameCanvas");
  c.appendChild(renderer.domElement);

  // Make a cube with LAmbert material
  // ---------------------------------
  // Lower fragments can increase performance
  var cubeWidth = cubeSize,cubeHeight = cubeSize,cubedepth = 10,cubeQuality = 1;
  // create the cube's material
  var cubeMaterial = new THREE.MeshLAmbertMaterial({
    color: 0xb22222
  });
  //---------create a cube with sphere geometry and the meterial--------------


  cube = new THREE.Mesh(
    new THREE.BoxGeometry(
      cubeWidth,cubeHeight,cubedepth,cubeQuality,cubeQuality
    ),cubeMaterial);

  // lift the cube to half of the playing space height
  cube.position.z = fieldDepth / 2;
  // set the cube x position in the left of the play field
  cube.position.x = -fieldWidth / 3;

  // add the cube to the scene
  scene.add(cube);

  // Make sky background plane
  // sky plane vars

  var planeWidth = fieldWidth,planeHeight = fieldHeight,planeQuality = 5;
  // create plane's material
  var planeMaterial = new THREE.MeshLAmbertMaterial({

    color: 0xff0000

  });
  //----------create the playing surface plane--------


  var plane = new THREE.Mesh(
    // changed PlaneGeometry to PlaneBufferGeometry for lower memory footprint
    new THREE.PlaneBufferGeometry(
      planeWidth,planeHeight,planeQuality,),planeMaterial);


  scene.add(plane);

  // Obstacles
  initObstacles();

  //---------------Lights------------


  var directionalLight = new THREE.DirectionalLight(0xffffff,1);
  directionalLight.position.set(0,100);
  directionalLight.rotation.x = 90 * Math.PI / 180;
  scene.add(directionalLight);
  
  renderer.render(scene,camera);
}
createScene();

<script src="https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.min.js"></script>
<div id="gameCanvas"></div>

解决方法

为画布添加背景

canvas {
  background-image: url("https://greggman.com/images/godzilla.gif");
  background-size: cover;
}

function createScene() {
  cubeSize = 200;
  fieldDepth = 50;
  fieldWidth = 200;
  fieldHeight = 200;
  initObstacles = _ => _;
  // set the scene size
  var WIDTH = 1000;
  var HEIGHT = 500;

  // set camera attributes
  var VIEW_ANGLE = 40,ASPECT = WIDTH / HEIGHT,NEAR = 0.1,FAR = 1000;

  // --------------create a WebGL renderer,camera and a scene------------------


  renderer = new THREE.WebGLRenderer({
    antialias: true,alpha: true
  });
  // start the renderer
  renderer.setSize(WIDTH,HEIGHT);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(500,1.25,0.1,1000);

  // ----------Add the camera to the scene----------
  scene.add(camera);

  // Set a default position for the camera
  camera.position.z = 225;


  // Attach the render-supplied DOM element to the gameCanvas
  var c = document.getElementById("gameCanvas");
  c.appendChild(renderer.domElement);

  // Make a cube with Lambert material
  // ---------------------------------
  // Lower fragments can increase performance
  var cubeWidth = cubeSize,cubeHeight = cubeSize,cubeDepth = 10,cubeQuality = 1;
  // create the cube's material
  var cubeMaterial = new THREE.MeshLambertMaterial({
    color: 0xb22222
  });
  //---------create a cube with sphere geometry and the meterial--------------


  cube = new THREE.Mesh(
    new THREE.BoxGeometry(
      cubeWidth,cubeHeight,cubeDepth,cubeQuality,cubeQuality
    ),cubeMaterial);

  // lift the cube to half of the playing space height
  cube.position.z = fieldDepth / 2;
  // set the cube x position in the left of the play field
  cube.position.x = -fieldWidth / 3;

  // add the cube to the scene
  scene.add(cube);

  // Make sky background plane
  // sky plane vars

  var planeWidth = fieldWidth,planeHeight = fieldHeight,planeQuality = 5;
  // create plane's material
  var planeMaterial = new THREE.MeshLambertMaterial({

    color: 0xff0000

  });
  //----------create the playing surface plane--------


  var plane = new THREE.Mesh(
    // changed PlaneGeometry to PlaneBufferGeometry for lower memory footprint
    new THREE.PlaneBufferGeometry(
      planeWidth,planeHeight,planeQuality,),planeMaterial);


  scene.add(plane);

  // Obstacles
  initObstacles();

  //---------------Lights------------


  var directionalLight = new THREE.DirectionalLight(0xffffff,1);
  directionalLight.position.set(0,100);
  directionalLight.rotation.x = 90 * Math.PI / 180;
  scene.add(directionalLight);
  
  renderer.render(scene,camera);
}
createScene();

canvas {
  background-image: url("https://greggman.com/images/godzilla.gif");
  background-size: cover;
}

<script src="https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.min.js"></script>
<div id="gameCanvas"></div>