实战准备

引入

官网下载three.min.js库或使用CDN引入

<script src="three.min.js"></script>

公共方法

// 交互：鼠标拖动旋转
function addMouseDragging(renderer, node_3d) {
    let isDragging = false;
    let previousMousePosition = {x: 0, y: 0};

    renderer.domElement.addEventListener('mousedown', (e) => {
        e.preventDefault();
        e.stopPropagation();
        isDragging = true;
    });

    renderer.domElement.addEventListener('mousemove', (e) => {
        e.preventDefault();
        e.stopPropagation();
        if (isDragging) {
            const deltaMove = {
                x: e.offsetX - previousMousePosition.x,
                y: e.offsetY - previousMousePosition.y
            };
            node_3d.rotation.y += deltaMove.x * 0.01;
            node_3d.rotation.x += deltaMove.y * 0.01;
        }
        previousMousePosition = {x: e.offsetX, y: e.offsetY};
    });

    renderer.domElement.addEventListener('mouseup', () => {
        isDragging = false;
    });
}

// 交互：滚轮放大缩小
function addMouseWheel(renderer, camera) {
    renderer.domElement.addEventListener('wheel', (e) => {
        e.preventDefault();
        e.stopPropagation();
        const delta = e.deltaY || e.wheelDelta;  // 获取滚轮方向
        if (delta < 0) {
            // camera.zoom *= 1.1;  // 放大
            camera.position.z -= 1;
        } else {
            // camera.zoom /= 1.1;  // 缩小
            camera.position.z += 1;
        }
        camera.updateProjectionMatrix();
    });
}