« Modèle:Éclairer une scène » : différence entre les versions

De OSWiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
 
(2 versions intermédiaires par le même utilisateur non affichées)
Ligne 5 : Ligne 5 :
===Le code===
===Le code===
{|
{|
|style="width: 50%;"|<source lang = 'javascript'>
|style="width: 50%;"|<syntaxhighlight lang = 'javascript'>
var scene = new THREE.Scene();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );


camera.position.z = 100;
camera.position.z = 50;


var renderer = new THREE.WebGLRenderer();
var renderer = new THREE.WebGLRenderer();
Ligne 32 : Ligne 32 :
animate();
animate();


</source>
</syntaxhighlight>
| style="position: absolute; width:50%;  min-height:100%;  "|{{Spécial:IframePage/Eclairage}}
| style="position: absolute; width:50%;  min-height:100%;  "|<iframe key="webgl" path="/cogito/OSWiki/resources/3D/tests_exemples/webgl002/index.php" />
|}
|}


===Analyse du code Javascript===
===Analyse du code Javascript===

Dernière version du 25 mars 2022 à 14:31

Organisation des dossiers et fichiers

Fichiers Index.html et style.css

Code javascript

Le code

<syntaxhighlight lang = 'javascript'>

var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

camera.position.z = 50;

var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry(20, 20, 20); var material = new THREE.MeshLambertMaterial({color: 0xfd59d7}); var cube = new THREE.Mesh(geometry, material); scene.add(cube);

var light = new THREE.PointLight(0xFFFF00); light.position.set(10, 0, 25); scene.add(light);

function animate() { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } animate();

</syntaxhighlight>

Analyse du code Javascript