web-dev-qa-db-fra.com

Three.js définir l'image d'arrière-plan

Comment créer une image de fond statique?

Pour l'arrière-plan par défaut:

scene = new THREE.Scene();

// ...

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

Comment définir une image pour scene.fog, ou définissez l'opacité pour clearcolor?

imagebackgroundstaticthree.jsset
15
user2969890

je vous remercie ))

J'ai trouvé encore une autre solution:

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

Si vous essayez de définir une image d'arrière-plan statique (même si vous faites pivoter votre caméra principale, l'arrière-plan ne change pas), vous devez créer 2 scènes et 2 caméras.
La première scène sera composée d'un plan de base sur lequel une texture est appliquée.
La deuxième scène aura tous vos objets.
Voici un code qui le ferait:

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

** Démo ici **

J'espère que cela t'aides.

REMARQUE (28/06/2014): Ce code fonctionne avec la dernière version de Three.js: R67

24
ThisIsSparta

cette course:

renderer = new THREE.WebGLRenderer({ antialias: false,alpha:true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000, 0);
5
tamara

Une image d'arrière-plan peut être définie en définissant scene.background attribut de THREE.Scene :

scene = new THREE.Scene();
bgTexture = loader.load("https://i.stack.imgur.com/vDUZz.jpg",
    function ( texture ) {
        var img = texture.image;
        bgWidth= img.width;
        bgHeight = img.height;
        resize();
    } );
scene.background = bgTexture;
bgTexture.wrapS = THREE.MirroredRepeatWrapping;
bgTexture.wrapT = THREE.MirroredRepeatWrapping;

Le rapport d'aspect de l'image peut être ajusté au rapport d'aspect de la toile comme ceci:

var aspect = window.innerWidth / window.innerHeight;
var texAspect = bgWidth / bgHeight;
var relAspect = aspect / texAspect;

bgTexture.repeat = new THREE.Vector2( 
    Math.max(relAspect, 1),
    Math.max(1/relAspect,1) ); 
bgTexture.offset = new THREE.Vector2(
    -Math.max(relAspect-1, 0)/2,
    -Math.max(1/relAspect-1, 0)/2 );

Voir l'extrait de code:

(function onLoad() {
  var container, loader, camera, scene, renderer, controls, bgTexture, bgWidth, bgHeight;
  
  init();
  animate();

  function init() {
    container = document.getElementById('container');
    
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.set(0, -4, -1.5);

    loader = new THREE.TextureLoader();
    loader.setCrossOrigin("");

    scene = new THREE.Scene();
    bgTexture = loader.load("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/background.jpg",
        function ( texture ) {
            var img = texture.image;
            bgWidth= img.width;
            bgHeight = img.height;
            resize();
        }
    );
    scene.background = bgTexture;
    bgTexture.wrapS = THREE.MirroredRepeatWrapping;
    bgTexture.wrapT = THREE.MirroredRepeatWrapping;
  
    scene.add(camera);
    window.onresize = resize;
    
    var ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    directionalLight.position.x = -0.75;
    directionalLight.position.y = -0.5;
    directionalLight.position.z = -1;
    scene.add( directionalLight );

    controls = new THREE.OrbitControls(camera, renderer.domElement);
                
    createModel();
  }

  function createModel() {

    var material = new THREE.MeshPhongMaterial({color:'#b090b0'});
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);
  }

  function resize() {
    
    var aspect = window.innerWidth / window.innerHeight;
    var texAspect = bgWidth / bgHeight;
    var relAspect = aspect / texAspect;

    bgTexture.repeat = new THREE.Vector2( Math.max(relAspect, 1), Math.max(1/relAspect,1) ); 
    bgTexture.offset = new THREE.Vector2( -Math.max(relAspect-1, 0)/2, -Math.max(1/relAspect-1, 0)/2 ); 

    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
  }

  function animate() {
    requestAnimationFrame(animate);
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }
})();
<script src="https://threejs.org/build/three.min.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script-->
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<div id="container"></div>
2
Rabbid76

Il semble assez tard dans la journée pour ajouter une contribution à ce fil, mais voici mon "bonheur":

    <head>
        <meta charset=utf-8>
        <title>Temple7</title>
        <style>
            body { margin: 0;
                 }
            canvas { width: 100%; height: 100%;
                  background-image:url(Clouds.jpg);
                }
        </style>
    </head>

Cette approche assez simpliste a ses limites. L'image .jpg conserve ses dimensions en pixels de sorte que, pour différentes tailles de la fenêtre du navigateur, on voit différentes quantités de l'image. Si la taille du canevas dépasse la taille du fichier .jpg, la mosaïque se produit.

0
Lawrie Hodges