Problems properly rendering model in three.js

Question

I am using three.js to attempt to render a model full white with wireframe, but I am running into problems. When I attempt to render the model, it is solid black. If I attempt to assign a white material to the model, there is no effect. If I attempt to combine the geometry of the model and a material into a mesh, and then render that in a scene, I am presented with a f.makeGroups error from within the three.js minified file. The complete error is

TypeError: f.makeGroups is not a function

The code I am using to render this is as follows:

    var SCREEN_WIDTH = 800;
    var SCREEN_HEIGHT = 600;

    var blue = 0x03106D;
    var white = 0xFFFFFF;
    var black = 0x000000;
    var orange = 0xFF6600;

    // this function is executed on each animation frame
    function animate(){
        // render
        renderer.render(scene, camera);

        // request new frame
        requestAnimationFrame(function(){
        animate();
        });
    }

    // renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    renderer.setClearColor(0xFFFFFF, 1);
    document.body.appendChild(renderer.domElement);

    // camera
    var camera = new THREE.PerspectiveCamera(45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 1000);
    camera.position.z = 700;

    var facemat = new THREE.MeshBasicMaterial( { color: white, opacity: 1.0, shading: THREE.FlatShading } );
    var wiremat = new THREE.MeshBasicMaterial( { color: blue, opacity: 1.0, wireframe: true, wireframeLinewidth: 1.0 } );
    var Material = [facemat,wiremat];

    // scene
    var scene = new THREE.Scene();

    // cube
    var vrmlLoader = new THREE.VRMLLoader();

    vrmlLoader.addEventListener('load', function (event) {
        var object = event.content;
        var mesh = new THREE.Mesh(object, Material);
        scene.add(mesh);
    });

    vrmlLoader.load("ship.wrl");

    // start animation
    animate();

I have also confirmed my model is working using the three.js editor

mrdoob mrdoob · Accepted Answer · 2014-05-14T06:40:44

var mesh = new THREE.Mesh( object, [facemat,wiremat] )? You made that up? :) You can't pass an array as a material. I guess WebGLRenderer could give better error messages though...

Also, I've seen this pattern a coupe of times already (I wonder where it comes from?):

function animate(){
    renderer.render(scene, camera);
    requestAnimationFrame(function(){
    animate();
    });
}

It should be just this:

function animate(){
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

Problems properly rendering model in three.js

1 Answers