Best IT Recipes

Three.js set background image

How to create a static background image?

For the default background:

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

How to set image for scene.fog or set opacity for clearcolor ?

+14
set static image background
Nov 08 '13 at 17:57
source share
6 answers

thank))

I found another 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
Nov 09 '13 at 18:00
source share

If you are trying to set a static background image (even if you rotate the main camera, the background does not change), you need to create 2 scenes and 2 cameras.
The first scene will consist of a base plane on which the texture is applied.
The second scene will have all of your objects.
Here is the code that would do this:

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

Hope this helps.

NOTE (2014/06/28): This code works with the latest version of Three.js: R67

+24
Nov 08 '13 at 22:46
source share

this run:

 renderer = new THREE.WebGLRenderer({ antialias: false,alpha:true }); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setClearColor(0x000000, 0);
+5
Nov 15 '14 at 11:04
source share

Use the texture loader to load any image as a texture, and then apply it to the scene as follows:

 //Load background texture new THREE.TextureLoader(); loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture) { scene.background = texture; });

Result:

enter image description here

Demo version:

See Pen Flat Earth Three.JS by Hitesh Sahu ( @hiteshsahu ) in CodePen .
+4
Jul 31 '18 at 11:50
source share

The background image can be set by setting the scene.background attribute 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;

The aspect ratio of the image can be adjusted to the aspect ratio of the canvas as follows:

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

See code snippet:

 (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
Jan 06 '18 at 11:21
source share

It seems quite late to add any input to this topic, but here is my '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>

This rather simplified approach has its limitations. An .jpg image retains its size in pixels, so with different sizes of the browser window, you can see different sizes of the image. If the canvas size exceeds the size of .jpg, then there is a division into sheets.

0
Jul 24 '19 at 12:32
source share


More articles:


All Articles