Texture Map

r83 version

by j91157j91157

HTML

<div id="info">Texture Mapping with TextureLoader
  <br> (r83 version)
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

#info {
  position: absolute;
  top: 1%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffee12;
}

body {
  overflow: hidden;
}

JavaScript

var renderer, scene, camera, controls;

init();
animate();

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(1, window.innerWidth / window.innerHeight, 1, 500);
  camera.position.z = 200;
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  document.body.appendChild(renderer.domElement);
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  //////////////////////////////////////////////////////////
  var geometry	= new THREE.PlaneGeometry( 2, 1, 2 );
	var material	= new THREE.MeshBasicMaterial( {color: 0xf4c242, side: THREE.DoubleSide} );
	var mesh	= new THREE.Mesh( geometry, material );
	mesh.rotation.x = -Math.PI/2;
	scene.add( mesh );
  
	var photo_loader = new THREE.TextureLoader();
  photo_loader.setCrossOrigin ('');
  var material_photo = new THREE.MeshBasicMaterial({
    map: photo_loader.load('https://i.imgur.com/nFtrarV.jpg')
  })
	var photo	= new THREE.Mesh( new THREE.PlaneGeometry( 0.8, 0.7, 1 ), material_photo );
	photo.rotation.x = -Math.PI/2;
  photo.position.set(0.5, 0.01, -0.1);
	scene.add( photo );
  
  var material_photo1 = new THREE.MeshBasicMaterial({
    map: photo_loader.load('https://i.imgur.com/ehAR7j4.png'),
    transparent: true
  })
	var photo1	= new THREE.Mesh( new THREE.PlaneGeometry( 1, 0.4, 1 ), material_photo1 );
	photo1.rotation.x = -Math.PI/2;
  photo1.position.set(-0.5, 0.01, -0.2);
	scene.add( photo1 );
  

	//AR.js TextGeometry
	var loader = new THREE.FontLoader();
	loader.load( 'https://raw.githubusercontent.com/rollup/three-jsnext/master/examples/fonts/helvetiker_regular.typeface.json', function (font) {
	var textGeometry_1 = new THREE.TextGeometry( "Sunny Hsieh ", {
				font: font,
				size: 0.16,
				height: 0.1,
				curveSegments: 12,
				bevelEnabled: false
		} );
		var textMaterial_1 = new THREE.MeshNormalMaterial();
		var text_1 = new THREE.Mesh(textGeometry_1,...