当前位置：首页 > JavaScript

js实现球

2026-02-02 04:43:57JavaScript

实现球体的3D渲染

在JavaScript中实现球体的3D渲染可以通过WebGL或Three.js等库完成。以下是使用Three.js创建简单球体的示例代码：

// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建球体几何体
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

camera.position.z = 5;

// 动画循环
function animate() {
    requestAnimationFrame(animate);
    sphere.rotation.x += 0.01;
    sphere.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

纯JavaScript实现2D圆形

如果不使用任何库，可以通过Canvas API绘制2D圆形：

js实现球

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制圆形
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.stroke();

球体的物理模拟

实现球体的物理运动需要考虑重力、弹性和摩擦力：

let x = 100;
let y = 100;
let radius = 30;
let velocityY = 0;
const gravity = 0.5;
const bounce = -0.7;

function update() {
    velocityY += gravity;
    y += velocityY;

    // 检测地面碰撞
    if(y + radius > canvas.height) {
        y = canvas.height - radius;
        velocityY *= bounce;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.stroke();

    requestAnimationFrame(update);
}

update();

球体的3D数学表示

在3D空间中，球体的数学表示方程为： (x - x₀)² + (y - y₀)² + (z - z₀)² = r²

js实现球

其中(x₀, y₀, z₀)是球心坐标，r是半径。

球体纹理贴图

Three.js中可以为球体添加纹理：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture.jpg');

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({map: texture});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

标签: js