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() 1);
 root.camera.position.set(0, 0, 400);

 var textAnimation = createTextAnimation();
 textAnimation.position.y = -40;
 root.scene.add(textAnimation);

 var tl = new TimelineMax(
 repeat:-1,
 repeatDelay:0.25,
 yoyo:true
 );
 tl.fromTo(textAnimation, 4,
 animationProgress:0.0,
 animationProgress:1.0, ease:Power1.easeInOut,
 0
 );

 createTweenScrubber(tl);

this is what i am using :

https://codepen.io/zadvorsky/pen/xVrMMO

edited Nov 15 '18 at 22:21

asked Nov 15 '18 at 18:52

Reira

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 |

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() 1);
 root.camera.position.set(0, 0, 400);

 var textAnimation = createTextAnimation();
 textAnimation.position.y = -40;
 root.scene.add(textAnimation);

 var tl = new TimelineMax(
 repeat:-1,
 repeatDelay:0.25,
 yoyo:true
 );
 tl.fromTo(textAnimation, 4,
 animationProgress:0.0,
 animationProgress:1.0, ease:Power1.easeInOut,
 0
 );

 createTweenScrubber(tl);

this is what i am using :

https://codepen.io/zadvorsky/pen/xVrMMO

edited Nov 15 '18 at 22:21

asked Nov 15 '18 at 18:52

Reira

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 |

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() 1);
 root.camera.position.set(0, 0, 400);

 var textAnimation = createTextAnimation();
 textAnimation.position.y = -40;
 root.scene.add(textAnimation);

 var tl = new TimelineMax(
 repeat:-1,
 repeatDelay:0.25,
 yoyo:true
 );
 tl.fromTo(textAnimation, 4,
 animationProgress:0.0,
 animationProgress:1.0, ease:Power1.easeInOut,
 0
 );

 createTweenScrubber(tl);

this is what i am using :

https://codepen.io/zadvorsky/pen/xVrMMO

edited Nov 15 '18 at 22:21

asked Nov 15 '18 at 18:52

Reira

114

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() 1);
 root.camera.position.set(0, 0, 400);

 var textAnimation = createTextAnimation();
 textAnimation.position.y = -40;
 root.scene.add(textAnimation);

 var tl = new TimelineMax(
 repeat:-1,
 repeatDelay:0.25,
 yoyo:true
 );
 tl.fromTo(textAnimation, 4,
 animationProgress:0.0,
 animationProgress:1.0, ease:Power1.easeInOut,
 0
 );

 createTweenScrubber(tl);

this is what i am using :

https://codepen.io/zadvorsky/pen/xVrMMO

function init() 1);
 root.camera.position.set(0, 0, 400);

 var textAnimation = createTextAnimation();
 textAnimation.position.y = -40;
 root.scene.add(textAnimation);

 var tl = new TimelineMax(
 repeat:-1,
 repeatDelay:0.25,
 yoyo:true
 );
 tl.fromTo(textAnimation, 4,
 animationProgress:0.0,
 animationProgress:1.0, ease:Power1.easeInOut,
 0
 );

 createTweenScrubber(tl);

function init() 1);
 root.camera.position.set(0, 0, 400);

 var textAnimation = createTextAnimation();
 textAnimation.position.y = -40;
 root.scene.add(textAnimation);

 var tl = new TimelineMax(
 repeat:-1,
 repeatDelay:0.25,
 yoyo:true
 );
 tl.fromTo(textAnimation, 4,
 animationProgress:0.0,
 animationProgress:1.0, ease:Power1.easeInOut,
 0
 );

 createTweenScrubber(tl);

javascript three.js

edited Nov 15 '18 at 22:21

asked Nov 15 '18 at 18:52

Reira

114

edited Nov 15 '18 at 22:21

asked Nov 15 '18 at 18:52

Reira

114

edited Nov 15 '18 at 22:21

asked Nov 15 '18 at 18:52

Reira

114

asked Nov 15 '18 at 18:52

Reira

114

asked Nov 15 '18 at 18:52

Reira

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

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.

answered Nov 15 '18 at 22:39

Marquizzo

6,51052045

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

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

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

);

draft saved

draft discarded

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

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.

answered Nov 15 '18 at 22:39

Marquizzo

6,51052045

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

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

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.

answered Nov 15 '18 at 22:39

Marquizzo

6,51052045

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

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

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.

answered Nov 15 '18 at 22:39

Marquizzo

6,51052045

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

Marquizzo

6,51052045

answered Nov 15 '18 at 22:39

Marquizzo

6,51052045

answered Nov 15 '18 at 22:39

Marquizzo

6,51052045

answered Nov 15 '18 at 22:39

Marquizzo

6,51052045

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

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

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

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

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

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

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 |

draft saved

draft discarded

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.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Odtnhj