在threejs中，setClearColor的值是白色但是当我调用外部html文件时它呈现黑色？

Question

在 Three.js 中，setClearColor 的值是白色但它呈现黑色，当我调用外部 html 文件时：

在此处输入图片说明

外部文件代码：

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

我该如何解决这个问题？

Answer 1

当我开始使用three.js时，我也遇到了这个问题。这实际上是一个javascript问题：

更新：感谢 HdN8 提供更新的解决方案：

renderer.setClearColor( 0xffffff, 0);

（注意：语法 => setClearColor ( color, alpha )）

更新 #2：正如 WestLangley 在另一个类似问题中指出的那样- 在创建新的 WebGLRenderer 实例和setClearColor()函数时，您现在必须使用以下代码：

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

更新 #3：Mr.doob指出，从r78 开始，您也可以使用下面的代码来设置场景的背景颜色：

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

更新 #4：G Dog 如果背景颜色没有改变，请尝试将 alpha 从 0 更改为 1。