三.js。应用 EdgesHelper 后更改网格位置答案

【问题标题】：THREE.js. Change mesh position after applying EdgesHelper三.js。应用 EdgesHelper 后更改网格位置
【发布时间】：2015-01-23 11:16:32
【问题描述】：

我尝试在应用 EdgesHelper 后旋转或更改网格的位置，但它不起作用 - 网格保持在同一位置。（没有 EdgesHelper 它工作正常）。我做错了什么？

var mesh = new THREE.Mesh( geometry, material );
var edges = new THREE.EdgesHelper( mesh, 0xcf0000 );

edges.position.z = 100;
edges.position.x = 100;

scene.add( edges );

【问题讨论】：

你能通过编辑这个 jsfiddle 来展示一个活生生的例子吗：jsfiddle.net/95t964o0 ？
我明白这是一个错误。我必须改变网格的位置，但不能改变边缘。

标签： javascript three.js mesh

【解决方案1】：

查看 THREE.EdgesHelper 的来源，matrixAutoUpdate 似乎设置为 false。这可以防止在每次更新时计算位置和旋转。

https://github.com/mrdoob/three.js/blob/master/src/extras/helpers/EdgesHelper.js

将 EdgesHelper 的 matrixAutoUpdate 设置为 true 应该可以解决问题，但在设置新位置或旋转后调用 .updateMatrix() 函数似乎更清晰。

【讨论】：

【解决方案2】：

我遇到了同样的问题，正如我添加的建议：

        egh.matrixAutoUpdate = true;

边和立方体遵循我使用的坐标：

        var cube = new THREE.Mesh( new THREE.CubeGeometry(width,height,depth), 
                        new THREE.MeshBasicMaterial( {color: 0x00AA00, side:THREE.DoubleSide, opacity: 0.5, transparent: true } ) );
        scene.add(cube);

        var egh = new THREE.EdgesHelper(cube, 0x777777);
        egh.material.linewidth = 1;
        egh.position.x = cube.position.x;
        egh.position.y = cube.position.y;
        egh.position.z = cube.position.z;
        egh.matrixAutoUpdate = true; // this helped
        scene.add(egh);

【讨论】：