How to add TSL in an existing Three.js project,not report WARNING: Multiple instances of Three.js being imported

Questions
1

in vue3 add tsl in an existing three.js project ,report WARNING: Multiple instances of Three.js being imported. ,
let webGPURenderer run tsl method faill
so, what should i do ?

2

I donā€™t know VUE, but this is generally the pattern in recent vesions of Three.js if using a bundler.

Three r174

- import * as THREE from 'three'
+ import * as THREE from 'three/webgpu'
+ import { positionLocal, Fn, time, vec3 } from 'three/tsl'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
1 Like
3

Thank you so muchļ¼I always have this problemļ¼Œin vue project use three.js tsl will report error. when use mx_noise_float() ,but ,in html project have no report

eg code:https://codepen.io/nik-lever/pen/emOrGYd this code in html have no report but in vue will report up error

async createNoiseTexture(width=512,height=512){
    const storageTexture = new THREEGPU.StorageTexture(width,height);
    const computeTexture = Fn(({texture})=>{
        const posX = instanceIndex.modInt(width);// 1/ 512,2/512,512*512/512
        const posY= instanceIndex.div(height);// 1/512,2/512,3/512,512*512/512
        const indexUV =  uvec2(posX,posY);

        const scale = vec3(20);
        const pt = vec3(posX,posY,0).div(width).mul(scale);
        
        const val = mx_noise_float(pt);
        const tempVal = float().mul(float(1)).toVar();
        tempVal.add(val);//.add(float(0.6));
       
        textureStore(texture,indexUV,vec4(tempVal,tempVal,tempVal,1.)).toWriteOnly();

    });

    await this.renderer.computeAsync(computeTexture({texture:storageTexture}).compute(width * height));
    return storageTexture;
}
4

textureStore(texture,indexUV,vec4(tempVal,tempVal,tempVal,1.)).toWriteOnly(); this is my modify after, old code is textureStore(texture,indexUV,vec4(val,val,val,val)).toWriteOnly();