Ste*_*one 10 javascript three.js
我用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
gai*_*tat 21
画布背景的颜色不是由CSS值决定的,而是使用 renderer.setClearColor (0xff0000, 1);
小智 6
您可以使用css控制背景颜色,但必须先将WebGLRenderer的"alpha"设置为"true".
在您的示例中,我添加了alpha选项并在渲染器中设置为true,并且还在body样式中添加了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>
小智 5
最好直接将背景添加到场景中，背景可以是纹理或三色！
从 r78 版本开始，您可以使用下面的代码来设置场景的背景颜色：
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );