three.js加载canvas纹理

来源：互联网发布：java高并发包编辑：程序博客网时间：2024/06/04 19:17

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

阅读全文

0 0