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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在threejs中,setClearColor的值是白色但是当我调用外部html文件时它呈现黑色?相关的知识,希望对你有一定的参考价值。

在Three.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> 

我怎么解决这个问题?

答案

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

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

renderer.setClearColor( 0xffffff, 0);

(注意:syntax => setClearColor(color,alpha))

更新#2:正如WestLangley在another similar question中指出的那样 - 在与setClearColor()函数一起创建新的WebGLRenderer实例时,您现在必须使用以下代码:

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

以上是关于在threejs中,setClearColor的值是白色但是当我调用外部html文件时它呈现黑色?的主要内容,如果未能解决你的问题,请参考以下文章

threejs setClearColor 将不透明度设置为 0 尽管背景不存在

threejs - 4 - 物体

threejs中绘制文字

threejs初探

ThreeJS - 如何找到枢轴点

如何在threejs中移动gltf模型?