Hi,
The question is not directly related to threejs but, I was told that three-bvh-csg will enable me to do what I want with my project, find and create the geometry of the intersection of 3D
objects displayed in my 3D three.js scene.
I look through some examples that the three-bvh-csg provides and I find one that I’m
going to take as an example.
Unfortunately, I have some difficulties to add this dependency in my project.
Does anyone have a pointer, or could tell me how to configure my project
so that I can call three-bvh-csg class and method?
I’m not very familiar with javascript dependencies, feel free to
explain to me like I’m five.
For example, here how I call the threejs dependencies in my project:
That is a problem. And you’re making the javascript developer experience very hard on yourself because of this.
Please use a build-workflow in which your code needs to compile. There are plenty of tools available that do this automatically for you - for example when you save a file in your editor - and even have your browser reload automatically, or reload the exact changed component (HMR).
The first thing you need it to understand how dependencies work (package.json).
Don’t let anyone tell you to dive into vite or other build tools straight away. It is very valueable to at least have a basic understanding what the underlying technique does in order to troubleshoot your own obstacles that may arise.
Thanks for your reply.
Unfortunately, I can’t use npm.
The project I’m working on is an old legacy php project.
I’ve just added some 3D canevas to some pages that the php serves.
It works well so far.
In one of theses pages, I’d like to compute the intersection of two object. No more no less, I don’t want to add other features.
If you have the ability to include javascript files via script tags or some kind of asset system in your PHP framework like Symfony, Laravel or Yii, you can use npm.
You could create a separate src-directory that contains your javascript/typescript files and node_modules (created by npm). Then use a bundler like vite or webpack to generate a bundle, which can be a single javascript file.
That javascript file can then be included using a script tag and you can use your own code inside your php templates as you would do right now.
So it all boils down to the fact that a bundler produces a javascript file, similarly as how you would include THREE on in your project as you probably are doing right now.
No, it’s plain PHP, the previous developer build his own MVC framework.
Good, currently my the project has this architecture:
php_controller\
php_model\
php_views\
This folder contains mypage.php where myApp.js is called with:
<script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.140.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.140.0/examples/jsm/"
}
}
</script>
<script type="module" language="JavaScript" src="../src_js/myApp.js"></script>
src_js\
myApp.js
myClass1.js that my app use and need to import three-bvh-csg:
vendor\composer where phpcomposer puts the php dependency.
Given this architecture, where should I run npm init in the root folder or in the javascript folder?
Here is a github repo with content you can drop anywhere you want (you don’t really need the files, just copy the code you need).
bvh-csg require the classic bvh to work. Then you need to edit GLTFloader script to get BufferGeometryUtils.js path fixed. A demo link is included in the repo, index.html contain the additional code you need. (line 55-60)
Take note it’s a custom way of doing things to dodge npm easily. Not a recommended production way
If you want you can combine these infos with @winnip_fr answer and properly achieve this using npm.
All dependencies are hosted locally within the same Codesandox.
There is an import map to help your browser understand what three means when it encounters it in the import instructions of all the dependencies that the shapecast.js references.
Thanks for your solution.
I’m aware that is not the proper way of doing it but the code you provide helps me a lot to do what I’d like to do…
I’d like to use npm and vite but frankly I’m lost with theses tools…
Every PHP project has a DOCUMENT_ROOT. It’s where your index.php file lives.
PHP isn’t a webserver, and usually sits behind Apache or Ngnix. If these are configured normally, you can just serve javascript files from this document_root.
A little sidenote (unrelated to the javascript stuff): If all PHP files of the MVC framework are inside this document root, then you should definitely consider rebuilding it or at least refactor it so that isn’t needed anymore, since that MAY impose a pretty severe security risk.
my bad, I wanted to say that the former developper didn’t use any PHP framework, he developped his own MVC framework… I agree with you concening the security but my customer want me to add some 3D fancy stuff first.
In my case is Apache. So from where can I serve javascript file?
Have you any website, book or whaterver that I can read in order to build a proper achitecture of this legacy project?
