three.js Tutorial
Erste Schritte mit three.js

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


Bemerkungen

Ziel des Projekts ist es, eine leichtgewichtige 3D-Bibliothek mit sehr geringer Komplexität zu erstellen - also für Dummies. Die Bibliothek bietet Canvas-, SVG-, CSS3D- und WebGL-Renderer.

Versionen

Ausführung Änderungsprotokoll Veröffentlichungsdatum
R85 Verknüpfung 2017-04-25
R84 Verknüpfung 2017-01-19
R83 Verknüpfung 2016-12-15
R82 Verknüpfung 2016-12-15
R81 Verknüpfung 2016-09-16
R80 Verknüpfung 2016-08-23
R79 Verknüpfung 2016-07-14
R78 Verknüpfung 2016-06-20

Installation oder Setup

  • Sie können three.js über npm installieren: 
npm install three
  • Sie können es von einem CDN zu Ihrem HTML-Code hinzufügen: 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
  • Sie können es mit dem three.js-Editor versuchen und das Projekt als Beispiel oder Ausgangspunkt herunterladen.

Einfache Boilerplate: Würfel- und Orbitkontrollen mit Dämpfung

Dies ist die grundlegende HTML-Datei, die beim Starten eines Projekts als Zwischenablage verwendet werden kann. Diese Boilerplate verwendet Orbitkontrollen mit Dämpfung (Kamera, die sich mit Verzögerungseffekt um ein Objekt bewegen kann) und erstellt einen rotierenden Würfel. 

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

Das Beispiel stammt von der Website von threejs .

Sie können three.js herunterladen und die Skriptquelle unten ändern.

Es gibt viele weitere fortgeschrittene Beispiele unter diesem 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>

Die grundlegende Szene mit einem statischen Cube 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;

Um tatsächlich etwas zu sehen, benötigen wir eine Render () - Schleife: 

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


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow