three实现三维投影仪客厅场景效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维投影仪客厅场景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三维客厅投影仪场景</title>
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { overflow: hidden; background: #000; font-family: 'Microsoft YaHei', sans-serif; }
    canvas { display: block; }

    #info {
        position: fixed;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255,255,255,0.7);
        font-size: 13px;
        z-index: 10;
        text-align: center;
        pointer-events: none;
        text-shadow: 0 1px 4px rgba(0,0,0,0.8);
        letter-spacing: 1px;
    }

    #controls {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        z-index: 10;
        flex-wrap: wrap;
        justify-content: center;
    }
    #controls button {
        padding: 8px 18px;
        background: rgba(30,30,30,0.85);
        color: #ddd;
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
        transition: 0.2s;
        backdrop-filter: blur(6px);
    }
    #controls button:hover { background: rgba(80,80,80,0.9); color: #fff; }
    #controls button.active { background: rgba(60,120,200,0.8); border-color: rgba(100,160,255,0.5); color: #fff; }

    .loading {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        color: #888;
        font-size: 18px;
        flex-direction: column;
        gap: 16px;
        transition: opacity 0.8s;
    }
    .loading.hidden { opacity: 0; pointer-events: none; }
    .spinner {
        width: 40px; height: 40px;
        border: 3px solid rgba(255,255,255,0.1);
        border-top-color: #68a;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>

<div class="loading" id="loading">
    <div class="spinner"></div>
    <div>正在构建三维客厅...</div>
</div>

<div id="info">鼠标拖拽旋转 · 滚轮缩放 · 右键平移 · 点击按钮切换视角与画面</div>

<div id="controls">
    <button onclick="switchView('free')" class="active" id="btn-free">自由视角</button>
    <button onclick="switchView('front')">正面观影</button>
    <button onclick="switchView('side')">侧面视角</button>
    <button onclick="switchView('top')">俯瞰全景</button>
    <button onclick="switchView('projector')">投影仪视角</button>
    <button onclick="switchImage()">切换画面</button>
    <button onclick="toggleProjector()">开关投影</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// ========= 全局变量 =========
let scene, camera, renderer, clock;
let projectorLight, projectorCone, screenMesh;
let projectorOn = true;
let currentImageIndex = 0;
let screenTextures = [];
let animTarget = null;
let isAnimating = false;

// 房间尺寸
const ROOM_W = 12, ROOM_H = 5, ROOM_D = 10;

// ========= 初始化 =========
function init() {
    clock = new THREE.Clock();
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x0a0a0a);
    scene.fog = new THREE.Fog(0x0a0a0a, 20, 40);

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(0, 3, 8);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 0.8;
    renderer.outputEncoding = THREE.sRGBEncoding;
    document.body.appendChild(renderer.domElement);

    createScreenTextures();
    createRoom();
    createFurniture();
    createProjector();
    createProjectorBeam();
    createLights();
    createDecorations().........完整代码请登录后点击上方下载按钮下载查看