我正在使用 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/