Transparent code does not working on Three.js
I searched and tried some answers about it but it doesn't work.
i tried like this:
var renderer = new THREE.WebGLRenderer( alpha: true );
and
root.renderer.setClearColor(0xffffff,0);
as i said it does not work i just saw black screen :/
here is my "init" function :
function init()
var root = new THREERoot(
createCameraControls:false,
antialias: true,
fov:60
);
root.renderer.setClearColor(0xffffff);
root.renderer.setPixelRatio(window.devicePixelRatio
this is what i am using :
https://codepen.io/zadvorsky/pen/xVrMMO
javascript three.js
add a comment |
I searched and tried some answers about it but it doesn't work.
i tried like this:
var renderer = new THREE.WebGLRenderer( alpha: true );
and
root.renderer.setClearColor(0xffffff,0);
as i said it does not work i just saw black screen :/
here is my "init" function :
function init()
var root = new THREERoot(
createCameraControls:false,
antialias: true,
fov:60
);
root.renderer.setClearColor(0xffffff);
root.renderer.setPixelRatio(window.devicePixelRatio
this is what i am using :
https://codepen.io/zadvorsky/pen/xVrMMO
javascript three.js
There are literally hundreds of possible reasons for this. Can you post your code in a concise and minimal example so the behavior can be replicated? stackoverflow.com/help/mcve
– Marquizzo
Nov 15 '18 at 19:21
I wrote there the main function of my code.I think the problem can be solved from there.
– Reira
Nov 15 '18 at 22:25
add a comment |
I searched and tried some answers about it but it doesn't work.
i tried like this:
var renderer = new THREE.WebGLRenderer( alpha: true );
and
root.renderer.setClearColor(0xffffff,0);
as i said it does not work i just saw black screen :/
here is my "init" function :
function init()
var root = new THREERoot(
createCameraControls:false,
antialias: true,
fov:60
);
root.renderer.setClearColor(0xffffff);
root.renderer.setPixelRatio(window.devicePixelRatio
this is what i am using :
https://codepen.io/zadvorsky/pen/xVrMMO
javascript three.js
I searched and tried some answers about it but it doesn't work.
i tried like this:
var renderer = new THREE.WebGLRenderer( alpha: true );
and
root.renderer.setClearColor(0xffffff,0);
as i said it does not work i just saw black screen :/
here is my "init" function :
function init()
var root = new THREERoot(
createCameraControls:false,
antialias: true,
fov:60
);
root.renderer.setClearColor(0xffffff);
root.renderer.setPixelRatio(window.devicePixelRatio
this is what i am using :
https://codepen.io/zadvorsky/pen/xVrMMO
function init()
var root = new THREERoot(
createCameraControls:false,
antialias: true,
fov:60
);
root.renderer.setClearColor(0xffffff);
root.renderer.setPixelRatio(window.devicePixelRatio
function init()
var root = new THREERoot(
createCameraControls:false,
antialias: true,
fov:60
);
root.renderer.setClearColor(0xffffff);
root.renderer.setPixelRatio(window.devicePixelRatio
javascript three.js
javascript three.js
edited Nov 15 '18 at 22:21
Reira
asked Nov 15 '18 at 18:52
ReiraReira
114
114
There are literally hundreds of possible reasons for this. Can you post your code in a concise and minimal example so the behavior can be replicated? stackoverflow.com/help/mcve
– Marquizzo
Nov 15 '18 at 19:21
I wrote there the main function of my code.I think the problem can be solved from there.
– Reira
Nov 15 '18 at 22:25
add a comment |
There are literally hundreds of possible reasons for this. Can you post your code in a concise and minimal example so the behavior can be replicated? stackoverflow.com/help/mcve
– Marquizzo
Nov 15 '18 at 19:21
I wrote there the main function of my code.I think the problem can be solved from there.
– Reira
Nov 15 '18 at 22:25
There are literally hundreds of possible reasons for this. Can you post your code in a concise and minimal example so the behavior can be replicated? stackoverflow.com/help/mcve
– Marquizzo
Nov 15 '18 at 19:21
There are literally hundreds of possible reasons for this. Can you post your code in a concise and minimal example so the behavior can be replicated? stackoverflow.com/help/mcve
– Marquizzo
Nov 15 '18 at 19:21
I wrote there the main function of my code.I think the problem can be solved from there.
– Reira
Nov 15 '18 at 22:25
I wrote there the main function of my code.I think the problem can be solved from there.
– Reira
Nov 15 '18 at 22:25
add a comment |
1 Answer
1
active
oldest
votes
In order for your Three.js project to be transparent, you need to set its renderer's alpha parameter to true:
this.renderer = new THREE.WebGLRenderer(alpha: true);
This way, the parts that don't render anything will show the background of your HTML page, so if your HTML background is #ff0000
, then you should see red.
However, you're essentially disabling the transparency when you perform
root.renderer.setClearColor(0xffffff);
This line paints a white background on every frame, which means it's no longer transparent.
Also, I can't see your renderer.render(scene, camera);
line, because your code example is so narrow in scope.
First thanks for helping, so i tried to remove this part : " root.renderer.setClearColor(0xffffff); " of my code but then the script broken i mean the screen was just black. there is a code like this : this.renderer = new THREE.WebGLRenderer( antialias:params.antialias ); i wrote there 'alpha' code before but it does not working as well. what should i do now ? :/
– Reira
Nov 15 '18 at 23:04
1. What's your HTML background color? 2. What's your camera pointing at? 3. Does your scene have no lights and is just rendering a dark room? 4. What's insideparams.antialias
? 5. Are you callingrenderer.render()
? There are too many variables to pinpoint the problem. You're not giving me much to work with with your limited code. I recommend you head to jsfiddle.net , build your example, and then post it here so we can help you.
– Marquizzo
Nov 15 '18 at 23:17
Hello again, im really sorry beacuse i am a beginner really i am. jsfiddle.net/ms7u5cnw/1 i tried to put the codes here but it does not work at all i dont know why :/ also you can see the what im trying to use : codepen.io/zadvorsky/pen/xVrMMO
– Reira
Nov 16 '18 at 0:07
Are you sure that the reason you're not seeing anything isn't because it's black letters on a black background? See here: codepen.io/marquizzo/pen/MzopEV I added 'background: #f90' to the CSS, removed.setClearColor()
on line 9 and addedalpha: true
to the renderer on line 227. With those 3 lines, the canvas is now transparent, letting you see the orange from the CSS background.
– Marquizzo
Nov 16 '18 at 2:00
Thank you so much, the reason was i wrote alpha:true code in a wrong way thats why. Now its working :)
– Reira
Nov 16 '18 at 12:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326152%2ftransparent-code-does-not-working-on-three-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
In order for your Three.js project to be transparent, you need to set its renderer's alpha parameter to true:
this.renderer = new THREE.WebGLRenderer(alpha: true);
This way, the parts that don't render anything will show the background of your HTML page, so if your HTML background is #ff0000
, then you should see red.
However, you're essentially disabling the transparency when you perform
root.renderer.setClearColor(0xffffff);
This line paints a white background on every frame, which means it's no longer transparent.
Also, I can't see your renderer.render(scene, camera);
line, because your code example is so narrow in scope.
First thanks for helping, so i tried to remove this part : " root.renderer.setClearColor(0xffffff); " of my code but then the script broken i mean the screen was just black. there is a code like this : this.renderer = new THREE.WebGLRenderer( antialias:params.antialias ); i wrote there 'alpha' code before but it does not working as well. what should i do now ? :/
– Reira
Nov 15 '18 at 23:04
1. What's your HTML background color? 2. What's your camera pointing at? 3. Does your scene have no lights and is just rendering a dark room? 4. What's insideparams.antialias
? 5. Are you callingrenderer.render()
? There are too many variables to pinpoint the problem. You're not giving me much to work with with your limited code. I recommend you head to jsfiddle.net , build your example, and then post it here so we can help you.
– Marquizzo
Nov 15 '18 at 23:17
Hello again, im really sorry beacuse i am a beginner really i am. jsfiddle.net/ms7u5cnw/1 i tried to put the codes here but it does not work at all i dont know why :/ also you can see the what im trying to use : codepen.io/zadvorsky/pen/xVrMMO
– Reira
Nov 16 '18 at 0:07
Are you sure that the reason you're not seeing anything isn't because it's black letters on a black background? See here: codepen.io/marquizzo/pen/MzopEV I added 'background: #f90' to the CSS, removed.setClearColor()
on line 9 and addedalpha: true
to the renderer on line 227. With those 3 lines, the canvas is now transparent, letting you see the orange from the CSS background.
– Marquizzo
Nov 16 '18 at 2:00
Thank you so much, the reason was i wrote alpha:true code in a wrong way thats why. Now its working :)
– Reira
Nov 16 '18 at 12:16
add a comment |
In order for your Three.js project to be transparent, you need to set its renderer's alpha parameter to true:
this.renderer = new THREE.WebGLRenderer(alpha: true);
This way, the parts that don't render anything will show the background of your HTML page, so if your HTML background is #ff0000
, then you should see red.
However, you're essentially disabling the transparency when you perform
root.renderer.setClearColor(0xffffff);
This line paints a white background on every frame, which means it's no longer transparent.
Also, I can't see your renderer.render(scene, camera);
line, because your code example is so narrow in scope.
First thanks for helping, so i tried to remove this part : " root.renderer.setClearColor(0xffffff); " of my code but then the script broken i mean the screen was just black. there is a code like this : this.renderer = new THREE.WebGLRenderer( antialias:params.antialias ); i wrote there 'alpha' code before but it does not working as well. what should i do now ? :/
– Reira
Nov 15 '18 at 23:04
1. What's your HTML background color? 2. What's your camera pointing at? 3. Does your scene have no lights and is just rendering a dark room? 4. What's insideparams.antialias
? 5. Are you callingrenderer.render()
? There are too many variables to pinpoint the problem. You're not giving me much to work with with your limited code. I recommend you head to jsfiddle.net , build your example, and then post it here so we can help you.
– Marquizzo
Nov 15 '18 at 23:17
Hello again, im really sorry beacuse i am a beginner really i am. jsfiddle.net/ms7u5cnw/1 i tried to put the codes here but it does not work at all i dont know why :/ also you can see the what im trying to use : codepen.io/zadvorsky/pen/xVrMMO
– Reira
Nov 16 '18 at 0:07
Are you sure that the reason you're not seeing anything isn't because it's black letters on a black background? See here: codepen.io/marquizzo/pen/MzopEV I added 'background: #f90' to the CSS, removed.setClearColor()
on line 9 and addedalpha: true
to the renderer on line 227. With those 3 lines, the canvas is now transparent, letting you see the orange from the CSS background.
– Marquizzo
Nov 16 '18 at 2:00
Thank you so much, the reason was i wrote alpha:true code in a wrong way thats why. Now its working :)
– Reira
Nov 16 '18 at 12:16
add a comment |
In order for your Three.js project to be transparent, you need to set its renderer's alpha parameter to true:
this.renderer = new THREE.WebGLRenderer(alpha: true);
This way, the parts that don't render anything will show the background of your HTML page, so if your HTML background is #ff0000
, then you should see red.
However, you're essentially disabling the transparency when you perform
root.renderer.setClearColor(0xffffff);
This line paints a white background on every frame, which means it's no longer transparent.
Also, I can't see your renderer.render(scene, camera);
line, because your code example is so narrow in scope.
In order for your Three.js project to be transparent, you need to set its renderer's alpha parameter to true:
this.renderer = new THREE.WebGLRenderer(alpha: true);
This way, the parts that don't render anything will show the background of your HTML page, so if your HTML background is #ff0000
, then you should see red.
However, you're essentially disabling the transparency when you perform
root.renderer.setClearColor(0xffffff);
This line paints a white background on every frame, which means it's no longer transparent.
Also, I can't see your renderer.render(scene, camera);
line, because your code example is so narrow in scope.
answered Nov 15 '18 at 22:39
MarquizzoMarquizzo
6,34932045
6,34932045
First thanks for helping, so i tried to remove this part : " root.renderer.setClearColor(0xffffff); " of my code but then the script broken i mean the screen was just black. there is a code like this : this.renderer = new THREE.WebGLRenderer( antialias:params.antialias ); i wrote there 'alpha' code before but it does not working as well. what should i do now ? :/
– Reira
Nov 15 '18 at 23:04
1. What's your HTML background color? 2. What's your camera pointing at? 3. Does your scene have no lights and is just rendering a dark room? 4. What's insideparams.antialias
? 5. Are you callingrenderer.render()
? There are too many variables to pinpoint the problem. You're not giving me much to work with with your limited code. I recommend you head to jsfiddle.net , build your example, and then post it here so we can help you.
– Marquizzo
Nov 15 '18 at 23:17
Hello again, im really sorry beacuse i am a beginner really i am. jsfiddle.net/ms7u5cnw/1 i tried to put the codes here but it does not work at all i dont know why :/ also you can see the what im trying to use : codepen.io/zadvorsky/pen/xVrMMO
– Reira
Nov 16 '18 at 0:07
Are you sure that the reason you're not seeing anything isn't because it's black letters on a black background? See here: codepen.io/marquizzo/pen/MzopEV I added 'background: #f90' to the CSS, removed.setClearColor()
on line 9 and addedalpha: true
to the renderer on line 227. With those 3 lines, the canvas is now transparent, letting you see the orange from the CSS background.
– Marquizzo
Nov 16 '18 at 2:00
Thank you so much, the reason was i wrote alpha:true code in a wrong way thats why. Now its working :)
– Reira
Nov 16 '18 at 12:16
add a comment |
First thanks for helping, so i tried to remove this part : " root.renderer.setClearColor(0xffffff); " of my code but then the script broken i mean the screen was just black. there is a code like this : this.renderer = new THREE.WebGLRenderer( antialias:params.antialias ); i wrote there 'alpha' code before but it does not working as well. what should i do now ? :/
– Reira
Nov 15 '18 at 23:04
1. What's your HTML background color? 2. What's your camera pointing at? 3. Does your scene have no lights and is just rendering a dark room? 4. What's insideparams.antialias
? 5. Are you callingrenderer.render()
? There are too many variables to pinpoint the problem. You're not giving me much to work with with your limited code. I recommend you head to jsfiddle.net , build your example, and then post it here so we can help you.
– Marquizzo
Nov 15 '18 at 23:17
Hello again, im really sorry beacuse i am a beginner really i am. jsfiddle.net/ms7u5cnw/1 i tried to put the codes here but it does not work at all i dont know why :/ also you can see the what im trying to use : codepen.io/zadvorsky/pen/xVrMMO
– Reira
Nov 16 '18 at 0:07
Are you sure that the reason you're not seeing anything isn't because it's black letters on a black background? See here: codepen.io/marquizzo/pen/MzopEV I added 'background: #f90' to the CSS, removed.setClearColor()
on line 9 and addedalpha: true
to the renderer on line 227. With those 3 lines, the canvas is now transparent, letting you see the orange from the CSS background.
– Marquizzo
Nov 16 '18 at 2:00
Thank you so much, the reason was i wrote alpha:true code in a wrong way thats why. Now its working :)
– Reira
Nov 16 '18 at 12:16
First thanks for helping, so i tried to remove this part : " root.renderer.setClearColor(0xffffff); " of my code but then the script broken i mean the screen was just black. there is a code like this : this.renderer = new THREE.WebGLRenderer( antialias:params.antialias ); i wrote there 'alpha' code before but it does not working as well. what should i do now ? :/
– Reira
Nov 15 '18 at 23:04
First thanks for helping, so i tried to remove this part : " root.renderer.setClearColor(0xffffff); " of my code but then the script broken i mean the screen was just black. there is a code like this : this.renderer = new THREE.WebGLRenderer( antialias:params.antialias ); i wrote there 'alpha' code before but it does not working as well. what should i do now ? :/
– Reira
Nov 15 '18 at 23:04
1. What's your HTML background color? 2. What's your camera pointing at? 3. Does your scene have no lights and is just rendering a dark room? 4. What's inside
params.antialias
? 5. Are you calling renderer.render()
? There are too many variables to pinpoint the problem. You're not giving me much to work with with your limited code. I recommend you head to jsfiddle.net , build your example, and then post it here so we can help you.– Marquizzo
Nov 15 '18 at 23:17
1. What's your HTML background color? 2. What's your camera pointing at? 3. Does your scene have no lights and is just rendering a dark room? 4. What's inside
params.antialias
? 5. Are you calling renderer.render()
? There are too many variables to pinpoint the problem. You're not giving me much to work with with your limited code. I recommend you head to jsfiddle.net , build your example, and then post it here so we can help you.– Marquizzo
Nov 15 '18 at 23:17
Hello again, im really sorry beacuse i am a beginner really i am. jsfiddle.net/ms7u5cnw/1 i tried to put the codes here but it does not work at all i dont know why :/ also you can see the what im trying to use : codepen.io/zadvorsky/pen/xVrMMO
– Reira
Nov 16 '18 at 0:07
Hello again, im really sorry beacuse i am a beginner really i am. jsfiddle.net/ms7u5cnw/1 i tried to put the codes here but it does not work at all i dont know why :/ also you can see the what im trying to use : codepen.io/zadvorsky/pen/xVrMMO
– Reira
Nov 16 '18 at 0:07
Are you sure that the reason you're not seeing anything isn't because it's black letters on a black background? See here: codepen.io/marquizzo/pen/MzopEV I added 'background: #f90' to the CSS, removed
.setClearColor()
on line 9 and added alpha: true
to the renderer on line 227. With those 3 lines, the canvas is now transparent, letting you see the orange from the CSS background.– Marquizzo
Nov 16 '18 at 2:00
Are you sure that the reason you're not seeing anything isn't because it's black letters on a black background? See here: codepen.io/marquizzo/pen/MzopEV I added 'background: #f90' to the CSS, removed
.setClearColor()
on line 9 and added alpha: true
to the renderer on line 227. With those 3 lines, the canvas is now transparent, letting you see the orange from the CSS background.– Marquizzo
Nov 16 '18 at 2:00
Thank you so much, the reason was i wrote alpha:true code in a wrong way thats why. Now its working :)
– Reira
Nov 16 '18 at 12:16
Thank you so much, the reason was i wrote alpha:true code in a wrong way thats why. Now its working :)
– Reira
Nov 16 '18 at 12:16
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326152%2ftransparent-code-does-not-working-on-three-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
There are literally hundreds of possible reasons for this. Can you post your code in a concise and minimal example so the behavior can be replicated? stackoverflow.com/help/mcve
– Marquizzo
Nov 15 '18 at 19:21
I wrote there the main function of my code.I think the problem can be solved from there.
– Reira
Nov 15 '18 at 22:25