Public Ticket #1486860


  • Francisco Javier Reyes started the conversation

    Hi there:

    I'm using DARK SPHEREtemplate and I was able to change some parameters in the 3d js folder and I'm happy because I got a kind of stars. But I would like to know if it´s possible to customize background color or even add an image (jpg, png, etc) as a background. Actually I think I see a vignette around the scene. So, is it possible change this? 

    In addition I see a request in a public ticket with a "using another 3d object in the template" You converted an .obj  to a .js file and I downloaded it but when I import it into de dark theme I think is an issue with the lights because I only see a silhouette of the earth. 

    I followed a Blender tutorial in order to get an .js file but it only saves a .json file. Is the same thing?

    Thanks for your attention.

  •  11
    Nick replied

    Hi Francisco,

    For the background: you are correct that there is a vignette there, it's set up through CSS - all we did is add a background gradient to the hero section:

    .hero.dark {
        background-image: radial-gradient(50% 100%, #080808 50%, #14161B 100%);

    You can set this up to your liking either with a color or a background image via CSS.

    For the object: can you send us a link so we can see what you've achieved so far with it and help you get it to work (keep in mind that you'd need to use one of the object templates for this to work, so you can't use the dark sphere one here)



  • Francisco Javier Reyes replied

    Hi again:

    Thanks for your kind response.


    Actually I found the background gradient and I achieved a nice change. But the question is if it's possible to use an image instead of the gradient. 


    About the object, actually I´m using the "object-loader", changed the .js file name and adding the .json file to the Template/3d folder. (Not to the template/Js/3d where the dark sphere is contained)

    But I think is a problem with the extension because using the Github exporter for Blender it only does it in .json and not in .js. So, the 3d is not showed. Could you recommend a program to make a conversion or something? Or you think there's nothing to do with the .json extension? 

    Thanks a lot!

  •  11
    Nick replied


    You can use the css background-image property to place an image in place of the gradient there: https://www.w3schools.com/cssref/pr_background-image.asp

    As for the object: can you send us over the .json file so we can try it out. It seems the threejs default converter that came bundled in threejs isn't supported by the developers of threejs any more :/