时间戳

首页 > 解决方案 > 试图从内部函数访问函数参数

javascript - 试图从内部函数访问函数参数

问题描述

我正在使用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();

对象控件.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被旋转，在这种情况下mesh1。

标签： javascriptthree.js

解决方案

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

您的代码中有一个错误，因为您将undefined变量传递game给ObjectControls. 如果game稍后将新对象分配给一行，ObjectControls则不会引用此变量。

这个想法是先将组对象分配给game然后创建ObjectControls。你基本上切换了两条线。

three.js R105

推荐阅读