Menu
I made a trial with basic scene of threejs but I can't understand why the canvas background is completely black.
<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>
EDIT:
Code at felpone.netsons.org
405
How do I change the color of my canvas in HTML? To set the color of an HTML5 Canvas line, we can use the strokeStyle property of the canvas context, which can be set to a color string such as red, green, or blue, a hex value such as #FF0000 or #555, or an RGB value such as rgb(255, 0, 0).
Scenes allow you to set up what and where is to be rendered by three. js. This is where you place objects, lights and cameras.
The color of the background of the canvas is not determined by the CSS value but using renderer.setClearColor (0xff0000, 1);
154
You can control the background color using css, but you must first set the "alpha" of your WebGLRenderer to "true".
In you example, I added the alpha option and set to true in the renderer, and I also added the background-color property in the body style.
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
