three.js之简单的一个效果

最新推荐文章于 2024-06-01 08:45:00 发布

newway007

最新推荐文章于 2024-06-01 08:45:00 发布

阅读量201

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/newway007/article/details/103863839

版权

three.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

找的教程的代码有点旧了。各种效果出不来。

我就当入门玩一下这个吧。

一个可以运行的demo。

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-color: #000000;//背景色，黑色
            overflow: hidden;
        }
    </style>
</head>
<body onload="start();">//onload事件和window.onload事件只执行一个，后出现的覆盖先出现的。

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

        document.body.appendChild( renderer.domElement );

        //
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;
        scene = new THREE.Scene();//布景；
		
		var geometry = new THREE.CubeGeometry(150, 150, 150);//立方体
		texture = new THREE.Texture( canvas);//将画布传递给纹理；
        var material = new THREE.MeshBasicMaterial({map:texture});//纹理传递给材质；
		texture.needsUpdate = true;//可以更新，有的地方说不设置为true，可能看到的就是正方体。。。。。但是我测试了一下，并没有。。。
        mesh = new THREE.Mesh( geometry,material );//材质和立方体mesh
        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>

clock.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!"');
	}
}