three.js加载canvas纹理

js绘制时钟

var canvas;
function clock()
{
	canvas = document.createElement('canvas');
	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无法预览.\n跟我一起说："Fuck Internet Exploer!"');
	}
}

将canvas作为纹理贴图到立方体中

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }

        body{
            margin:0px;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
</head>
<body onload="start();">

<script src="../js/three.js"></script>
<script src="./clock.js"></script>

<script>
    var camera,scene,renderer;
    var mesh;
    var texture;

    function start()
    {
        clock();
        init();
        animate();
    }

    function init() {
        renderer=new THREE.WebGLRenderer();;//创建渲染器
        //指定渲染窗口的大小
        renderer.setSize(window.innerWidth,window.innerHeight);
        //把渲染的结果显示在body中
        document.body.appendChild(renderer.domElement);

        //创建摄像机
        camera=new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,10000);
        camera.position.z=400;
        //声明一个场景
        scene=new THREE.Scene();

        var geometry=new THREE.CubeGeometry(150,150,150);
        texture=new THREE.Texture(canvas);//将canvas作为纹理
        //创建材质
        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);
    }



</script>

</body>
</html>

three.js加载canvas纹理

猜你喜欢