Question

我正在尝试使用Three.js Sprite从Blender导出的对象上覆盖一些文本。文本已正确加载，但显示为反相。这是我的HTML：

<html>
    <head>
        <meta charset="utf-8">
        <title>Task-1</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <!-- <script src="js/loaders/LoaderSupport.js"></script> -->
        <script src="js/loaders/ObjectLoader.js"></script>
        <!-- <script src="js/controls/TrackballControls.js"></script> -->
        <div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
        <script src="TextOverlay.js"></script>
    </body>
</html>

这是我的JS代码：

var scene, camera, renderer, object, container;

function init() {
  scene = new THREE.Scene();
  // Add lights to the scene
  var light1 = new THREE.AmbientLight(0xffffff, 0.4);
  var light2 = new THREE.PointLight(0xffffff, 0.8);
  scene.add(light1);
  scene.add(light2);

  initCamera();
  initRenderer();

  // initialise loading manager
  function loadModel() {
    object.position.z = -250;
    object.position.y = -250;
    object.position.x = -150;
    scene.add(object);
  }

  var manager = new THREE.LoadingManager(loadModel);
  manager.onProgress = function(item, loaded, total) {
    console.log(item, loaded, total);
  };

  // load model
  var loader = new THREE.OBJLoader(manager);
  loader.setPath("/resources/");
  loader.load("Pix.obj", function(obj) {
    object = obj;
  });

  // overlay text
  var overlayText = makeOverlayText("Text Overlay", {
    fontSize: 32,
    borderColor: { r: 255, g: 0, b: 0, a: 1.0 },
    backgroundColor: { r: 255, g: 100, b: 100, a: 0.8 }
  });
  overlayText.position.set(-window.innerWidth / 2, window.innerHeight / 2, 1);
  scene.add(overlayText);

  container = document.getElementById("ThreeJS");
  container.appendChild(renderer.domElement);
}

function initCamera() {
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    3000
  );
  camera.position.y = 1600;
  camera.lookAt(scene.position);
}

function initRenderer() {
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.autoClear = false;
}

function makeOverlayText(message, parameters) {
  if (parameters === undefined) parameters = {};

  var fontface = parameters.hasOwnProperty("fontface")
    ? parameters["fontface"]
    : "Arial";

  var fontsize = parameters.hasOwnProperty("fontsize")
    ? parameters["fontsize"]
    : 18;

  var borderThickness = parameters.hasOwnProperty("borderThickness")
    ? parameters["borderThickness"]
    : 4;

  var borderColor = parameters.hasOwnProperty("borderColor")
    ? parameters["borderColor"]
    : { r: 255, g: 255, b: 255, a: 1.0 };

  var backgroundColor = parameters.hasOwnProperty("backgroundColor")
    ? parameters["backgroundColor"]
    : { r: 255, g: 255, b: 255, a: 1.0 };

  //var spriteAlignment = THREE.SpriteAlignment.topLeft;

  var canvas = document.createElement("canvas");
  canvas.width = 100;
  canvas.height = 100;
  var context = canvas.getContext("2d");
  context.font = "Bold" + fontsize + "px" + fontface;

  // background color
  context.fillStyle =
    "rgba(" +
    backgroundColor.r +
    "," +
    backgroundColor.g +
    "," +
    backgroundColor.b +
    "," +
    backgroundColor.a +
    ")";

  // border color
  context.strokeStyle =
    "rgba(" +
    borderColor.r +
    "," +
    borderColor.g +
    "," +
    borderColor.b +
    "," +
    borderColor.a +
    ")";

  context.lineWidth = borderThickness;
  context.fillStyle = "rgba(255, 255, 255, 1.0)";
  context.fillText(message, borderThickness, fontsize + borderThickness);

  // canvas contents will be used for a texture
  var texture = new THREE.Texture(canvas);
  texture.needsUpdate = true;

  var spriteMaterial = new THREE.SpriteMaterial({
    map: texture
  });
  var sprite = new THREE.Sprite(spriteMaterial);
  sprite.scale.set(1000, 1000, 1);
  sprite.center.set(0.5, 0.5);
  return sprite;
}

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

init();
render();

这是输出：

请告诉我我要去哪里错了？

Three.js：文本精灵显示为倒置

0 个答案: