Code Monkey home page Code Monkey logo

Comments (8)

frontendjorge avatar frontendjorge commented on August 31, 2024

how to change the background?

from react-3d-viewer.

spider58 avatar spider58 commented on August 31, 2024

how to change the background?

yes how to ?

from react-3d-viewer.

c-plus-plus-equals-c-plus-one avatar c-plus-plus-equals-c-plus-one commented on August 31, 2024

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

from react-3d-viewer.

ahmedghazi avatar ahmedghazi commented on August 31, 2024

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

from react-3d-viewer.

dannicsitnikov avatar dannicsitnikov commented on August 31, 2024

Add support pls for transparent background

from react-3d-viewer.

ahmedghazi avatar ahmedghazi commented on August 31, 2024

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));

from react-3d-viewer.

ahmedghazi avatar ahmedghazi commented on August 31, 2024

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);

from react-3d-viewer.

AHTARazzak avatar AHTARazzak commented on August 31, 2024

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.

from react-3d-viewer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.