首页 > 解决方案 > 为什么我的飞机会夹住我的 OBJ?

问题描述

我目前正在使用three.js 进行一个项目并做出反应。

我必须加载一个 OBJ 并显示它。一切都很好,直到我尝试在场景中添加更多元素以使其更漂亮。

一旦我添加了另一个网格,比如平面或盒子(在本例中是一个盒子),我的 OBJ 就被剪掉了,我们只看到裤子的纽扣。有人可以向我解释为什么会这样吗?我找不到任何理由让飞机或盒子切割我的 obj。

裤子 webgl

在此处输入图像描述

这是我用来加载对象的两个函数。我知道我没有在应该使用 setState 的时候使用它,它现在只是用于踢原型。

createPlane = (scene) => {
        var planeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
        const planeMaterial = new THREE.MeshBasicMaterial({color: '#E8E8E8', side: THREE.DoubleSide})
        this.setState({plane:new THREE.Mesh(planeGeometry, planeMaterial)}, () => {
            this.state.plane.frustumCulled = false;
            this.state.plane.scale.set(1, 1, 1);
            scene.add(this.state.plane)
        })
    }


 loadObj = (scene) => {
        //const loader = new OBJLoader()
        const mtlloader = new MTLLoader()
        const textureLoader = new THREE.TextureLoader()
        textureLoader.load('models/jeans2_tex.png', (tex) => {
            tex.wrapS = THREE.RepeatWrapping;
            tex.wrapT = THREE.RepeatWrapping;
            //tex.repeat.set( 4, 4 );
            new OBJLoader().load('models/Jeans2_blue.OBJ', (object) => {
                    console.log('TEXTURE', tex)
                    console.log('OBJECT', object)
                    //let new_mat = new THREE.MeshBasicMaterial( {map: tex, side: THREE.DoubleSide} )
                    let new_mat = new THREE.MeshStandardMaterial({map: tex, metalness: 0.1, roughness: 0.9})
                    object.position.y = -2.0
                    object.frustumCulled = false
                    object.children.map((child) => {
                        console.log('CHILD')
                        child.material = new_mat
                    })
                    this.setState({object: object}, () => {scene.add(this.state.object)})

                }, (xhr) => {
                    console.log((xhr.loaded / xhr.total * 100) + '% loaded')
                },
                (error) => {
                    console.log('AN error happened')
                }
            )
        })

标签: javascriptreactjsthree.js

解决方案


推荐阅读