react-3d-viewer icon indicating copy to clipboard operation
react-3d-viewer copied to clipboard

White background?

Open ahmedghazi opened this issue 5 years ago • 8 comments

There is white background on your example. Why?

ahmedghazi avatar Apr 18 '19 14:04 ahmedghazi

how to change the background?

frontendjorge avatar Dec 31 '19 19:12 frontendjorge

how to change the background?

yes how to ?

spider58 avatar Oct 27 '20 10:10 spider58

You can pass a property "background" to model. For example <OBJModel {...props} background="rgba(0,0,0)" />

rgba doesn't work cause three needs another param to set alpha: true

ahmedghazi avatar Sep 08 '22 15:09 ahmedghazi

Add support pls for transparent background

dannicsitnikov avatar Sep 12 '22 15:09 dannicsitnikov

Gotta bundle the scripts outside of node modules and into my project in order to pass a param to set alpha true. Would love to have these props: background="rgba(0,0,0,0)" alpha={true} And In model.js Line 242 : this.renderer.setClearColor(new THREE.Color(background, alpha));

ahmedghazi avatar Oct 13 '22 13:10 ahmedghazi

the alpha must be set en the WebGLRenderer instance in conjunction with the setClearColor() function:

So it should look like this const { width, height, antialias, background, alpha } = this.props; this.renderer = new THREE.WebGLRenderer({ antialias, alpha: alpha }); this.renderer.setClearColor(background, 0);

ahmedghazi avatar Oct 13 '22 14:10 ahmedghazi

the alpha must be set en the WebGLRenderer instance in conjunction with the setClearColor() function:

So it should look like this const { width, height, antialias, background, alpha } = this.props; this.renderer = new THREE.WebGLRenderer({ antialias, alpha: alpha }); this.renderer.setClearColor(background, 0);

Hey, I'm racking my brains trying to get this to work I'm bundling the code outside of the node modules, looks like:

var { width, height, antialias, background, alpha } = this.props;
this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(45,width/height,.1,8888);
    this.renderer = new THREE.WebGLRenderer({antialias, alpha: alpha});

	  this.renderer.setClearColor(background, 0);
    this.renderer.setSize(width,height);

I haven't added any new code, just modified the existing- any advice would be rad.

AHTARazzak avatar Aug 22 '23 23:08 AHTARazzak