three.js画布，球体向右旋转或浮动

<canvas id="canvas"></canvas>

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var sphere = new THREE.Mesh(geometry, material);
sphere.position.x = 0; // 设置球体的初始位置
scene.add(sphere);

var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

function animate() {
    requestAnimationFrame(animate);
    
    // 球体旋转
    sphere.rotation.y += 0.01;
    
    // 球体浮动
    sphere.position.y = Math.sin(Date.now() * 0.001) * 0.5;
    
    renderer.render(scene, camera);
}

animate();