THREE实战5_canvans纹理

var canvas;
function clock()
{
  canvas = document.createElement('canvas');//创建的canvas传入threejs
  canvas.width=200;
  canvas.height=200;
  var ctx = canvas.getContext('2d');
  if(ctx){
    var timerId;
    var frameRate = 60;
    function canvObject(){
      this.x = 0;
      this.y = 0;
      this.rotation = 0;
      this.borderWidth = 2;
      this.borderColor = '#000000';
      this.fill = false;
      this.fillColor = '#ff0000';
      this.update = function(){
      if(!this.ctx)throw new Error('你没有指定ctx对象。');
      var ctx = this.ctx
      ctx.save();
      ctx.lineWidth = this.borderWidth;
      ctx.strokeStyle = this.borderColor;
      ctx.fillStyle = this.fillColor;
      ctx.translate(this.x, this.y);
      if(this.rotation)ctx.rotate(this.rotation * Math.PI/180);
      if(this.draw)this.draw(ctx);
      if(this.fill)ctx.fill();
      ctx.stroke();
      ctx.restore();
      }
    };
    function Line(){};
      Line.prototype = new canvObject();
      Line.prototype.fill = false;
      Line.prototype.start = [0,0];
      Line.prototype.end = [5,5];
      Line.prototype.draw = function(ctx){
      ctx.beginPath();
      ctx.moveTo.apply(ctx,this.start);
      ctx.lineTo.apply(ctx,this.end);
      ctx.closePath();
    };
    function Circle(){};
      Circle.prototype = new canvObject();
      Circle.prototype.draw = function(ctx){
      ctx.beginPath();
      ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
      ctx.closePath();
    };
    var circle = new Circle();
    circle.ctx = ctx;
    circle.x = 100;
    circle.y = 100;
    circle.radius = 90;
    circle.fill = true;
    circle.borderWidth = 6;
    circle.fillColor = '#ffffff';
    var hour = new Line();
    hour.ctx = ctx;
    hour.x = 100;
    hour.y = 100;
    hour.borderColor = "#000000";
    hour.borderWidth = 10;
    hour.rotation = 0;
    hour.start = [0,20];
    hour.end = [0,-50];
    var minute = new Line();
    minute.ctx = ctx;
    minute.x = 100;
    minute.y = 100;
    minute.borderColor = "#333333";
    minute.borderWidth = 7;
    minute.rotation = 0;
    minute.start = [0,20];
    minute.end = [0,-70];
    var seconds = new Line();
    seconds.ctx = ctx;
    seconds.x = 100;
    seconds.y = 100;
    seconds.borderColor = "#ff0000";
    seconds.borderWidth = 4;
    seconds.rotation = 0;
    seconds.start = [0,20];
    seconds.end = [0,-80];
    var center = new Circle();
    center.ctx = ctx;
    center.x = 100;
    center.y = 100;
    center.radius = 5;
    center.fill = true;
    center.borderColor = 'orange';
    for(var i=0,ls=[],cache;i<12;i++){
      cache = ls[i] = new Line();
      cache.ctx = ctx;
      cache.x = 100;
      cache.y = 100;
      cache.borderColor = "orange";
      cache.borderWidth = 2;
      cache.rotation = i * 30;
      cache.start = [0,-70];
      cache.end = [0,-80];
    }
    timerId = setInterval(function(){
      // 清除画布
      ctx.clearRect(0,0,200,200);
      // 填充背景色
      ctx.fillStyle = 'orange';
      ctx.fillRect(0,0,200,200);
      // 表盘
      circle.update();
      // 刻度
      for(var i=0;cache=ls[i++];)cache.update();
      // 时针
      hour.rotation = (new Date()).getHours() * 30;
      hour.update();
      // 分针
      minute.rotation = (new Date()).getMinutes() * 6;
      minute.update();
      // 秒针
      seconds.rotation = (new Date()).getSeconds() * 6;
      seconds.update();
      // 中心圆
      center.update();
    },(1000/frameRate)|0);
  }else{
  alert('您的浏览器不支持Canvas无法预览.');
  }
}

<style>
        div#canvas-frame {//渲染画布
            border: none;
            cursor: pointer;
            width: 1000px;
            height: 500px;
            background-color: #ffffff;//白色
            margin:0 auto;//css选择器
        }
    </style>
<script>
    var camera, scene, renderer;
    var mesh;
    var texture;//全局变量声明
    function start()//渲染函数入口
    {
        clock();
        init();
        animate();
    }
    function init() {
        //初始化
        width = document.getElementById('canvas-frame').clientWidth;
        height = document.getElementById('canvas-frame').clientHeight;
        renderer = new THREE.WebGLRenderer({
            antialias : true
        });
        renderer.setSize(width, height);
        document.getElementById('canvas-frame').appendChild(renderer.domElement);
        renderer.setClearColor(0xFFFFFF, 1.0);
        
        //透视相机
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;
        scene = new THREE.Scene();
        //以下为加载Canvas纹理
        var geometry = new THREE.CubeGeometry(150,150,150);
        //一个box
        texture = new THREE.Texture(canvas);//canvans材质
        var material = new THREE.MeshBasicMaterial({map:texture});
        texture.needsUpdate = true;
        mesh =new THREE.Mesh(geometry,material);
        scene.add(mesh);
        window.addEventListener( 'resize', onWindowResize, false );
    }
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }
    function animate() {//循环渲染
        texture.needsUpdate = true;
        mesh.rotation.y -= 0.01;//旋转
        mesh.rotation.x -= 0.01;
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
       // renderer.setClearColor(0xFFFFFF, 1.0);
    }
</script>