原来可以上传代码块的！上面的word文档是多余的了！
<!DOCTYPE html>
<html>
<head>
<!--使用UTF8编码(国际化编码)-->
<meta charset="utf-8">
<title>魔方复原</title>
<script type="text/javascript">
function color(r, g, b, a) {
this.r = r;
this.g = g;
this.b = b;
this.a = a;
}
function point2D(x, y) {
this.x = x;
this.y = y;
}
point2D.prototype.move = function(p2D) {
this.x += p2D.x;
this.y += p2D.y;
}
function point3D(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
point3D.prototype.move = function(p3D) {
this.x += p3D.x;
this.y += p3D.y;
this.z += p3D.z;
}
// 交换
point3D.prototype.swap = function(p3D) {
this.x = p3D.x;
this.y = p3D.y;
this.z = p3D.z;
}
// 旋转
point3D.prototype.rotate = function(axis, angleGr) {
angleRad = angleGr * Math.PI / 180;
switch (axis) {
case "x":
{
var tempPoint = new point3D(
this.x,
this.y * Math.cos(angleRad) - this.z * Math.sin(angleRad),
this.y * Math.sin(angleRad) + this.z * Math.cos(angleRad)
);
this.swap(tempPoint);
break;
}
case "y":
{
var tempPoint = new point3D(
this.x * Math.cos(angleRad) + this.z * Math.sin(angleRad),
this.y, -this.x * Math.sin(angleRad) + this.z * Math.cos(angleRad)
);
this.swap(tempPoint);
break;
}
case "z":
{
var tempPoint = new point3D(
this.x * Math.cos(angleRad) - this.y * Math.sin(angleRad),
this.x * Math.sin(angleRad) + this.y * Math.cos(angleRad),
this.z
);
this.swap(tempPoint);
break;
}
}
}
function normal3D(p3D, length) {
this.point = p3D;
this.length = length;
}
function poly() {
var points = [];
for (var i = 0; i < arguments.length; i++)
points.push(arguments[i]);
this.points = points;
// Calculating normal
var v1 = new point3D(points[2].x - points[1].x, points[2].y - points[1].y, points[2].z - points[1].z);
var v2 = new point3D(points[0].x - points[1].x, points[0].y - points[1].y, points[0].z - points[1].z);
var normalP3D = new point3D(v1.y * v2.z - v2.y * v1.z, v1.z * v2.x - v2.z * v1.x, v1.x * v2.y - v2.x * v1.y);
var normalLen = Math.sqrt(normalP3D.x * normalP3D.x + normalP3D.y * normalP3D.y + normalP3D.z * normalP3D.z);
this.normal = new normal3D(normalP3D, normalLen);
}
poly.prototype.move = function(p3D) {
for (var i = 0; i < this.points.length; i++) {
var point = this.points[i];
point.move(p3D);
}
}
poly.prototype.rotate = function(axis, angle) {
for (var i = 0; i < this.points.length; i++) {
var point = this.points[i];
point.rotate(axis, angle);
}
this.normal.point.rotate(axis, angle);
}
poly.prototype.put = function(center, fillColor, edgeColor) {
// Calulate visibility
var normalAngleRad = Math.acos(this.normal.point.z / this.normal.length);
if (normalAngleRad / Math.PI * 180 >= 90)
return;
var lightIntensity = 1 - 2 * (normalAngleRad / Math.PI);
ctx.fillStyle = 'rgba(' + fillColor.r + ',' + fillColor.g + ',' + fillColor.b + ',' +
(fillColor.a * lightIntensity) + ')';
ctx.beginPath();
for (var i = 0; i < this.points.length; i++) {
var point = this.points[i];
if (i)
ctx.lineTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
else
ctx.moveTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
}
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(' + edgeColor.r + ',' + edgeColor.g + ',' + edgeColor.b + ',' +
(edgeColor.a * lightIntensity) + ')';
ctx.beginPath();
var point = this.points[this.points.length - 1];
ctx.moveTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
for (var i = 0; i < this.points.length; i++) {
var point = this.points[i];
ctx.lineTo(center.x + parseInt(point.x), center.y - parseInt(point.y));
}
ctx.stroke();
}
function Cube(size, fillColor, edgeColor) {
/* var p000 = new point3D(0, 0, 0);
var p0S0 = new point3D(0, size, 0);
var pSS0 = new point3D(size, size, 0);
var pS00 = new point3D(size, 0, 0);
var p00S = new point3D(0, 0, size);
var p0SS = new point3D(0, size, size);
var pSSS = new point3D(size, size, size);
var pS0S = new point3D(size, 0, size);*/
var p000 = new point3D(-size, -size, -size);
var p0S0 = new point3D(-size, size, -size);
var pSS0 = new point3D(size, size, -size);
var pS00 = new point3D(size, -size, -size);
var p00S = new point3D(-size, -size, size);
var p0SS = new point3D(-size, size, size);
var pSSS = new point3D(size, size, size);
var pS0S = new point3D(size, -size, size);;
var polys = [];
polys.push(new poly(p000, p0S0, pSS0, pS00));//左手法则：底面X
polys.push(new poly(pS00, pSS0, pSSS, pS0S));//右面Y
polys.push(new poly(pS0S, pSSS, p0SS, p00S));//上面S
polys.push(new poly(p00S, p0SS, p0S0, p000));//左面Z
polys.push(new poly(p0S0, p0SS, pSSS, pSS0));//前面Q
polys.push(new poly(p00S, p000, pS00, pS0S));//后面H
this.polys = polys;
var points = [];
points.push(p000);
points.push(p0S0);
points.push(pSS0);
points.push(pS00);
points.push(p00S);
points.push(p0SS);
points.push(pSSS);
points.push(pS0S);
for (var i = 0; i < polys.length; i++) {
points.push(polys[i].normal.point);
}
this.points = points;
this.fillColor = fillColor;
this.edgeColor = edgeColor;
}
function move(o3D, p3D) {
for (var i = 0; i < o3D.points.length - o3D.polys.length; i++) {
var point = o3D.points[i];
point.move(p3D);
}
}
function put(o3D, center) {
for (var i = 0; i < o3D.polys.length; i++) {
var poly = o3D.polys[i];
poly.put(center, o3D.fillColor, o3D.edgeColor);
}
}
function rotate(o3D, axis, angle) {
for (var i = 0; i < o3D.points.length; i++) {
var point = o3D.points[i];
point.rotate(axis, angle);
}
}
function init() {
canvas = document.getElementById('3Dcube');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, canvas.width, canvas.height); // clear canvas
cube1 = new Cube(25, new color(50, 50, 200, 1), new color(60, 60, 210, 1));
// move(cube, new point3D(-50, -50, -50));
// rotate(cube, 'x', 45);
// rotate(cube, 'y', 45);
// rotate(cube, 'z', 45);
move(cube1, new point3D(0, 0, 0));
rotate(cube1, 'x', 0);
rotate(cube1, 'y', 0);
rotate(cube1, 'z', 0);
centerScreen = new point2D(canvas.width / 2, canvas.height / 2);
put(cube1, centerScreen);
cube2 = new Cube(25, new color(200,200, 50, 1), new color(210, 210, 60, 1));
// move(cube, new point3D(-50, -50, -50));
// rotate(cube, 'x', 45);
// rotate(cube, 'y', 45);
// rotate(cube, 'z', 45);
move(cube2, new point3D(50, 50, 50));
rotate(cube2, 'x', 0);
rotate(cube2, 'y', 0);
rotate(cube2, 'z', 0);
centerScreen2 = new point2D(canvas.width / 2, canvas.height / 2);
put(cube2, centerScreen2);
timer = setInterval(nextFrame, 1000 / 60);
}
}
function nextFrame() {
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, canvas.width, canvas.height); // clear canvas
// rotate(cube, 'x', 0.4);
// rotate(cube, 'y', 0.6);
// rotate(cube, 'z', 0.3);
rotate(cube1, 'x', 0);
rotate(cube1, 'y', 0);
rotate(cube1, 'z', 0.5);
ctx.fillStyle = 'rgba(50, 50, 200, 1)';
ctx.strokeStyle = 'rgba(60, 60, 210, 1)';
put(cube1, centerScreen);
rotate(cube2, 'x', 0);
rotate(cube2, 'y', 0);
rotate(cube2, 'z', 0.5);
ctx.fillStyle = 'rgba(150, 50, 200, 1)';
ctx.strokeStyle = 'rgba(60, 160, 210, 1)';
put(cube2, centerScreen2);
}
</script>
<style type="text/css">
canvas {
border: 0px solid black;
}
</style>
</head>
<body onload="init();">
<h1>魔方复原（ HTML5 canvas 3D版）</h1>
<center>
<!--align="center" 居中，900刚好适合小米note-->
<canvas id="3Dcube" width="900" height="900"></canvas>
</center>
</body>
</html>
6 个回复
空谷红门 (作者)
HB开发魔方1（绘制canvas立方体，并旋转起来）
上述html源码阅读不便，dcloud网站又没有设置代码的编辑上传功能。另存为word文档附件，下载后自行复制修改。这是我的第一步。
空谷红门 (作者)
HB还不支持requestAnimationFrame
提示如下：
空谷红门 (作者)
原来可以上传代码块的！上面的word文档是多余的了！
zhaoyari
我喜欢模仿，强烈关注
zhaoyari
能给个联系方式吗
2015-09-02 10:14
空谷红门 (作者)
请教：这些提示说明什么？在小米note真机运行时提示，three.js版本是52
空谷红门 (作者)
浏览器运行显示皆正常。但真机测试又是这样烦人的失败提示，three.js库是64版的。谁能帮我下？