three.js hintergrund Bild

Informationen zum erstellen eines statischen hintergrund Bild?

Für Standard-hintergrund:

scene = new THREE.Scene();

//...

renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( scene.fog.color, 1 );

Wie ein Bild für scene.fog oder setzen Sie die Deckkraft für clearcolor?

InformationsquelleAutor user2969890 | 2013-11-08

Wenn Sie versuchen, eine statische Hintergrundbild (auch wenn Sie drehen Sie Ihre Kamera, den hintergrund nicht ändern), legen Sie 2 Szenen und 2 Kameras.

Die erste Szene besteht aus einer grundlegenden Ebene auf die textur angewendet wird.

Die zweite Szene haben alle Ihre Objekte.

Hier ist ein code, der es tun würde :

<html>
    <body>

    <script src="Three.js"></script>
    <script>
        var color = 0x000000;

        //Create your main scene
        var scene = new THREE.Scene();

        //Create your main camera
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth /window.innerHeight, 0.1, 1000);

        //Create lights
        var light = new THREE.PointLight(0xEEEEEE);
        light.position.set(20, 0, 20);
        scene.add(light);

        var lightAmb = new THREE.AmbientLight(0x777777);
        scene.add(lightAmb);

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

        //Create a cube
        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshLambertMaterial({
            color: 0xff00ff,
            ambient: 0x121212,
            emissive: 0x121212
         });

        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        //Set up the main camera
        camera.position.z = 5;

        //Load the background texture
        var texture = THREE.ImageUtils.loadTexture( '1.jpg' );
        var backgroundMesh = new THREE.Mesh(
            new THREE.PlaneGeometry(2, 2, 0),
            new THREE.MeshBasicMaterial({
                map: texture
            }));

        backgroundMesh .material.depthTest = false;
        backgroundMesh .material.depthWrite = false;

        //Create your background scene
        var backgroundScene = new THREE.Scene();
        var backgroundCamera = new THREE.Camera();
        backgroundScene .add(backgroundCamera );
        backgroundScene .add(backgroundMesh );

        //Rendering function
        var render = function () {
            requestAnimationFrame(render);

            //Update the color to set
            if (color < 0xdddddd) color += 0x0000ff;

            //Update the cube color
            cube.material.color.setHex(color);

            //Update the cube rotations
            cube.rotation.x += 0.05;
            cube.rotation.y += 0.02;

            renderer.autoClear = false;
            renderer.clear();
            renderer.render(backgroundScene , backgroundCamera );
            renderer.render(scene, camera);
       };

       render();
   </script>
   </body>
</html>

**Demo-Recht hier **

Hoffe, das hilft.

HINWEIS (2014/06/28): Dieser code funktioniert mit der neuesten Version von Three.js: R67

Dieses Beispiel tut nichts cos "neue DREI.Kamera()" ist eine abstrakte Klasse. Sie müssen verwenden Sie "DREI.PerspectiveCamera" statt.
aber es ist nicht die Arbeit mit dem Objekt-Lader wie OBJLoder,OBJMTLLoder
Bitte überprüfen Sie die live-demo in der Antwort aktualisiert. Es wurde getestet mit der neuesten Version von Three.js : der R67. Vielen Dank für das feedback

InformationsquelleAutor ThisIsSparta

4

diesem Lauf:
```
renderer = new THREE.WebGLRenderer({ antialias: false,alpha:true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000, 0);
```
Dies ist ein einfacher Weg, es zu tun, und dann natürlich css { background-image: url('whatever.jpg') } auf das canvas-element oder dessen Behälter.
Dieser arbeitete für mich, während die anderen nicht. Mit renderer = new THREE.CanvasRenderer({alpha:true });

InformationsquelleAutor tamara

danke ))

Fand ich noch eine andere Lösung:

<!DOCTYPE html>
<head>
    <title>three.js webgl - orbit controls</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            color: #000;
            font-family:Monospace;
            font-size:13px;
            text-align:center;
            font-weight: bold;
            background-image:url(./foto.jpg);

            margin: 0px;
            overflow: hidden;
        }

        #info {
            color:#000;
            position: absolute;
            top: 0px; width: 100%;
            padding: 5px;

        }

        a {
            color: red;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div id="info">

        <a href="http://threejs.org" target="_blank">three.js</a> 
    </div>

    <script src="./three.min.js"></script>
    <script src="js/loaders/OBJLoader.js"></script>
    <script src="js/controls/OrbitControls.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/libs/stats.min.js"></script>
    <!--используем для вывода информации fps-->

    <script>
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
        var container, stats;
        var camera, controls, scene, renderer;
        var cross;

        init();
        animate();

        function init() {       

            camera = new THREE.PerspectiveCamera( 90, window.innerWidth /window.innerHeight, 0.1, 2000 );
            camera.position.z = 100;
            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'change', render );
            scene = new THREE.Scene();

            var manager = new THREE.LoadingManager();
            manager.onProgress = function ( item, loaded, total ) {

                console.log( item, loaded, total );

            };

            var texture = new THREE.Texture();
            var loader = new THREE.ImageLoader( manager );
            loader.load( './kos.jpg', function ( image ) {

                texture.image = image;
                texture.needsUpdate = true;

            } );

            //model

            var loader = new THREE.OBJLoader( manager );
            loader.load( './skull.obj', function ( object ) {
                object.traverse( function ( child ) {
                    if ( child instanceof THREE.Mesh ) {
                        child.material.map = texture;
                    }
                } );
                object.position.y = 10;
                scene.add( object );
            } );


            //lights

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 1, 1, 1 );
            scene.add( light );

            light = new THREE.DirectionalLight( 0xffffff  );
            light.position.set( -1, -1, -1 );
            scene.add( light );

            light = new THREE.AmbientLight( 0xffffff );
            scene.add( light );


            renderer = new THREE.WebGLRenderer( { antialias: false } );
             renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );
            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.zIndex = 100;
            container.appendChild( stats.domElement );
            window.addEventListener( 'resize', onWindowResize, false );
        }


        function onWindowResize() {
            camera.aspect = window.innerWidth /window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
            render();

        }

        function animate() {
            requestAnimationFrame( animate );
            controls.update();

        }

        function render() {

            renderer.render( scene, camera );
            stats.update();
        }


    </script>

</body>

leider ist dein code nicht funktioniert mit three.js r78, könnte man vergessen, zu setzen, alpha auf true, wenn die Errichtung der webgl Rendern, das ist der entscheidende Punkt für das sehen der Körper ist das Hintergrundbild.
Ich mag deine Lösung (+1) weil du bist einfach löschen der Puffer mit der textur. Ich habe versucht, den gleichen Ansatz, aber entweder ich bekomme eine Warnung über die textur wird nicht-Leistung von zwei-und downscaling oder falsche Seitenverhältnis. Wie haben Sie sich rund um die Frage der Beibehaltung des Seitenverhältnisses während der Verwendung einer textur als Szene im hintergrund ?

InformationsquelleAutor user2969890

1

Verwenden Textur-loader laden ein beliebiges Bild als textur und dann anwenden, um die Szene wie folgt:
```
//Load background texture
 new THREE.TextureLoader();
loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture)
            {
             scene.background = texture;  
            });
```
Ergebnis:

Demo:

Finden Sie den Stift Flache Erde Three.JS von Hitesh Sahu (@hiteshsahu) auf CodePen.

InformationsquelleAutor Hitesh Sahu

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.