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" ?
Version imprimable
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" ?
bon ben apparemment c'est transparent par défaut... Voilà mon test à partir de three.js. Un z-index supérieur suffisait :)
Code:
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>