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

标签 javascript three.js

我正在使用 three.js 和一个类似于 OrbitControls 的脚本作为我的 Controller 。在我的 main.js 文件中,我有一个 THREE.Group() 作为参数传递给 Controller ​​。从那里开始,我试图轮换整个小组。
问题 1:一旦将组传递给 Controller ​​,我就无法在不复制的情况下访问其属性
问题 2:副本不包含整个 THREE.Group(),而只包含第一个 child

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

主要.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 的第一个 child 被旋转,在本例中为 mesh1

最佳答案

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

您的代码中存在错误,因为您将 undefined 变量 game 传递给了 ObjectControls 的构造函数。如果您在一行之后将新对象分配给 game,则 ObjectControls 没有对此变量的引用。

想法是先将组对象分配给game,然后再创建ObjectControls。您实际上切换了两条线路。

three.js R105

关于javascript - 试图从内部函数访问函数参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56390735/

相关文章:

javascript - 设置 THREE.PerspectiveCamera 的距离而不改变 View 方向

javascript - 唯一 JSON 值的数组

javascript - Angular Directive(指令)

javascript - 使用 Three.js 更改 a-frame 场景中 gltf-model 的位置

three.js - 如何停止轨迹球 Controller ? [三.js]

javascript - three.js-为什么它不在对象上应用纹理

javascript - 在 Angular JS 应用程序上注入(inject) ThreeJs 模型

javascript - React - 从 DOM 元素获取组件以进行调试

javascript - 如何在 Nuxt 中使用 vue-tel-input-vuetify?

javascript - 更新数据纹理统一时,所有点都变为 0,0