TextureActive in Mesh

Questions
1

I have two textureActive
one:

            const textureA01= new TextureActive({color:blue, width:100, height:100, corner:0}).addTo();
            var p01 = new Container().addTo( textureA01);
            makePattern("stripes",series(light, white),10,10,100)
                .reg('center','center').addTo(p01).cache();
            new Scroller({
                backing:p01, direction:1, speed:1, horizontal:true
            });

two:

            const textureA02= new TextureActive({color:blue, width:100, height:100, corner:0}).addTo();
            var p02 = new Container().addTo( textureA02);
            makePattern("stripes",series(green, yellow),10,10,100)
                .reg('center','center').addTo(p02).cache();
            new Scroller({
                backing:p02, direction:1, speed:1, horizontal:true
            });

and a Mesh:

const geometry = new THREE.SphereGeometry(5,20, 20);
const material=new THREE.MeshPhongMaterial();
var mesh=new THREE.Mesh(geometry,material)

when app the first textureActive in mesh,the textureActive run .no problem
but app the second textureActive in mesh, the textureActive no run,why?

2

The TextureActive objects get passed to a TextureActives object in an array.

3 
// Given F, S, W, H or frame, stage, stageW, stageH
// The Editor has the template built in see https://zimjs.com/code for the template 
// so we set a directive (only for the Editor) to adjust the frame size
F.zapp_width = 1000;
F.zapp_height = 400;
function make3DScene(wW=window.innerWidth,wH= window.innerHeight){
    const three = new Three({
        width:wW, 
        height:wH, 
        cameraPosition:new THREE.Vector3(0, -.1, 500),
        textureActive:true,
    });
    const scene = three.scene;
    const camera = three.camera;
    const renderer = three.renderer;
    renderer.shadowMap.enabled = true;
    const holder = scene.holder = new THREE.Group();
    scene.add(holder); 
    // ORBIT CONTROLS - traditonal three.js
    const controls = new OrbitControls(camera, three.canvas);
    controls.maxPolarAngle = 95*RAD;
    controls.maxDistance = 150;
    controls.enableDamping = true;
    controls.dampingFactor = 0.1;
    three.preRender = ()=>{controls.update();}
    // scene is returned to main code - this gives access to textureActives on scene
    const textureActives = new TextureActives([], THREE, three, renderer, scene, camera, controls, 1);
    textureActives.manager.nav.mov(25,-250);
    // LIGHTS - standard three.js   	
    const light1= new THREE.PointLight(white, 0, 11);
    light1.position.set(0, 5, 3.3);
    light1.decay = 0; // needed for point lights these days...
    light1.castShadow = true; 
    holder.add(light1);
    const light2= new THREE.AmbientLight(white, 0);
    holder.add(light2);
    // animate scene in
    animate(light2, {intensity:2}, 2);
    animate(light1, {intensity:1.6}, 2);
    var data={three,scene,camera,renderer,controls,pointLight:light1,ambientLight:light2,holder,textureActives,}
    return data            
}
function addMaterial_f01(appD,mesh,mName){
    if(appD[`${mName}`]){
        mesh.material=appD[`${mName}`]
        return;
    }
    const textureA =new TextureActive({color:light, width:200, height:200, corner:0}).addTo();
    var p=new Container().center(textureA)
    var ball=new Circle(10,red).center(p)
    .animate({props:{scale:10},time:2,loop:true})
    appD.textureActives.add(textureA) 
    const texture = new THREE.CanvasTexture(textureA.canvas); // front with demo 
    const material=appD[`${mName}`] =new THREE.MeshPhongMaterial({map:texture, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true});
    mesh.material=material
    appD.textureActives.addMesh(mesh)
}
function addMaterial_f02(appD,mesh,mName){
    if(appD[`${mName}`]){
        mesh.material=appD[`${mName}`]
        return;
    }
    const textureA =new TextureActive({color:light, width:200, height:200}).addTo();
    var p=new Container().center(textureA)
    var ball=new Circle(10,blue).center(p)
    .animate({props:{scale:10},time:2,loop:true})
    appD.textureActives.add(textureA) 
    const texture = new THREE.CanvasTexture(textureA.canvas); // front with demo 
    const material=appD[`${mName}`] =new THREE.MeshPhongMaterial({map:texture, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true});
    mesh.material=material
    appD.textureActives.addMesh(mesh)
}

    const appD=make3DScene()
    const rootMesh=new THREE.Mesh(new THREE.BoxGeometry(50,50,50),new THREE.MeshBasicMaterial() )
    appD.holder.add(rootMesh);
    interval(3,function(evt){
        switch(evt.count%2){
                case 0:
                    zogr('materialA')
                    addMaterial_f01(appD,rootMesh,'materialA')
                    break;
                case 1:
                    zogg('materialB')
                    addMaterial_f02(appD,rootMesh,'materialB')
                   break;     
            }
    })

here is my test code

4

I see. It is late here... and hard to think why - will try and look tomorrow. But perhaps try and remove() the existing textureActive with remove() method of TextureActives. And then add the next one.

5

I tried removing the last textureAcrtive from textureActives and it does not exactly help, but perhaps helps in debugging. When I do, the blue circle animates the first time only and then the next times does not animate. When I do not remove, the blue circle animates each time. So it seems like the updating on subsequent textureactive objects is being lost. Will check into it now.

6

Okay - the addMesh() is what is activating the TextureActive and we did not plan for a removeMesh() or to let a different TextureActive be applied to the same mesh. We will implement this probably in the next couple days. Until then, use a different mesh or perhaps, better, would be to switch the content in ZIM. For instance, show a different page if you want it to change. That is how we look at it. The TextureActive gives you that location to put whatever ZIM you want. If you want it to change, then change the ZIM content of the TextureActive.

7

ok,thanks

1 Like