Question

我是一名老COBOL程序员，为一个小小的个人项目自学了一点Javascript和Three.js，而且我已经对这个疑问进行了近两天的打击。我已经在StackOverflow中阅读了有关OrbitControls的所有问题，并且无法找到与我尝试做的事情相关的任何事情。所以任何帮助都会受到赞赏。

我的场景如下图所示：

以下是我的剧本现在的样子：

    var container, renderer, scene, camera, controls;
    var Main = {
        Init: function () {
            document.getElementById("comprimento").innerHTML = "Comprimento: " + localStorage.storLength / 100;
        document.getElementById("largura").innerHTML = "Largura: " + localStorage.storWidth / 100;
        document.getElementById("altura").innerHTML = "Altura: " + localStorage.storHeight / 100;
        document.getElementById("quadrado").innerHTML = "Metros²: " + localStorage.storSquare;
        Main.Render();
        Main.Camera();
        Main.Draw();
        Main.Update();
        // events
        window.addEventListener('resize', onWindowResize, false);
    },
    Render: function () {
        renderer = new THREE.WebGLRenderer({ antialias: false });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xffe6ff);
        container = document.getElementById("building");
        document.body.appendChild(container);
        container.appendChild(renderer.domElement);
        // Inicializacao da Cena
        scene = new THREE.Scene();
    },
    Camera: function () {
         //Inicializacao da Camera
         camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        //Posicao da Camera nos eixos X,Y,Z
        camera.position.set(0, 100, 800);
        camera.lookAt(scene.position);
        //Controle de Camera
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        //Controle de Iluminação
        var light = new THREE.PointLight(0xffffff);
        light.position.set(100, 250, 250);
        scene.add(light);
    },
    Draw: function () {
        var planeGeometry = new THREE.PlaneGeometry(localStorage.storWidth, localStorage.storLength, 10, 10);
        var planeMaterial = new THREE.MeshLambertMaterial({
            color: 0x888888,
            side: THREE.DoubleSide
        });
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -Math.PI / 2;
        scene.add(plane);

     },
     Update: function () {
         controls.update();
         renderer.render(scene, camera);
        requestAnimationFrame(Main.Update);
     }
}

function onWindowResize(event) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
}
Main.Init();

这适用于使用orbitControl，而鼠标位于渲染材质所在的部分。我试图做的是，限制轨道控制功能只有在鼠标悬停在覆盖渲染场景的小绿色div上时才可用。我已经尝试搞乱了OrbitControl的参数，尝试在javascript上添加onMouseOver函数，与html中的div相关联，但似乎没有任何效果。我试图做的甚至是可能的？如果是这样，我错过了什么？提前谢谢。

Answer 1

如果我找到你的话，我们假设你有一个小绿色

<div style="position: absolute;" id="LittleGreenDiv"></div>

然后，您可以在创建控件对象时将其用作第二个参数：

var controls = new THREE.OrbitControls(camera, document.getElementById("LittleGreenDiv"));

jsfiddle示例。

将OrbitControl限制为没有渲染的页面区域

1 个答案: