Question

我已经在three.js中渲染了一个gltf对象，但是问题是我认为它不包含网格。我想使用射线投射器通过单击事件处理程序移动对象。我已经准备好了所有代码，但是单击时并没有注册。

加载对象的代码：

    var loader = new THREE.GLTFLoader();

loader.load(
    // resource URL
    './vitra_eames_plastic_chair/scene.gltf',
    // called when the resource is loaded
    function ( object ) {

        object.animations; // Array<THREE.AnimationClip>
        object.scene; // THREE.Scene
        object.scenes; // Array<THREE.Scene>
        object.cameras; // Array<THREE.Camera>
        object.asset; // Object

        var object = new THREE.Mesh(gltf.asset, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
        object.scene.position.x = -75;
        object.scene.position.y = -75;
        object.scene.position.z = -75;
        object.scene.rotation.x = 50;
        object.scene.rotation.y = 50;
        object.scene.rotation.z = 50;
        object.scene.scale.x = .5;
        object.scene.scale.y = .5;
        object.scene.scale.z = .5;
        object.scene.castShadow = true;
        object.scene.receiveShadow = true;
        boxScene.add(object.scene);
        objects.push(object.scene);
    },
    // called while loading is progressing
    function ( xhr ) {
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    // called when loading has errors
    function ( error ) {

        console.log( 'An error happened' );

    }
);

我也有这段代码，它会生成框。在这里，事件处理程序可以工作，但是显然对象的加载方式不同。任何建议将不胜感激。

    var geometry = new THREE.BoxGeometry(1, 1, 1);
for (var i = 0; i < 50; i++) {
    var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
    object.position.x = Math.random() * 50 - 25;
    object.position.y = Math.random() * 10 + 1;
    object.position.z = Math.random() * 50 - 25;
    object.rotation.x = Math.random() * 2 * Math.PI;
    object.rotation.y = Math.random() * 2 * Math.PI;
    object.rotation.z = Math.random() * 2 * Math.PI;
    object.scale.x = Math.random() * 3 + 1;
    object.scale.y = Math.random() * 3 + 1;
    object.scale.z = Math.random() * 3 + 1;
    object.castShadow = true;
    object.receiveShadow = true;
    boxScene.add(object);
    objects.push(object);
}

Answer 1

我认为您必须更改onLoad()的{{1}}回调以解决此问题。您使用GLTFLoader.load()创建的网格不正确。相反，您可以将object.asset直接添加到场景图中。因此，在大多数情况下，回调可以像这样：

object.scene

查看以下示例的源代码，以了解这种方法的实际作用。

https://threejs.org/examples/webgl_loader_gltf.html

three.js从gltf异议创建网格

1 个答案: