three.js Zelfstudie
Aan de slag met three.js

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


Opmerkingen

Het doel van het project is het creëren van een lichtgewicht 3D-bibliotheek met een zeer lage complexiteit - met andere woorden, voor dummies. De bibliotheek biedt canvas-, svg-, CSS3D- en WebGL-renderers.

versies

Versie changelog Publicatiedatum
R85 Koppeling 2017/04/25
R84 Koppeling 2017/01/19
R83 Koppeling 2016/12/15
R82 Koppeling 2016/12/15
R81 Koppeling 2016/09/16
R80 Koppeling 2016/08/23
R79 Koppeling 2016/07/14
R78 Koppeling 2016/06/20

Installatie of instellingen

npm install three
  • U kunt het van een CDN aan uw HTML toevoegen: 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
  • U kunt de three.js-editor gebruiken om het eens te proberen en het project als voorbeeld of startpunt downloaden.

Eenvoudige ketelplaat: draaiende kubus- en baanbesturing met demping

Dit is het eenvoudige HTML-bestand dat kan worden gebruikt als een boilerplate bij het starten van een project. Deze boilerplate maakt gebruik van orbitcontroles met demping (camera die met een vertragingseffect rond een object kan bewegen) en creëert een draaiende kubus. 

<!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>

Hallo Wereld!

Het voorbeeld is afkomstig van de website van threejs .

Misschien wilt u three.js downloaden en de onderstaande scriptbron wijzigen.

Er zijn veel meer geavanceerde voorbeelden onder deze link.

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>

De basisscène met een statische kubus in 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;

Om echt iets te zien, hebben we een Render () -lus nodig: 

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


Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow