three.js实现旋转小球
时间: 2023-11-06 13:05:45 浏览: 149
three.js实现的小球周围光源旋转动画效果源码.zip
好的,以下是用 three.js 实现旋转小球的代码:
```javascript
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体
var geometry = new THREE.SphereGeometry(1, 32, 32);
// 创建材质
var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
// 创建网格并添加到场景中
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// 设置相机位置
camera.position.z = 5;
// 渲染场景
function render() {
requestAnimationFrame(render);
// 使小球旋转
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
```
以上代码会创建一个白色的小球,并使其在每一帧旋转一定的角度,从而呈现旋转的效果。你可以根据需要自定义小球的大小、颜色、旋转速度等属性。
阅读全文