我正在尝试创建一个时钟设计并根据鼠标移动视图添加 3D 拖动，就像这支笔一样
文字
虽然上面的笔使用了一个名为 Zdog 的库，但我也尝试将其添加到我的代码中，但我没有找到方法。
我的时钟设计正面有一个前视图和一个后视图，其中包含图像和秒、小时、分钟，看起来像时钟。我希望默认显示正面，并且随着鼠标的移动，背面以 3D 方式显示，就像上面的笔一样。
我的代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Clock Design</title>
<link rel="stylesheet" href="clock.css">
</head>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0
}
body {
display: flex;
justify-content: center;
align-items: center;
background: orange;
}
/* the front should show by default */
.clock {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
height:280px;
min-width: 279px;
background:url('https://i.imgur.com/jTq94k2.png') #FBC000;
background-size: cover;
border-radius: 50%;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 30px 45px,
rgba(0, 0, 0, 0.2) 1px 22px 18px;
border:22px solid #FBD309;
overflow: hidden;
}
/* the back face */
.clock-back{
height:280px;
width:278px;
background:url('https://i.imgur.com/8rMtgzY.png') #FBC000;
background-size: 100%;
background-position: center;
background-size: contain;
border-radius: 50%;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 30px 45px,
rgba(0, 0, 0, 0.2) 1px 22px 18px;
border:22px solid #FBD309;
overflow: hidden;
}
.clock::before{
content:'';
position: absolute;;
width: 11px;
height:11px;
background:#42a5f5;
border-radius: 50%;
z-index: 10;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 30px 45px;
}
.hour, .minute, .second{
position: absolute;
}
.hour, .hr{
box-shadow: rgba(0, 0, 0, 0.2) 0px 30px 45px;
height: 101px;
width:101px;
justify-content: center;
display: flex;
}
.hr::before{
content:'';
position: absolute;
width:7px;
height:51px;
background: black;
border-radius: 6px 6px 0 0;
}
.minute, .min{
height: 120px;
width:120px;
justify-content: center;
display: flex;
}
.min::before{
content:'';
position: absolute;
width:5px;
height:66px;
background: blue;
border-radius: 6px 6px 0 0;
}
.second, .sec{
height: 151px;
width:151px;
justify-content: center;
display: flex;
}
.sec::before{
content:'';
position: absolute;
width:1px;
height:100px;
background: red;
border-radius: 6px 6px 0 0;
}
</style>
<body>
<div class="clock front">
<div class="hour">
<div class="hr"></div>
</div>
<div class="minute">
<div class="min"></div>
</div>
<div class="second">
<div class="sec"></div>
</div>
</div>
<div class="clock-back">
</div>
<script>
const hr = document.querySelector('.hr');
const min = document.querySelector('.min');
const sec = document.querySelector('.sec');
setInterval(()=>{
let today= new Date();
let hours = today.getHours()*30;
let mins = today.getMinutes()*6;
let secs = today.getSeconds()*6;
hr.style.transform = `rotateZ(${hours+(mins/12)}deg)`;
min.style.transform = `rotateZ(${mins}deg)`;
sec.style.transform = `rotateZ(${secs}deg)`;
})
</script>
</body>
</html>
我一直在探索 Zdog 库，但我正在努力调整现有代码以将 Zdog 用于 3d 视图。我尝试过为时钟的正面和背面以及时针、分针和秒针创建 Zdog 形状，但我没有再次找到方法。还有其他方法可以实现此功能吗？.
任何帮助或建议都将非常感激。谢谢！
到目前为止，您已经取得了非常好的进展，但我从未将 Zdog 用于 3D，即使 它是用于和 SVG 的 3D JavaScript 引擎。 对于 3D，我一直使用 Three.js。它只是更适合复杂且逼真的 3D 项目。您可以在他们的网站上看到可能的演示。
但是，如果你真的想使用 Zdog，你必须知道如何解决它。例如，如果您只想在 3D 空间中创建一个圆，则必须编写以下代码...
let illo = new Zdog.Illustration({
element: '.zdog-canvas',
dragRotate: true,
});
// circle
new Zdog.Ellipse({
addTo: illo,
diameter: 80,
stroke: 20,
color: '#636',
});
function animate() {
illo.rotate.y += false ? 0.03 : 0;
illo.updateRenderGraph();
requestAnimationFrame( animate );
}
animate();
您必须使用 zdog-canvas 类定义画布，如下所示，
<canvas class="zdog-canvas"></canvas>您可以在 Irradiance 的 YouTube 频道上观看这个使用 Three.js 制作 3D 时钟的示例
您可以在此 codepen 集合上看到很多使用 Zdog 的示例。。 我过去用 Three.js 做过一些事情，制作一个时钟对我来说只是一个额外的练习。所以，如果你想学，那么无论花多长时间，你都必须自己学。如果您有客户和截止日期，那么我可以提供帮助！请在下面评论您的情况。