第六节将canvas、动画、图片作为纹理

最新推荐文章于 2023-08-21 12:16:35 发布
SunJHe
最新推荐文章于 2023-08-21 12:16:35 发布
阅读量796
点赞数
分类专栏： three.js 文章标签： three.js 3D javascript
three.js 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
本节从webgl中文网学习：http://www.hewebgl.com/article/getarticle/108
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
</head>
<body οnlοad="start();">

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

<script>
    //********************** canvas画闹钟 ****************************
    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!"');
        }
    }
    //*************************************************
    //定义
    var camera, scene, renderer;
    var mesh;
	var texture;
	//启动函数
	function start()
	{
		clock();  //js文件函数
		init();
		animate();
	}
    //初始化
    function init() {
        //渲染器
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        //透明相机
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;
        //场景
        scene = new THREE.Scene();
		//几何体，画一个立方体(x,y,z)
        var geometry = new THREE.CubeGeometry(150, 150, 150); 
        //texture = THREE.ImageUtils.loadTexture("textures/2.jpg", null, function (t) { }); //图片作为纹理
		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;  //相机的长宽比
        renderer.setSize(window.innerWidth, window.innerHeight);  //渲染器大小
        camera.updateProjectionMatrix();  //更新摄像机投影矩阵，相机参数更改后，必须调用
    }
    //循环渲染
    function animate() {
		texture.needsUpdate = true;  //纹理更新
		mesh.rotation.y -= 0.01;  //y轴旋转
		mesh.rotation.x -= 0.01;  //x轴旋转
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
</script>
</body>
</html>