Unable to use a different ts config in my 2nd view, that i've in my first one

Questions
1

Hi everybody, i’m Frank and i’m new in both this forum and also in Three.js.
I’m currently using Three.js with Typescript, and i’ve 2 views in my proyect: one with one 3D object (a cube) and the other one with a different 3D object (a sphere). What i’m trying to do is, by double clicking in the cube, redirect the app to the other view that has the sphere, and if this possible viceversa. But i only could configure the first ts file related to the first HTML file, the 2nd one isn’t working as I configured both using module.export inside a ‘webpack.common.js’ file; and in this way it only recognizes me the 1st ts file
Do you have any idea how I can configure the typescript files to render their respective 3D objects in their respective HTML files?

I don’t know if i was clear

Thanks a lot.

2

You use one tsconfig.json per typescript project,
so what I think you are really asking is to have multiple entry points, and outputs

E.g.,
example1.ts
example2.ts

and when you npm run dev
it outputs separate bundles for each .ts

End then you’d have separate HTMLs that will load their own bundles.

example1.html → loads example1.bundle.js
example2.html → loads example2.bundle.js

For this, I’d use html-webpack-plugin

npm install --save-dev html-webpack-plugin

See this project StatsVR for an example where I used it to create multiple webpages showing different ways to use my library.

And see my config at webpack.common.js

also, if you want to only change which object is visible in the scene, it may be easier to just load both objects, and toggle their visibility.
https://threejs.org/docs/#api/en/core/Object3D.visible

or use layers
Example : https://threejs.org/examples/?q=layers#webgl_layers

1 Like
3

Thank you very much!
I know now how to move on!