以下是一个简单的html5旋转代码，引入Three.js 旋转水杯的代码，用html代码演示效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Three.js 旋转水杯</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://dm.qunapu.com/threejs/build/three.min.js"></script>
<script>
var camera, scene, renderer;
var cup;
init();
animate();
function init() {
// 创建场景对象
scene = new THREE.Scene();
// 创建相机对象
camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.set(0, 0, 10);
// 创建渲染器
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体
var geometry = new THREE.CylinderGeometry(2, 2, 4, 20, 1, false);
var material = new THREE.MeshNormalMaterial();
cup = new THREE.Mesh(geometry, material);
scene.add(cup);
}
function animate() {
// 循环动画
requestAnimationFrame(animate);
// 旋转水杯
cup.rotation.x += 0.01;
cup.rotation.y += 0.01;
// 渲染场景和相机
renderer.render(scene, camera);
}
</script>
</body>
</html>
- `window.innerWidth` 和 `window.innerHeight`：用于设置相机视锥体的宽度和高度。
- `camera.position.set(0, 0, 10);`：设置相机位置。
- `renderer.setPixelRatio(window.devicePixelRatio);`：设置渲染器的设备像素比。
- `var geometry = new THREE.CylinderGeometry(2, 2, 4, 20, 1, false);`：创建一个圆柱几何体对象，前两个参数分别设置上下底面的半径，第三个参数设置高度，第四个参数设置圆柱面的分段数，第五个参数设置顶部是否封口，第六个参数设置是否朝上。
- `var material = new THREE.MeshNormalMaterial();`：创建材质对象，使用 MeshNormalMaterial 材质。
- `cup = new THREE.Mesh(geometry, material);`：创建网格对象，将几何体和材质传递给它。
- `cup.rotation.x += 0.01; cup.rotation.y += 0.01;`：每帧改变水杯的旋转角度。
效果图截图：
专题推荐：