three.js Tutorial
Empezando con three.js

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


Observaciones

El objetivo del proyecto es crear una biblioteca 3D liviana con un nivel de complejidad muy bajo, en otras palabras, para los maniquíes. La biblioteca proporciona representaciones de lienzo, svg, CSS3D y WebGL.

Versiones

Versión Registro de cambios Fecha de lanzamiento
R85 Enlazar 2017-04-25
R84 Enlazar 2017-01-19
R83 Enlazar 2016-12-15
R82 Enlazar 2016-12-15
R81 Enlazar 2016-09-16
R80 Enlazar 2016-08-23
R79 Enlazar 2016-07-14
R78 Enlazar 2016-06-20

Instalación o configuración

npm install three
  • Puedes agregarlo desde un CDN a tu HTML: 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
  • Puede usar el editor three.js para intentarlo y descargar el proyecto como ejemplo o punto de partida.

Placa de calderas simple: cubo giratorio y controles de órbita con amortiguación

Este es el archivo HTML básico que se puede usar como repetitivo al iniciar un proyecto. Esta placa de calderas utiliza controles de órbita con amortiguación (cámara que puede moverse alrededor de un objeto con efecto de desaceleración) y crea un cubo giratorio. 

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

¡Hola Mundo!

El ejemplo está tomado del sitio web de threejs .

Es posible que desee descargar three.js y cambiar la fuente del script a continuación.

Hay muchos más ejemplos avanzados en este enlace.

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 escena básica con un cubo estático 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;

Para ver realmente algo, necesitamos un bucle Render (): 

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


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow