Question

我正在使用three.js和类似于OrbitControls的脚本作为我的控制器。在我的main.js文件中，有一个THREE.Group()作为参数传递给控制器。从这里开始，我试图轮换整个小组。
问题1：将组传递给控制器后，如果不进行复制，便无法再访问其属性
问题2：副本不包含整个THREE.Group()，而仅包含第一个子对象

我已经为此工作了几个小时，我已经尝试了约50种不同的方法，包括与stackoverflow相关的任何方法。我完全不知道如何解决这个问题。

main.js

let container;
let camera; 
let controls;
let game;
let renderer;
let scene;

function init() {
    container = document.querySelector('#scene-container');
    scene = new THREE.Scene();

    const fov = 35;
    const aspect = container.clientWidth / container.clientHeight;
    const near = 0.1;
    const far = 100;
    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

  //***** This is the important line ******
    controls = new THREE.ObjectControls(camera, container, game);

    game = new THREE.Group();
    scene.add(game);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial();

    var mesh1 = new THREE.Mesh(geometry, material);
    game.add(mesh1);
    var mesh2 = new THREE.Mesh(geometry, material);
    mesh2.position.set(0,1,0);
    game.add(mesh2);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    container.appendChild(renderer.domElement);

    renderer.setAnimationLoop(() => {
        renderer.render(scene, camera);
    });
}

init();

ObjectControls.js

THREE.ObjectControls = function (camera, domElement, objectToMove) {
    mesh = objectToMove;
    domElement.addEventListener('mousemove', mouseMove, false);

    function mouseMove(e) {
        //** objectToMove is undefined :( **
        mesh.rotation.y += 3;        
    }
};

预期结果是整个THREE.Group() game将被旋转，但是我得到的结果是只有game的第一个子项被旋转，在这种情况下为{{1 }}。

Answer 1

controls = new THREE.ObjectControls(camera, container, game);
game = new THREE.Group();

由于将undefined变量game传递给ObjectControls的ctor，因此代码中存在错误。如果您在一行后将新对象分配给game，则ObjectControls没有对该变量的引用。

想法是先将组对象分配给game，然后创建ObjectControls。您基本上可以同时切换两条线。

three.js R105

尝试从内部函数访问函数参数

1 个答案: