three.js définir l'image de fond

Comment créer un arrière-plan statique de l'image?

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 mettre une image pour scene.fog, ou réglez l'opacité pour clearcolor?

InformationsquelleAutor user2969890 | 2013-11-08

Si vous essayez de définir un arrière-plan statique de l'image (même si vous faites pivoter votre appareil photo principal, le fond ne change pas), vous devez créer 2 scènes et 2 caméras.

La première scène sera composé d'un plan de base sur laquelle une texture est appliquée.

La deuxième scène de tous vos objets.

Voici un code qui permettrait de le faire :

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

Espère que cette aide.

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

Cet exemple n'a rien fait de cos "le nouveau les TROIS.Appareil photo()" est une classe abstraite. Vous devez utiliser "TROIS.PerspectiveCamera" à la place.
mais il ne fonctionne pas avec l'objet chargeurs comme OBJLoder,OBJMTLLoder
Veuillez vérifier la version "démo" dans la mise à jour de réponse. Il a été testé avec la dernière version de Three.js : R67. Merci pour les commentaires

InformationsquelleAutor ThisIsSparta

5

cette course:
```
renderer = new THREE.WebGLRenderer({ antialias: false,alpha:true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000, 0);
```
- C'est une façon simple de le faire, et puis, bien sûr, css un { background-image: url('whatever.jpg') } sur votre toile de l'élément ou de son contenant.
- Cela a fonctionné pour moi, les autres n'ont pas. À l'aide de renderer = new THREE.CanvasRenderer({alpha:true });
InformationsquelleAutor tamara
5

Utilisation de la Texture chargeur pour charger n'importe quelle image comme texture et ensuite l'appliquer à la scène comme ceci:
```
//Load background texture
const loader = new THREE.TextureLoader();
loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture)
            {
             scene.background = texture;  
            });
```
Résultat:

Démo:

Voir le Pen La Terre Plate Three.JS par Hitesh Sahu (@hiteshsahu) sur CodePen.

InformationsquelleAutor Hitesh Sahu

merci ))

J'ai encore trouvé 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>

malheureusement, votre code ne fonctionne pas avec three.js r78, vous pourriez oublier de mettre de l'alpha à true lors de la construction de l'rendu webgl, qui est le point clé pour voir le corps de l'image d'arrière-plan.
J'aime votre solution de (+1) parce que vous êtes tout simplement la compensation de la mémoire tampon avec la texture. J'ai essayé la même approche, mais je reçois un avertissement à propos de la texture étant pas une puissance de deux et d'en réduire ou incorrecte de l'aspect ratio. Comment avez-vous autour de la question du maintien de l'aspect ratio, alors que l'aide d'une texture à l'arrière-plan de la scène ?

InformationsquelleAutor user2969890

Une image d'arrière-plan peut être défini par le réglage de la scene.background attribut de la TROIS.La scène:

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 ratio d'aspect de l'image peut être ajustée pour le ratio 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:

JS:

(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);
}
})();

HTML:

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

À l'aide de scène.arrière-plan semble être la façon la plus simple pour ajouter une image d'arrière-plan. Cependant, votre code rend une déformation de l'image d'arrière-plan (puisqu'il correspond à la résolution de la fenêtre). Une idée de comment résoudre ce problème?

InformationsquelleAutor Rabbid76

0

Il semble assez tard dans la journée pour être l'ajout d'une contribution à ce fil, mais voici ma 'hap'orth':
```
    <head>
<meta charset=utf-8>
<title>Temple7</title>
<style>
body { margin: 0;
}
canvas { width: 100%; height: 100%;
background-image:url(Clouds.jpg);
}
</style>
</head>
```
Ce plutôt simpliste approche a ses limites. L' .jpg image conserve ses dimensions en pixels, de sorte que, pour différentes tailles de la fenêtre du navigateur, on voit des quantités différentes de l'image. Si la toile de la taille dépasse la taille de l' .jpg, puis le carrelage se produit.

InformationsquelleAutor Lawrie Hodges

Vous devez vous connecter pour publier un commentaire.