[已解决]怎么实现3D几何体旋转效果？

陶远航 · 发表于 2023-10-2 21:23:43

要在网页中实现 3D 几何体旋转效果，可以使用 CSS3 中的 transform 属性。通过设置 transform 属性中的 rotateX()、rotateY()、rotateZ() 等函数，可以对 HTML 元素进行不同轴向的旋转操作。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D Transform Demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden; /* 隐藏滚动条 */
}
.container {
width: 100vw;
height: 100vh;
perspective: 1000px; /* 远近程度为 1000px */
background-color: #333;
}
.cube {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
transform-style: preserve-3d;
animation: rotate 6s linear infinite;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #fff;
line-height: 200px;
text-align: center;
font-size: 36px;
color: #333;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
}
@keyframes rotate {
from { transform: rotateX(0) rotateY(0) rotateZ(0); }
to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face right">Right</div>
<div class="face left">Left</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</div>
</body>
</html>

复制代码

在上面的示例代码中，我们使用 CSS3 的 perspective 属性来设置透视视图，让元素在远近程度上有所变化，从而形成 3D 效果。接着，我们创建一个容器元素 .container 和一个立方体元素 .cube， .cube 包含六个面元素 .face，每个面都是一个矩形，并且面的位置和旋转角度通过 transform 属性进行设置。

我们还使用 CSS3 的 animation 属性来创建一个旋转动画，使立方体元素沿着 x、y、z 轴不停旋转。这样，当用户打开该网页时，就可以看到 3D 效果的立方体在不停旋转了。

你可以将上述代码复制到文本编辑器中，并将文件后缀名保存为 .html，然后在浏览器中打开该 HTML 文件，就可以看到 3D 效果的立方体了。
如果问题已经解决，请设置最佳答案

陶远航 · 发表于 2023-10-2 21:27:23

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D Rotating Cube</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建立方体几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建立方体并添加到场景
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 更新立方体旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染场景和相机
renderer.render(scene, camera);
}
// 开始动画循环
animate();
// 调整窗口大小
window.addEventListener('resize', function () {
const width = window.innerWidth;
const height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
</script>
</body>
</html>

复制代码

陶远航 · 发表于 2023-10-2 21:31:13

琅琊王朝发表于 2023-10-2 21:29
人类？

嗯，你看看可以吗

陶远航 · 发表于 2023-10-2 21:37:34

琅琊王朝发表于 2023-10-2 21:32
e，不太可以，如果非要选的话肯定选你，但你能看下人家网站再说嘛？

我添加了阴影效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D Rotating Cube with Shadows</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
scene.add(cube);
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
light.castShadow = true;
scene.add(light);
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', function () {
const width = window.innerWidth;
const height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
</script>
</body>
</html>

复制代码

如果还不够接近，我可以继续改...

陶远航 · 发表于 2023-10-2 21:54:42

算了，懒得搞了，我刚才直接去找网站的js没找到

账号		自动登录	找回密码
密码			立即注册

[已解决]怎么实现3D几何体旋转效果？

浏览过的版块