Adding a Texture to Extrude Geometry using Three - Javascript Canvas

Javascript examples for Canvas:Text

  1. HOME
  2. Javascript
  3. Canvas
  4. Text

Description

Adding a Texture to Extrude Geometry using Three

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script> 
      <style id="compiled-css" type="text/css">

html,//from  w  w  w . j ava2  s.  c o  m
body {
   width: 100%;
   height: 100%;
}
#scene {
   width: 100%;
   height: 80%;
   border: 1px solid black;
}
canvas {
   border: 1px solid black;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var canvas = document.getElementById("texture"),
  context = canvas.getContext("2d");
canvas.width = 50;
canvas.height = 50;
context.strokeStyle = "#5588ff";
context.lineWidth = 2;
context.moveTo(0, 10);
context.lineTo(50, 10);
context.moveTo(0, 20);
context.lineTo(50, 20);
context.moveTo(0, 30);
context.lineTo(50, 30);
context.moveTo(0, 40);
context.lineTo(50, 40);
context.stroke();

var scene, camera, renderer, shape;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, 2, 1, 10000);
camera.position.z = 200;
scene.add(this.camera);
var light = new THREE.AmbientLight(0xffffff);
scene.add(light);
renderer = new THREE.WebGLRenderer({
  antialias: true, alpha:true
});
document.getElementById("scene").appendChild(renderer.domElement);
renderer.setSize(document.getElementById("scene").scrollWidth, document.getElementById("scene").scrollHeight);
var points = []
points.push(new THREE.Vector2(100, 0));
points.push(new THREE.Vector2(100, 60));
points.push(new THREE.Vector2(40, 90));
points.push(new THREE.Vector2(-40, 90));
points.push(new THREE.Vector2(-100, 60));
points.push(new THREE.Vector2(-100, 0));

var extrusionSettings = {
  steps: 1,
  bevelEnabled: false,
  amount: 90
};
shape = new THREE.Shape(points);
var geometry = new THREE.ExtrudeGeometry(shape, extrusionSettings);
var texture = new THREE.Texture(canvas);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping; // CHANGED
texture.offset.set( 0, 0.5 ); // CHANGED
texture.repeat.set( 0.01, 0.01 ); // CHANGED
texture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial({
  color: 0xFF00FF,
  map: texture
});

mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [material, new THREE.MeshBasicMaterial({
  color: 0x000000,
  wireframe: true,
  transparent: true
})]);
mesh.position.z = -50;
mesh.position.y = -40;
mesh.rotation.y = 0.8;
mesh.rotation.z = 0.4;
scene.add(mesh);
animate = function() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  mesh.rotation.y += 0.02;
  mesh.rotation.x += 0.02;
};
animate();
    }

      </script> 
   </head> 
   <body> 
      <div id="scene"></div> 
      <div>
         Texture : 
         <canvas style="width:50px; height:50px" id="texture"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials