The box map of threejs -- six faces in one picture

Cube map can be 6 independent pictures. In order to reduce HTTP request, 6 pictures can be combined to make a picture. The principle is to cut and display the pictures on canvas in order on the canvas created, assign the canvas displaying the picture to the image attribute of texture object, set needsUpdate = true of material object, and then map the generated texture to material Objects that generate box es from shapes and materials.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl - panorama</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
    html,
    body {

        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #container {
        width: 1500px;
        height: 800px;
        background: #000;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="../../build/three.js"></script>
    <script src="../js/controls/OrbitControls.js"></script>
    <script>
    var camera, controls;
    var renderer;
    var scene;
    var width, height;
    init();
    animate();

	function init(){
	  
	  var container = document.getElementById("container");
	  width = container.clientWidth;
	  height = container.clientHeight;
	  renderer = new THREE.WebGLRenderer();
	  renderer.setPixelRatio(window.devicePixelRatio);
	  renderer.setSize(width,height);
	  container.appendChild(renderer.domElement);
	  
	  scene = new THREE.Scene();
	  camera = new THREE.PerspectiveCamera(90,width/height,0.1,100);
	  camera.position.z = 0.01;
	  
	  controls = new THREE.OrbitControls(camera, renderer.domElement);
	  
	  var textures = getTexturesFromAtlasFile( "../textures/cube/sun_temple_stripe.jpg", 6 );
	  var materials = [];
	  for(var i=0;i<6;i++){
	    materials.push(new THREE.MeshBasicMaterial({map:textures[i]}))
	  }
	  var skyBox = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 1, 1 ), materials );
	  skyBox.geometry.scale(1,1,-1);
	  scene.add(skyBox);
	  window.addEventListener("resize",onWindowResize,false)
	  
	}
    
	  function getTexturesFromAtlasFile( atlasImgUrl, titlesNum ) {
	  var textures = [];
	  for(var i =0;i<titlesNum;i++){
	    textures[i] = new THREE.Texture()
	  }
	  var imageObj = new Image();
	  imageObj.onload = function(){
	    var canvas, context;
		var imgWidth = imageObj.height;
		for(var i=0;i<6;i++){
		  canvas = document.createElement("canvas");
		  context = canvas.getContext("2d");
		  canvas.height = imgWidth;
		  canvas.width = imgWidth;
		  context.drawImage(imageObj,imgWidth*i,0,imgWidth,imgWidth,0,0,imgWidth,imgWidth);
		  textures[i].image = canvas;
		  textures[i].needsUpdate = true;
		}
	  }
	  imageObj.src = atlasImgUrl;
	  return textures;
	
	}

    function onWindowResize() {
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
        renderer.setSize(width, height);
    }

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera)
    }
	
    </script>
</body>

</html>

Keywords: Front-end Attribute

Added by mniessen on Sat, 09 Nov 2019 16:24:16 +0200

Programming VIP

The box map of threejs -- six faces in one picture

Popular Keywords