获取现场坐标(三个js）

Getting the coordinates on the scene (three js)

本文关键字：js 三个 现场 坐标 获取      更新时间：2023-09-26

我真的很挣扎，并且经历了几次与我的问题无关的讨论。如果有人能帮忙，我将不胜感激。

我正在使用三.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;

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

你想要一条采摘射线。

可以将光线从视口中心发送到 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);

编辑：我不会在渲染调用中运行拾取光线。这只是一个简化的示例。使用控件更改事件或任何内容来发射拾取射线。

相关文章：