threejs实战_canvans纹理

• 在canvas画时钟
• 将canvas传递给THREE.Texture纹理
• 将纹理传递给THREE.MeshBasicMareial材质

• 构造THREE.Mesh
  在3D纹理的基础利用js制作贴图赋予物体
  回顾3D纹理的流程可跳转上一篇博客

  代码重构

  js绘制时钟

  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无法预览.');
   }
  }
  

threejs重构

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

ok,nice!