无法阅读属性'制服'使用多种材质渲染网格时的undef

时间:2014-11-21 04:31:14

标签: javascript three.js blender

我已将blender的3d模型导出到three.js文件中。它有2种材料应用于它的不同部分。它有很多顶点和uv coords,所以我不会在这里发布代码。我可以看到它确实有2种材料,所以我很确定我的错误是在我的three.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 );注释掉它并且它没有错误。

1 个答案:

答案 0 :(得分:0)

我不完全理解这是如何修复它的,但我发现这是一个不同的例子,它最终起作用了。标准是我之前定义的朗伯材料。

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 );
  } );

如果有人知道我的问题是什么,我仍然会感激解释。