Search code examples
javascriptthree.jsweb-worker

buffer geometry mesh not loading when using web worker


I could transfer my geometry into buffer geometry and found mesh good with both geometry and material but model is not showing up in window.

Here is my code:

var myWorker = new Worker("js/respond.js");
myWorker.postMessage("horse.js");

myWorker.onmessage = function(e) {
    geometry = new THREE.BufferGeometry();
    var colorattribute = new THREE.BufferAttribute(e.data.color, 3, false);
    var uv = new THREE.BufferAttribute(e.data.uv, 3, false);//created buffer attribute with worker data
    var normal = new THREE.BufferAttribute(e.data.normal, 3, false);
    var position = new THREE.BufferAttribute(e.data.position, 3, false);
    var morph = new THREE.BufferAttribute(e.data.morphAttributes, 3, false);
    geometry.addAttribute('color', colorattribute);
    geometry.addAttribute('uv', uv);
    geometry.addAttribute('normal', normal);
    geometry.addAttribute('position', position);
    geometry.addGroup(e.data.groups[0].start, e.data.groups[0].count, e.data.groups[0].materialIndex);
    geometry.morphAttributes.position = [];
    geometry.morphAttributes.position.push(morph);
    //console.log(e.data.morphAttributes);

    // mixer = new THREE.AnimationMixer(mesh);
    // clip = THREE.AnimationClip.CreateFromMorphTargetSequence('static', geometry.morphAttributes, 30);
    console.log(geometry);
    mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color:  0xffffff, morphTargets: true}));
    console.log(mesh);
    scene.add(mesh);

Solution

  • It's not possible to use libraries like THREE.js in your web worker.

    What you can do is construct your geometry in a worker, and then feed that into THREE.js later. From the web worker, you can return an object containing TypedArrays of UInt32Arrays and Float32Arrays as needed to fill in all of the attributes.

    This will result in a performance boost because the data is already structured in the format THREE.BufferGeometry wants.