使用多种材质渲染网格时无法读取 undef 的属性“均匀”

Cannot read property 'uniform' of undef when rendering mesh with multiple materials

本文关键字:undef 读取 属性 均匀 网格      更新时间:2023-09-26

我已经将一个3D模型从Blender导出到一个三.js的文件。它有 2 种材料应用于它的不同部分。它有很多顶点和 uv 坐标,所以我不会在这里发布代码。我可以看到它确实有 2 种材料,所以我很确定我的错误出在我的三.js代码中。不过,它确实有 0 个骨骼、变形目标和颜色。我不知道这些对我的应用程序是否重要,所以我的错误可能在那里。

这是我到目前为止所拥有的:

var camera, scene1, scene2, raycaster, renderer, staticMesh , loader;
var highlighted, standard;
var mouse = new THREE.Vector2(), INTERSECTED;
init();
animate();
function init() {
    standard = new THREE.MeshLambertMaterial( { color: 0x9999ff } );
    highlighted = new THREE.MeshLambertMaterial( { color: 0xff0000 } )
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 15;
    scene1 = new THREE.Scene();
    scene2 = new THREE.Scene();
    loader = new THREE.JSONLoader();
    loader.load( "abs.json", function( geometry ) {
        var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0x9999ff } ) );
        //mesh.scale.set( 10, 10, 10 );
        mesh.position.y = -6;
        mesh.position.x = 0;
        scene2.add( mesh );
    } );
    loader.load( "bodyTest.json", function(geometry, material) {
            material[0] = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0x9999ff } ) );
            material[1] = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0x9999ff } ) );
            var materials = new THREE.MeshFaceMaterial(material);
            staticMesh = new THREE.Mesh( geometry, materials );
            scene1.add( staticMesh );
  } );

    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(-1, -1, -1).normalize();
    scene1.add(directionalLight);
    directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene1.add(directionalLight);
    directionalLight = new THREE.DirectionalLight(0xffffff, .5);
    directionalLight.position.set(1, 0, 0).normalize();
    scene1.add(directionalLight);
    directionalLight = new THREE.DirectionalLight(0xffffff, .5);
    directionalLight.position.set(-1, 0, 0).normalize();
    scene1.add(directionalLight);
    raycaster = new THREE.Raycaster();

    renderer = new THREE.WebGLRenderer({ antialiasing: true});
    renderer.setClearColor( 0xffffff );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.sortObjects = false;

    document.body.appendChild( renderer.domElement );
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function animate() {
    requestAnimationFrame( animate );
    scene1.rotation.y += 0.007;
    scene2.rotation.y += 0.007;
/*    
    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 ).unproject( camera );
    raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
    var intersects = raycaster.intersectObjects( scene2.children );
    if ( intersects.length > 0 ) {
        if ( INTERSECTED != intersects[ 0 ].object ) {
            if(staticMesh) staticMesh.material.materials[1] = staticMesh.currentMat;
            INTERSECTED = intersects[ 0 ].object;
            staticMesh.currentMat = staticMesh.material.materials[1]
            staticMesh.material.materials[1] = highlighted;
        }
    } else {
        if(staticMesh) staticMesh.material.materials[1] = staticMesh.currentMat;
            INTERSECTED = null;
    }
*/
    renderer.render( scene2, camera );
    renderer.render( scene1, camera );
}

如您所见,我已经注释掉了我认为错误可能来自的部分。我也尝试在注释掉renderer.render( scene1, camera );的情况下运行它,它没有错误。

我不完全明白这是如何解决它的,但我在不同的示例中发现了这个问题,它最终起作用了。 标准是我之前定义的朗伯材料。

loader.load( "bodyTest.json", function(geometry) {
            var material = [];
            material.push( standard );
            material.push( standard );
            var materials = new THREE.MeshFaceMaterial(material);
            staticMesh = new THREE.Mesh( geometry, materials );
            scene1.add( staticMesh );
  } );

如果有人知道我的问题是什么,我仍然希望得到解释。