将Three.js AxesHelper添加到组的所有子级。每个轴辅助程序的轴辅助程序位置默认为0,0,0

时间：2018-11-05 16:41:24

标签： three.js fbx

我希望有人可以澄清这里幕后发生的事情。

我有一个要通过以下方法加载的对象：

var loader = new THREE.FBXLoader();
                loader.load( '../assets/models/Windia_C4D_Export.fbx', function ( object ) {
                //loader.load( '../assets/models/quiggles_AR.fbx', function ( object ) {
                    console.log(object);
                    object.traverse( function ( child ) {
                        console.log(child);
                        if ( child.isMesh ) {

                            const oldMat = child.material;
                            //CONVERT MATERIAL TO STANDARD MATERIAL.
                            child.material = new THREE.MeshStandardMaterial({
                                color: oldMat.color,
                                map: oldMat.map,
                            });

                            child.castShadow = true;
                            child.receiveShadow = true;
                            child.material.combine = THREE.MixOperation;
                            child.material.envMap = envMap;
                            child.material.shininess=10;
                            child.material.refractionRatio=.5;
                            child.material.reflectivity=0.1;
                            //child.material.normalMap = texture;
                            //child.material.normalMapType = 0;
                            child.material.metalness=1;
                            //child.material.color.setHex( 0xffffff );

                            var sphereAxis = new THREE.AxesHelper(200);
                            child.add(sphereAxis);

                        }

                    } );
                    console.log(object);
                    object.scale.set(1,1,1);
                    scene.add( object );

                } );

遍历所有已加载的子代并对作为网格对象的每个子代应用相同的THREE.AxesHelper之后，每个axeshelper都位于相同的位置0、0、0，而不是与它们关联的子代对齐

这是记录加载对象的结果：

Group {uuid: "FBBF7E4B-7754-4138-BF1D-729398C2FB57", name: "VSM890D050Z05S22SN12_obj", type: "Group", parent: Group, children: Array(12), …}
ID: 140463347645952
animations: undefined
castShadow: false
children: (12) [Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh]
frustumCulled: true
layers: Layers {mask: 1}
matrix: Matrix4 {elements: Array(16)}
matrixAutoUpdate: true
matrixWorld: Matrix4 {elements: Array(16)}
matrixWorldNeedsUpdate: false
name: "VSM890D050Z05S22SN12_obj"
parent: Scene {uuid: "2D5254A0-ECA2-48D7-93D3-E0DD23E31277", name: "", type: "Scene", parent: null, children: Array(4), …}
position: Vector3 {x: 0, y: 0, z: 0}
quaternion: Quaternion {_x: 0, _y: 0, _z: 0, _w: 1, onChangeCallback: ƒ}
receiveShadow: false
renderOrder: 0
rotation: Euler {_x: -0, _y: 0, _z: -0, _order: "XYZ", onChangeCallback: ƒ}
scale: Vector3 {x: 1, y: 1, z: 1}
type: "Group"
up: Vector3 {x: 0, y: 1, z: 0}
userData: {transformData: {…}}
uuid: "FBBF7E4B-7754-4138-BF1D-729398C2FB57"
visible: true
eulerOrder: (...)
id: 17
modelViewMatrix: Matrix4 {elements: Array(16)}
normalMatrix: Matrix3 {elements: Array(9)}
useQuaternion: (...)
__proto__: Object3D

以下是上面组中前两个子网格的展开图。即使项目在加载的模型中位于不同的位置，您也可以看到轴辅助器的位置相同。

Group {uuid: "FBBF7E4B-7754-4138-BF1D-729398C2FB57", name: "VSM890D050Z05S22SN12_obj", type: "Group", parent: Group, children: Array(12), …}
ID: 140463347645952
animations: undefined
castShadow: false
children: Array(12)
0: Mesh
ID: 140463347532800
castShadow: true
children: Array(1)
0: AxesHelper
castShadow: false
children: []
frustumCulled: true
geometry: BufferGeometry {uuid: "D2B77D74-2F72-4EC5-BBA3-B76A70E6C5D0", name: "", type: "BufferGeometry", index: null, attributes: {…}, …}
layers: Layers {mask: 1}
material: LineBasicMaterial {uuid: "253322F5-E482-4713-AF9B-D28DE8A06C35", name: "", type: "LineBasicMaterial", fog: true, lights: false, …}
matrix: Matrix4 {elements: Array(16)}
matrixAutoUpdate: true
matrixWorld: Matrix4 {elements: Array(16)}
matrixWorldNeedsUpdate: false
name: ""
parent: Mesh {uuid: "6A310982-D8A0-43B8-98F0-75C2B88BF8AE", name: "VSM890D050Z05S22SN12_11", type: "Mesh", parent: Group, children: Array(1), …}
position: Vector3 {x: 0, y: 0, z: 0}
quaternion: Quaternion {_x: 0, _y: 0, _z: 0, _w: 1, onChangeCallback: ƒ}
receiveShadow: false
renderOrder: 0
rotation: Euler {_x: 0, _y: 0, _z: 0, _order: "XYZ", onChangeCallback: ƒ}
scale: Vector3 {x: 1, y: 1, z: 1}
type: "LineSegments"
up: Vector3 {x: 0, y: 1, z: 0}
userData: {}
uuid: "3C46906A-BDBF-42D7-9608-52B7D9228271"
visible: true
eulerOrder: (...)
id: 30
modelViewMatrix: Matrix4 {elements: Array(16)}
normalMatrix: Matrix3 {elements: Array(9)}
useQuaternion: (...)
__proto__: LineSegments
length: 1
__proto__: Array(0)
drawMode: 0
frustumCulled: true
geometry: BufferGeometry {uuid: "ED7C9B64-2824-4364-AA97-3F92B00AC904", name: "", type: "BufferGeometry", index: null, attributes: {…}, …}
layers: Layers {mask: 1}
material: MeshStandardMaterial {uuid: "7BD69404-BFFF-4C54-A025-28F93AC84082", name: "", type: "MeshStandardMaterial", fog: true, lights: true, …}
matrix: Matrix4 {elements: Array(16)}
matrixAutoUpdate: true
matrixWorld: Matrix4 {elements: Array(16)}
matrixWorldNeedsUpdate: false
name: "VSM890D050Z05S22SN12_11"
parent: Group {uuid: "FBBF7E4B-7754-4138-BF1D-729398C2FB57", name: "VSM890D050Z05S22SN12_obj", type: "Group", parent: Scene, children: Array(12), …}
position: Vector3 {x: 0, y: 0, z: 0}
quaternion: Quaternion {_x: 0, _y: 0, _z: 0, _w: 1, onChangeCallback: ƒ}
receiveShadow: true
renderOrder: 0
rotation: Euler {_x: -0, _y: 0, _z: -0, _order: "XYZ", onChangeCallback: ƒ}
scale: Vector3 {x: 1, y: 1, z: 1}
type: "Mesh"
up: Vector3 {x: 0, y: 1, z: 0}
userData: {transformData: {…}}
uuid: "6A310982-D8A0-43B8-98F0-75C2B88BF8AE"
visible: true
eulerOrder: (...)
id: 18
modelViewMatrix: Matrix4 {elements: Array(16)}
normalMatrix: Matrix3 {elements: Array(9)}
useQuaternion: (...)
__proto__: Object3D
1: Mesh
ID: 140463525802496
castShadow: true
children: Array(1)
0: AxesHelper
castShadow: false
children: []
frustumCulled: true
geometry: BufferGeometry {uuid: "8D681768-AD23-49F4-BB4C-56ADB6A23695", name: "", type: "BufferGeometry", index: null, attributes: {…}, …}
layers: Layers {mask: 1}
material: LineBasicMaterial {uuid: "4DFCAAC0-F5A4-48B0-B417-FBEE4746E814", name: "", type: "LineBasicMaterial", fog: true, lights: false, …}
matrix: Matrix4 {elements: Array(16)}
matrixAutoUpdate: true
matrixWorld: Matrix4 {elements: Array(16)}
matrixWorldNeedsUpdate: false
name: ""
parent: Mesh {uuid: "D43C3C58-F4DE-4825-AA43-0BE94A5F536B", name: "VSM890D050Z05S22SN12_10", type: "Mesh", parent: Group, children: Array(1), …}
position: Vector3 {x: 0, y: 0, z: 0}
quaternion: Quaternion {_x: 0, _y: 0, _z: 0, _w: 1, onChangeCallback: ƒ}
receiveShadow: false
renderOrder: 0
rotation: Euler {_x: 0, _y: 0, _z: 0, _order: "XYZ", onChangeCallback: ƒ}
scale: Vector3 {x: 1, y: 1, z: 1}
type: "LineSegments"
up: Vector3 {x: 0, y: 1, z: 0}
userData: {}
uuid: "90F56573-8EEC-4A93-A372-DEC40C5CBC38"
visible: true
eulerOrder: (...)
id: 31
modelViewMatrix: Matrix4 {elements: Array(16)}
normalMatrix: Matrix3 {elements: Array(9)}
useQuaternion: (...)
__proto__: LineSegments
length: 1
__proto__: Array(0)
drawMode: 0
frustumCulled: true
geometry: BufferGeometry {uuid: "FCD47BEB-751B-4D17-9936-DE7C30A00D53", name: "", type: "BufferGeometry", index: null, attributes: {…}, …}
layers: Layers {mask: 1}
material: MeshStandardMaterial {uuid: "64AB972B-4390-4E54-985B-433D24C09D4F", name: "", type: "MeshStandardMaterial", fog: true, lights: true, …}
matrix: Matrix4 {elements: Array(16)}
matrixAutoUpdate: true
matrixWorld: Matrix4 {elements: Array(16)}
matrixWorldNeedsUpdate: false
name: "VSM890D050Z05S22SN12_10"
parent: Group {uuid: "FBBF7E4B-7754-4138-BF1D-729398C2FB57", name: "VSM890D050Z05S22SN12_obj", type: "Group", parent: Scene, children: Array(12), …}
position: Vector3 {x: 0, y: 0, z: 0}
quaternion: Quaternion {_x: 0, _y: 0, _z: 0, _w: 1, onChangeCallback: ƒ}
receiveShadow: true
renderOrder: 0
rotation: Euler {_x: -0, _y: 0, _z: -0, _order: "XYZ", onChangeCallback: ƒ}
scale: Vector3 {x: 1, y: 1, z: 1}
type: "Mesh"
up: Vector3 {x: 0, y: 1, z: 0}
userData: {transformData: {…}}
uuid: "D43C3C58-F4DE-4825-AA43-0BE94A5F536B"
visible: true
eulerOrder: (...)
id: 19
modelViewMatrix: Matrix4 {elements: Array(16)}
normalMatrix: Matrix3 {elements: Array(9)}
useQuaternion: (...)
__proto__: Object3D

此结果使我相信以下内容：

AxesHelper依赖于对象的位置。无论出于何种原因，正在加载的FBX对象都不依赖于所加载的每个子网格对象的独立位置。因此，在加载FBX时，所有子代都占据相同的0,0,0位置（即使它们在组中处于不同位置）。将AxesHelper应用于子网格时，它将占据相同的0,0,0位置。

我的问题是，Three.js是否有办法识别或重新计算所有子网格相对于组内坐标空间的位置？

还有另一种方法可以纠正此问题？是FBX加载程序的限制吗？

我正在使用THREE.WebGLRenderer97。

1 个答案:

答案 0 :(得分：0)

看起来对象的原点位于0, 0, 0，但几何形状在其他位置。您应该使用.computeBoundingBox()方法来查找几何位置，然后可以使用其.boundingBox属性访问这些坐标。

// First, you must compute the geometry's bounds
child.geometry.computeBoundingBox();

// Get boundingBox prperty
var bounds = child.geometry.boundingBox;

// Get center of boundingBox
var center = bounds.getCenter();

// Position axisHelper at center of geometry
var sphereAxis = new THREE.AxesHelper(200);
sphereAxis.position.copy(center);
child.add(sphereAxis);

您可以访问boundingBox的几个不同属性。还有更多详细信息in the documentation

相关问题
最新问题