Добавление Three.js AxesHelper всем детям группы. Axes Helper по умолчанию имеет значение 0,0,0 foreachhelper - PullRequest
Новая
       51

Добавление Three.js AxesHelper всем детям группы. Axes Helper по умолчанию имеет значение 0,0,0 foreachhelper

0 голосов
/ 05 ноября 2018

Я надеюсь, что кто-то сможет прояснить, что здесь происходит за кулисами.

У меня есть объект, который я загружаю с помощью следующего метода: 

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 к каждому дочернему элементу, являющемуся объектом сетки, каждый ось координат будет в одной и той же позиции 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

Ниже приведены расширенные представления первых 2 дочерних сеток в группе выше. Вы можете видеть, что положение вспомогательных осей идентично, даже если в загруженной модели элементы находятся в другом положении. 

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.WebGLRenderer 97.

1 Ответ

0 голосов
/ 05 ноября 2018

Похоже, что происхождение ваших объектов расположено на 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. Там больше деталей в документации

...