在threejs中,setClearColor的值为白色,但在调用外部html文件时,它呈现为黑色?

三个人。js,setClearColor的值为白色,但在调用外部html文件时呈现黑色:

enter image description here

外部文件代码:

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

3D模式脚本:

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

我如何解决这个问题?