Question

目前我的渲染模型（灰色）采用html页面的整个宽度，网格位于该宽度的中心。我的目标是减小宽度 - 但是通过这样做，即使在模型上的咔哒声似乎也会偏移，而且Three.js仍然认为我的网格仍然在宽度的中心，而实际上它不是并且已经向左移动了宽度减少了。

代码示例：

我目前有类似这样的事情，第一步是创建一个渲染器，它将占据屏幕宽度的渲染对象和渲染对象放在该宽度的中心。这段代码示例很好用

  var WIDTH = window.innerWidth;
  HEIGHT = window.innerHeight/2;

  // Create a renderer and add it to the DOM.
  renderer = new THREE.WebGLRenderer({antialias:true});
  renderer.setSize(WIDTH, HEIGHT);

然后我将渲染的图像粘贴到我的html页面上的div中。

  container = document.getElementById( 'canvas' );
  document.body.appendChild( container );
  container.appendChild( renderer.domElement );

然后我创建一个网格并将其添加到名为targetList

的数组中

    mesh = new THREE.Mesh(geometry, material);
    mesh.position = new THREE.Vector3(0, -3, 0) ;

    projector = new THREE.Projector();  
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );

    scene.add(mesh);
    targetList.push(mesh);

现在，如果有人点击渲染图像，则会调用以下函数

function onDocumentMouseDown( event ) 
{
   console.log("Click.");
   // update the mouse variable
   mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
   mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

   // find intersections
   var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
   projector.unprojectVector( vector, camera );
   var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

   // create an array containing all objects in the scene with which the ray   intersects
  var intersects = ray.intersectObjects( targetList );

  // if there is one (or more) intersections
  if ( intersects.length > 0 )
  {
      console.log("Hit @ " + toString( intersects[0].point ) );
  }

}

现在一切正常，无论何时我在渲染模型中点击，我都会得到类似的东西

Hit @ [ -0.12506098558617107, 2.650102060480923, 1.2154427674550532 ]

问题的开始

现在问题开始了，如果我减小宽度并更改第一个语句

var WIDTH = window.innerWidth;

要 var WIDTH = window.innerWidth / 2;

现在，当我点击图像时，我只是得到“点击”输出，由于某种原因3js认为我没有点击模型。如果我点击中心（模型的旧位置）3js认为我点击了模型内部。我的问题是为什么减小宽度会导致我的模型移动到屏幕左侧对坐标产生影响。为什么3j仍然认为我的模型在中心？

Answer 1

更改渲染的宽度和高度时，窗口大小不会改变。所以当你取消鼠标时，你应该考虑这个问题。＆＃34;更新鼠标变量＆＃34;操作将是mouse.x = ( event.clientX / (window.innerWidth/2) ) * 2 - 1; mouse.y = - ( event.clientY / (window.innerHeight/2) ) * 2 + 1;

为什么减小渲染器的大小会抵消我的点击事件 - 如何解决此问题

1 个答案: