three.js set background image

1

спасибо))

я нашел еще одно решение:

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

источник

2013-11-09 18:00:05 user2969890

+0

, к сожалению, ваш код не работает с трио.js r78, вы можете забыть установить альфа-значение true при построении рендеринга webgl, что является ключевым моментом для просмотра фонового изображения тела. – iefreer

24

Если вы пытаетесь установить статическое фоновое изображение (даже если вы вращаете основную камеру, фон не меняется), вам необходимо создать 2 сцены и 2 камеры.
Первая сцена будет состоять из базовой плоскости, на которой применяется текстура.
Вторая сцена будет иметь все ваши объекты.
Вот код, который будет делать это:

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

Надеется, что это помогает.

Примечание (2014/06/28): Этот код работает с последней версией Three.js: R67

источник

2013-11-08 22:46:29 ThisIsSparta

+0

Этот пример ничего не делает, потому что «новый THREE.Camera()» является абстрактным классом. Вместо этого вам нужно использовать «THREE.PerspectiveCamera». –

+0

, но он не работает с объектными загрузчиками, такими как OBJLoder, OBJMTLLoder –

+1

@BorutTomazin: Пожалуйста, проверьте живую демонстрацию в обновленном ответе. Он был протестирован с последним выпуском Three.js: R67. Спасибо за отзыв – ThisIsSparta

3

этот запуск:

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

источник

2014-11-15 11:04:06 tamara

+0

Это простой способ сделать это, а затем, конечно, css '{background-image: url (' whatever.jpg ')} 'на ваш элемент холста или его контейнер. – Octopus

0

фонового изображения может быть установлен путем установки атрибута THREE.Scenescene.background:

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;

Соотношение сторон изображения может быть скорректировано с соотношением сторон холста, как это:

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

Смотрите фрагмент кода:

(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); 
 
\t \t 
 
    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>

источник

2018-01-06 11:21:22 Rabbid76

three.js set background image

ответ

Смежные вопросы