canvas background transparent en webgl

**zulad** · 03/08/2013, 19h59

bonjour, lorsque l'on initialise le canvas pour la 3D, y-a-t'il moyen d'avoir le canva transparent ou c'est d'office avec un "background color" ?

**zulad** · 04/08/2013, 20h12

bon ben apparemment c'est transparent par défaut... Voilà mon test à partir de three.js. Un z-index supérieur suffisait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #underDiv
      {
 
      }
      #container
      {
      	position:absolute;
      	z-index:100;
      }
    </style>
  </head>
  <body>
 
    <div id="container"></div>
    <div id="underDiv">s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/>
  s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/>
  s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/>
  s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/>
  s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/>
  s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/>
  s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/>
  s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/>
  s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/>
  s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk js:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/>
  v
  s:dkqf,:ksdf :ksjdf:k js:kjdf :ksjdf :kjs:dkf jskd:fj :kdsfk j<br/></div>
    <script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
    <script defer="defer">
 
      // revolutions per second
      var angularSpeed = 0.2; 
      var lastTime = 0;
 
      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        cube.rotation.y += angleChange;
        lastTime = time;
 
        // render
        renderer.render(scene, camera);
 
        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }
 
      // renderer
      var renderer = new THREE.WebGLRenderer();
      //renderer.domElement.fillStyle = "rgba(255, 255, 255, 0.5)"; // -- j'avais prévu ça ici
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.getElementById("container").appendChild(renderer.domElement);
 
      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 500;
 
      // scene
      var scene = new THREE.Scene();
 
      // cube
      var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshNormalMaterial());
      cube.overdraw = true;
      scene.add(cube);
 
      // start animation
      animate();
    </script>
    <script>
    	/*	-- j'avais prévu ça ici aussi
    	;(function(){
    	var canvas = document.getElementById("container");
    	canvas.fillStyle = "rgba(255, 255, 255, 0.5)";
    	})();
    	*/
    </script>
  </body>
</html>

canvas background transparent en webgl [API HTML5]

JavaScript

Discussions similaires

Partager

Partager