使用CSS3D Canvas

Question

目标：我使用three.js在场景中有一个平面几何体。我想使用鼠标点击事件在平面上实时绘制图像。用户应该感觉到他在网格上绘图并且图像被应用在他点击的场景中的相同位置。

我正在尝试制作一个画布，使用CSS3DRender将它放入与网格和相同尺寸相同位置的场景中。无论用户在画布上绘制什么，都会将其转移到平面网格纹理。

问题：画布与平面大小不同，即使指定了大小。它也不适合平面网格。基本上帆布不会与平面网格混合。

实施例：jsfiddle link

＆＃13;

＆＃13;

var camera;
var controls;
var scene;
var torus;
var light;
var renderer;
var scene2;
var renderer2;
var div;

init();
animate();

function init() {
  var DPR = (window.devicePixelRatio) ? window.devicePixelRatio : 1;

  //camera
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 0, 500);

  //controls
  controls = new THREE.OrbitControls(camera);
  controls.rotateSpeed = 1.0;
  controls.zoomSpeed = 1.2;
  controls.panSpeed = 0.8;

  //Scene
  scene = new THREE.Scene();
  var material1 = new THREE.MeshPhongMaterial({
    color: 0x15c6ff
  });

  //plane
  plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), material1);
  plane.position.set(20, 30, 20);

  //assume i dont know height,widht;
  plane.geometry.computeBoundingBox();
  var bbox = plane.geometry.boundingBox;



  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  canvas.height = bbox.max.y - bbox.min.y;
  canvas.width = bbox.max.x - bbox.min.x;
  canvas.style.border = '1px blue solid';
  canvas.style.opacity = 0.2; //users should feel like he is drawing on geometry
  var img = new Image();
  THREE.ImageUtils.crossOrigin = '';
  img.src = 'http://s32.postimg.org/rv1t8x33p/tree.jpg';
  img.onload = function() {
    context.fillStyle = 'green';
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fill();
    context.beginPath();
    var div = new THREE.CSS3DObject(canvas);
    //same position as plane mesh
    div.position.x = plane.position.x;
    div.position.y = plane.position.y;

    div.offsetHeight = 0;
    div.offsetWidth = 0;
    console.log(div);

    canvas.addEventListener('click', handleClick, false)

    function handleClick(e) {

      context.drawImage(img, Math.floor(e.offsetX / (10)) * (10), Math.floor(e.offsetY / (10)) * (10), (100), (100)); //brick

      texture1 = new THREE.Texture(canvas);
      console.log(canvas);
      texture1.needsUpdate = true;
      //material1.map=texture1;
      //	material1.needsUpdate = true;

    }
    scene2.add(div);
    scene.add(plane);
  }

  //HemisphereLight
  light = new THREE.HemisphereLight(0xffbf67, 0x15c6ff);
  scene.add(light);

  //WebGL Renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setClearColor(0xffffff, 1)
  renderer.setSize(window.innerWidth, window.innerHeight);
  //renderer.setPixelRatio( window.devicePixelRatio );
  renderer.domElement.style.zIndex = 5;
  document.body.appendChild(renderer.domElement);

  //CSS3D Scene
  scene2 = new THREE.Scene();

  //CSS3D Renderer
  renderer2 = new THREE.CSS3DRenderer();
  renderer2.setSize(window.innerWidth, window.innerHeight);
  //renderer2.setPixelRatio( window.devicePixelRatio );
  renderer2.domElement.style.position = 'absolute';
  renderer2.domElement.style.top = 0;
  document.body.appendChild(renderer2.domElement);
}

function animate() {
  requestAnimationFrame(animate);
  renderer2.render(scene2, camera);
  renderer.render(scene, camera);
  controls.update();
}

＆＃13;

<script src="http://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

＆＃13;

＆＃13;

＆＃13;