THREE实战5_canvans纹理

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!