three.js Tutoriel
Démarrer avec three.js

aframe Angular 2 CSS HTML html5-canvas JavaScript jQuery Node.js SVG TypeScript
Recherche…


Remarques

Le but du projet est de créer une bibliothèque 3D légère avec un très faible niveau de complexité, en d’autres termes, pour les nuls. La bibliothèque fournit des rendus de type canvas, svg, CSS3D et WebGL.

Versions

Version Changelog Date de sortie
R85 Lien 2017-04-25
R84 Lien 2017-01-19
R83 Lien 2016-12-15
R82 Lien 2016-12-15
R81 Lien 2016-09-16
R80 Lien 2016-08-23
R79 Lien 2016-07-14
R78 Lien 2016-06-20

Installation ou configuration

  • Vous pouvez installer three.js via npm: 
npm install three
  • Vous pouvez l'ajouter à partir d'un CDN à votre HTML: 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
  • Vous pouvez utiliser l' éditeur three.js pour l'essayer et télécharger le projet comme exemple ou comme point de départ.

Boilerplate simple: contrôles de cube et d'orbite tournants avec amortissement

C'est le fichier HTML de base qui peut être utilisé comme point de départ lors du démarrage d'un projet. Ce passe-partout utilise des contrôles d'orbite avec amortissement (caméra pouvant se déplacer autour d'un objet avec effet de décélération) et crée un cube en rotation. 

<!DOCTYPE html>
<html>
    <head>
        <title>Three.js Boilerplate</title>

        <!--This is important to get a correct canvas size on mobile-->
        <meta name='viewport' content='width=device-width, user-scalable=no'/>

        <style>
            body{
                margin:0;
                overflow:hidden;
            }

            /*
              Next 2 paragraphs are a good practice. 
              In IE/Edge you have to provide the cursor images.
            */
            canvas{
                cursor:grab;
                cursor:-webkit-grab;
                cursor:-moz-grab;
            }
            canvas:active{
                cursor:grabbing;
                cursor:-webkit-grabbing;
                cursor:-moz-grabbing;
            }
        </style>
    </head>
    <body>
        
        <script src='three.js/build/three.js'></script>
        <script src='three.js/examples/js/controls/OrbitControls.js'></script>

        <script>
            var scene, renderer, camera, controls, cube;
        
            init();

            function init () {
                renderer = new THREE.WebGLRenderer();
                
                //this is to get the correct pixel detail on portable devices
                renderer.setPixelRatio( window.devicePixelRatio );

                //and this sets the canvas' size.
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                scene = new THREE.Scene();

                camera = new THREE.PerspectiveCamera( 
                    70,                                         //FOV
                    window.innerWidth / window.innerHeight,     //aspect
                    1,                                          //near clipping plane
                    100                                         //far clipping plane
                );
                camera.position.set( 1, 3, 5 );

                controls = new THREE.OrbitControls( camera, renderer.domElement );
                controls.rotateSpeed = .07;
                controls.enableDamping = true;
                controls.dampingFactor = .05;

                window.addEventListener( 'resize', function () {
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();
                    renderer.setSize( window.innerWidth, window.innerHeight );
                }, false );

                cube = new THREE.Mesh(
                    new THREE.BoxGeometry( 1, 1, 1 ),
                    new THREE.MeshBasicMaterial()
                   );
                scene.add( cube );

                animate();
            }

            function animate () {
                requestAnimationFrame( animate );
                controls.update();
                renderer.render( scene, camera );
                
                cube.rotation.x += 0.01;
            }
        </script>
    </body>
</html>

Bonjour le monde!

L'exemple est tiré du site Web de threejs .

Vous souhaiterez peut-être télécharger three.js et modifier la source du script ci-dessous.

Il existe de nombreux exemples plus avancés sous ce lien.

HTML: 

<html>
<head>
    <meta charset=utf-8>
    <title>My first Three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
    <script>
        // Our JavaScript will go here.
    </script>
</body>

La scène de base avec un cube statique en JavaScript: 

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 );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

Pour voir quelque chose, nous avons besoin d'une boucle Render (): 

function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow