Threejs画布背景黑色

我用threejs的基本场景做了一个试验，但我不明白为什么画布背景是完全黑色的。Threejs画布背景黑色

<html> 
<head> 
    <title>My first Three.js app</title> 
    <style> 
     body { margin: 0; } 
     canvas { width: 100%; height: 100%;background-color: white; } 
    </style> 
</head> 
<body> 
    <script src="Stereos/threejs/three.js"></script> 
    <script> 
     var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
    </script> 
    </body> 
</html>

编辑：

代码在felpone.netsons.org

来源

2015-04-02 Stefano Maglione

画布的背景颜色不是由CSS值确定，但使用renderer.setClearColor (0xff0000, 1);

来源

2015-04-02 20:51:07 gaitat

这不完全正确。使用'renderer = new THREE.WebGLRenderer（{alpha：true}）; renderer.setClearColor（0x000000，0）;'和CSS背景颜色将显示出来。 – WestLangley 2015-07-23 21:02:54

@WestLangley实际上，混乱（也是我的）来自这样一个事实，即画布背景颜色的行为基于其定义的位置而有所不同;直接作为canvas元素上的css样式（http://jsfiddle.net/dzdoLosm/）或作为css元素本身（http://jsfiddle.net/n0jdpr76/），其中设置'setClearColor（color，0） '似乎并不奏效。 – gaitat 2015-07-24 17:01:40

您的clearColor有零阿尔法。尝试'renderer.setClearColor（0xff0000,0.5）;' – WestLangley 2015-07-24 17:19:58

你发一个场景，创建了一个相机并创建了一个渲染器，但是你错过了两件重要的事情：添加一些东西来渲染，并实际渲染它。

你的最后一行后，加

var cube = new THREE.Mesh( 
    new THREE.CubeGeometry(1,1,1), 
    new THREE.MeshNormalMaterial() 
); 
scene.add(cube); 

camera.position.set(2,2,2); 
camera.lookAt(cube.position); 

renderer.render(scene, camera);

，将创建的原点（0,0,0）的立方体，大小为1个单位;将相机放在远离它的地方并指向立方体;然后调用渲染器来渲染多维数据集。

来源

2015-07-23 10:12:02

您可以使用css控制背景色，但您必须首先将WebGLRenderer的“alpha”设置为“true”。

在你的例子中，我添加了alpha选项，并在渲染器中设置为true，并且我还在主体样式中添加了background-color属性。

<html> 
    <head> 
     <title>My first Three.js app</title> 
     <style> 
      body { margin: 0; background-color: white; } 
      canvas { width: 100%; height: 100%; background-color: white; } 
     </style> 
    </head> 
    <body> 
    <script src="Stereos/threejs/three.js"></script> 
    <script> 
     var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

     var renderer = new THREE.WebGLRenderer({alpha: true}); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 
    </script> 
    </body> 
</html>

来源

2015-07-29 17:11:09 asherkhb

@Jaume Sanchez是正确的答案。尽管其他答案是事实性的，但我认为他们不会回答你作为新来的三个人的要求。 var renderer只是对您的渲染目标的引用。你的代码不会绘制图形。你的场景中也没有相机来查看任何东西。 https://threejs.org/docs/index.html#Manual/Getting_Started/Creating_a_scene入门教程

来源

2017-01-26 15:01:17 Dcoollx

Threejs画布背景黑色

回答

相关问题