In Three.js, the value for setClearColor is white But it render black, when i call external html file:

enter image description here

External file codes:

<div id="3d-modal"></div>
<script src="juicer/js/three.js"></script>

3D-modal scripts:

<script>
 var scene = new THREE.Scene();
 var camera = new THREE.PerspectiveCamera(75, 
 window.innerWidth/window.innerHeight, 0.1, 1000);
 var renderer = new THREE.WebGLRenderer({antialias : true});

 // renderer.setSize(window.innerWidth, window.innerHeight);

 renderer.setClearColor(0xffffff);
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;

 // Appending Webgl to the "container" Div...
 // document.body.appendChild( renderer.domElement );

 var container = document.getElementById("3d-modal");
 var canvas_width = 290;
 var canvas_height = 165;
 var renderer = new THREE.WebGLRenderer();
 renderer.setSize(canvas_width , canvas_height);
 container.appendChild(renderer.domElement);

 var animate = function () {
 requestAnimationFrame( animate );
 renderer.render(scene, camera);
 };
 animate();
</script> 

How can i solve this?

In Three.js, the value for setClearColor is white But it render black, when i call external html file:

enter image description here

External file codes:

<div id="3d-modal"></div>
<script src="juicer/js/three.js"></script>

3D-modal scripts:

<script>
 var scene = new THREE.Scene();
 var camera = new THREE.PerspectiveCamera(75, 
 window.innerWidth/window.innerHeight, 0.1, 1000);
 var renderer = new THREE.WebGLRenderer({antialias : true});

 // renderer.setSize(window.innerWidth, window.innerHeight);

 renderer.setClearColor(0xffffff);
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;

 // Appending Webgl to the "container" Div...
 // document.body.appendChild( renderer.domElement );

 var container = document.getElementById("3d-modal");
 var canvas_width = 290;
 var canvas_height = 165;
 var renderer = new THREE.WebGLRenderer();
 renderer.setSize(canvas_width , canvas_height);
 container.appendChild(renderer.domElement);

 var animate = function () {
 requestAnimationFrame( animate );
 renderer.render(scene, camera);
 };
 animate();
</script> 

How can i solve this?

• javascript
• html
• css
• iframe
• three.js

• please post your code – mike_t Commented Dec 19, 2017 at 9:03

1 Answer 1

I came across this when I started using three.js as well. It's actually a javascript issue:

Update: Thanks to HdN8 for the updated solution:

renderer.setClearColor( 0xffffff, 0);

(note: syntax => setClearColor ( color, alpha ))

Update #2: As pointed out by WestLangley in another similar question - you must now use the below code when creating a new WebGLRenderer instance in conjunction with the setClearColor() function:

var renderer = new THREE.WebGLRenderer({ alpha: true });

Update #3: Mr.doob points out that since r78 you can alternatively use the code below to set your scene's background colour:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

Update #4: G Dog If the background color doesn't change, try changing alpha to 1 from 0.