CSS3DRenderer.js not packaged with three.js?

[sonwh98]

I am using three.js via clojurescript using https://github.com/cljsjs/packages/tree/master/three

cljsjs is a collection of javascript libraries packaged to be easily accessible via clojurescript. However CSS3DRenderer.js is in examples directory so it is not packaged as part of three.js. Why is this? Will this change in the near future?

[mrdoob]

CSS3DRenderer is not packaged because is not commonly used.

[sonwh98]

thanks. is there a reason why its not commonly used? are there performance problems?

[sonwh98]

For those who might be interested, to make a build that includes CSS3DRenderer.js, follow the build instructions and add an --include css3d like below

node build.js --include common --include css3d --include extras

[mrdoob]

thanks. is there a reason why its not commonly used? are there performance problems?

CSS3D is good for very few use cases.

[sonwh98]

One use case is making 3D content that is SEO friendly. Text content in webgl is not searchable as far as I know

[sonwh98]

When I created a build with --include css3d, the WebGLRenderer doesn't work anymore. I get an exception saying Three.BoxGeometry is not a function

CSS3DRenderer and WebGLRenderer cannot be used together?

[mrdoob]

That doesn't sound right. How are you building it?

[sonwh98]

node build.js --include common  --include extras --include css3d  --output ../../build/three.js
node build.js --include common  --include extras --include css3d  --minify --output ../../build/three.min.js

[sonwh98]

that build fails with the example at http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene The exception is

Uncaught TypeError: THREE.WebGLRenderer is not a function

However, if I remove --include css3d it works

[mrdoob]

You should, instead, add "examples/js/renderers/CSS3DRenderer.js" to common.json.

[sonwh98]

Thank you! that works. what is the purpose of --include css3d then? why is CSS3DRenderer.js in /examples instead of /src/renders? Even if CSS3DRenderer is not commonly used, its only 6k uncompressed.

Going forward what is the best way to create a build with CSS3DRender? I would hate to maintain a fork for something so trivial

[mrdoob]

Thank you! that works. what is the purpose of --include css3d then?

That's for doing a CSS3D only build. CSS3D doesn't support geometries so no point on including them. You want to use two renderers at once and the build system doesn't support such case.

Even if CSS3DRenderer is not commonly used, its only 6k uncompressed.

I want to keep three.min.js under 100kb compressed. Not everything can go in.

Going forward what is the best way to create a build with CSS3DRender? I would hate to maintain a fork for something so trivial

Not sure...

[sonwh98]

thanks again for the support!

[ad34]

node build.js --include common --include css3d --include extras

where is this build script ? I know the issue is old but I have the same issue with r92.

Uncaught TypeError: THREE.CSS3DRenderer is not a constructor

I tried to add the paramaters to the npm run build-uglify script but it s not working

[mrdoob]

@ad34 We no longer offer user support in this section. Please use the forum instead.

[ad34]

thanks for the info @mrdoob .anyway problem solved :)

[leeansilva]

@ad34 how did you solved?

[Mugen87]

When using the npm package, do this:

import { CSS3DRenderer } from 'three/addons/renderers/CSS3DRenderer.js';

Please read the following guide to understand how the import the module alternatively via a CDN:

https://threejs.org/docs/#manual/en/introduction/Installation