获取场景上的坐标（三个js）答案

【问题标题】：Getting the coordinates on the scene (three js)获取场景上的坐标（三个js）
【发布时间】：2016-03-01 15:47:54
【问题描述】：

我真的为此苦苦挣扎，并且经历了几次与我的问题无关的讨论。如果有人可以提供帮助，我将不胜感激。

我正在使用three.js 库编写一个html 文档。有一个名为scaledScene 的场景如下（scaledMap 和scaledScene 已定义）：

scaledMap = new THREE.Mesh( 
                            new THREE.PlaneGeometry( 1600, 1200 ),
                            new THREE.MeshBasicMaterial( {
                            map: new THREE.ImageUtils.loadTexture( 'texture/test1.png' ),
                                        //wireframe: true,
                                        side: THREE.DoubleSide
                                } )
                        );
scaledScene.add( scaledMap );

场景由放大到最高级别的高分辨率图片创建。不允许缩放，只能平移。

controls.noZoom = true;
controls.noPan = false;

我想在平移时获取场景的绝对坐标。例如，如果我平移到左上角，我想获取光标或视图位于左上角的信息。这可能吗？如果是这样，我该怎么做？

【问题讨论】：

标签： javascript html three.js coordinates scene

【解决方案1】：

你想要一个采摘射线。

可以将光线从视口中心发送到 3D 空间中的地图。这将告诉您当前位于视口中心的地图像素。

我已经创建了一个小提琴。

代码如下。它禁用相机的旋转，因此只有平移可用。位于视口中心的图像像素列在视口下方。请记住，threejs 使用笛卡尔空间。因此，150px / 150px 的图像将报告从 -75 到 75 的像素。因此，如果您的 x 均为负数且您的 y 均为正数，那么您就知道您正在查看图像的左上部分。

小提琴：http://jsfiddle.net/v1g64zkb/

var width = 400;
var height = 300;
var aspect = width/height;
var near = 1;
var far = 1000;
var angle = 45;

var createRenderer = function(){
    var renderer =  new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    return renderer;
}
var camera;
var createCamera = function(){
    camera = new THREE.PerspectiveCamera(
        angle, aspect, near, far);    
    camera.position.set( 0, 0, 100 );
    camera.lookAt(new THREE.Vector3( 0, 0, 0 ));
    return camera;
}


var createScene = function(){
    var scene = new THREE.Scene();
    return scene;
}
var createControls = function(camera){

    var controls = new 
        THREE.OrbitControls(camera);

    controls.rotateSpeed = 0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;

    controls.noZoom = true;
    controls.noPan = false;





    return controls;
}
var createLight = function(){
    var light = new THREE.PointLight(0xFFFFFF);
    light.position.x=0;
    light.position.y=0;
    light.position.z=100;
    return light;
}


var scene = createScene();
var camera = createCamera();
var controls = createControls(camera);
var light = createLight();

var renderer = createRenderer();

scene.add(light);


scaledMap = new THREE.Mesh( 
                            new THREE.PlaneGeometry( 150, 150 ),
                            new THREE.MeshBasicMaterial( {
                                                    map: new THREE.ImageUtils.loadTexture( '../img/logo.png' ),
                                        color:0xFFFFFF,
                                        side: THREE.DoubleSide
                                } )
                        );
scene.add( scaledMap );

var raycaster = new THREE.Raycaster();
var cameraPosition = new THREE.Vector2();
cameraPosition.x = 0; 
cameraPosition.y = 0; 

console.log(cameraPosition)
var render = function(){
   renderer.render(scene,camera);


    raycaster.setFromCamera( cameraPosition, camera );


    var intersects = raycaster.intersectObjects( scene.children );

    if(intersects[0] != undefined){
        $("#output").html(intersects[0].point.x.toFixed(2)+" "+intersects[0].point.y.toFixed(2));
  }


    renderer.render( scene, camera );


}
controls.addEventListener('change',render);
var animate = function(){
    requestAnimationFrame(animate);    
    render();
    controls.update();
}

animate();

$("#container").append(renderer.domElement);

//编辑：我不会在渲染调用中运行拾取射线。这只是一个简化的例子。使用控件更改事件或其他任何东西来触发拾取射线。

【讨论】：