一、Three.js基础场景搭建（Python+JavaScript混合开发）

1.1 三维场景初始化

# 后端服务（FastAPI提供模型数据接口）
from fastapi import FastAPI
app = FastAPI()

@app.get("/scene_config")
def get_scene_config():
    return {
        "ground_size": 100,
        "sky_color": "#87CEEB",
        "objects": [
            {"type": "tree", "position": [10,0,5]},
            {"type": "rock", "position": [-5,0,8]}
        ]
    } 

// 前端Three.js场景初始化
import * as THREE from 'three';

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

// 从Python接口获取配置
fetch('http://localhost:8000/scene_config')
  .then(res => res.json())
  .then(config => {
    scene.background = new THREE.Color(config.sky_color);
    addGround(config.ground_size);
    loadObjects(config.objects);
  });

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

1.2 基础几何体生成

function addGround(size) {
    const geometry = new THREE.PlaneGeometry(size, size);
    const material = new THREE.MeshPhongMaterial({ color: 0x228B22 });
    const ground = new THREE.Mesh(geometry, material);
    ground.rotation.x = -Math.PI / 2;
    scene.add(ground);
} 

二、虚拟人物控制逻辑实现（WASD移动控制）

2.1 人物模型加载

let avatar;
const loader = new THREE.GLTFLoader();
loader.load('avatar.glb', function(gltf) {
    avatar = gltf.scene;
    scene.add(avatar);
});

// 键盘事件监听
const moveSpeed = 0.1;
document.addEventListener('keydown', (e) => {
    switch(e.key.toLowerCase()) {
        case 'w': avatar.position.z -= moveSpeed; break;
        case 's': avatar.position.z += moveSpeed; break;
        case 'a': avatar.position.x -= moveSpeed; break;
        case 'd': avatar.position.x += moveSpeed; break;
    }
}); 

2.2 碰撞检测实现

# 后端碰撞检测服务
from pydantic import BaseModel

class CollisionCheckRequest(BaseModel):
    position: list[float]
    direction: str

@app.post("/check_collision")
def check_collision(data: CollisionCheckRequest):
    # 此处实现碰撞检测逻辑
    return {"collision": False} 

三、多用户交互通信方案（WebSocket实时同步）

3.1 WebSocket服务端（Python）

from fastapi import WebSocket

class ConnectionManager:
    def __init__(self):
        self.active_connections = []

    async def broadcast(self, message: str):
        for connection in self.active_connections:
            await connection.send_text(message)

manager = ConnectionManager()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    manager.active_connections.append(websocket)
    while True:
        data = await websocket.receive_text()
        await manager.broadcast(data) 

3.2 前端实时同步

const ws = new WebSocket('ws://localhost:8000/ws');

// 发送位置更新
setInterval(() => {
    const pos = avatar.position.toArray();
    ws.send(JSON.stringify({type: 'position', data: pos}));
}, 100);

// 接收其他用户数据
ws.onmessage = (event) => {
    const msg = JSON.parse(event.data);
    if(msg.type === 'position') {
        updateOtherUserPosition(msg.data);
    }
} 

四、NFT资产接入演示（ERC-721标准实现）

4.1 智能合约交互

from web3 import Web3

w3 = Web3(Web3.HTTPProvider('https://ropsten.infura.io/v3/YOUR_KEY'))

contract_address = '0x123...'
abi = [...]  # ERC721 ABI

nft_contract = w3.eth.contract(address=contract_address, abi=abi)

def get_user_nfts(address):
    balance = nft_contract.functions.balanceOf(address).call()
    return [nft_contract.functions.tokenOfOwnerByIndex(address, i).call() 
            for i in range(balance)] 

4.2 3D模型绑定NFT

function loadNFTModel(tokenId) {
    fetch(`/nft_metadata/${tokenId}`)
        .then(res => res.json())
        .then(metadata => {
            const modelUrl = metadata.model_url;
            loader.load(modelUrl, function(gltf) {
                const nftObj = gltf.scene;
                scene.add(nftObj);
            });
        });
} 

五、WebXR跨设备适配技巧（VR/AR通用方案）

5.1 XR场景初始化

let xrSession;

async function startXR() {
    const sessionInit = { optionalFeatures: ['local-floor'] };
    xrSession = await navigator.xr.requestSession('immersive-vr', sessionInit);
    
    renderer.xr.setSession(xrSession);
    renderer.setAnimationLoop(render);
}

function render() {
    // VR渲染逻辑
    renderer.render(scene, camera);
} 

5.2 设备自适应布局

/* 响应式设计 */
.xr-canvas {
    position: fixed;
    width: 100vw;
    height: 100vh;
}

@media (max-width: 768px) {
    .control-panel {
        transform: scale(0.8);
    }
}

@media (hover: none) {
    /* 触控设备样式 */
    .joystick {
        display: block;
    }
} 

六、元宇宙系统架构全景图

复制代码技术架构：
1. 展示层：Three.js + WebXR
2. 交互层：WebSocket + REST API
3. 逻辑层：Python FastAPI服务
4. 区块链层：以太坊智能合约
5. 持久层：IPFS分布式存储

结语：打开虚拟世界的大门

通过本文可以掌握：

1. 三维场景构建基础
2. 多用户实时交互原理
3. NFT资产集成方法
4. 跨设备适配技巧

# 启动完整服务
if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000) 

读者实践建议：

1. 使用Blender制作自定义3D模型
2. 在OpenSea测试网铸造实验性NFT
3. 通过WebXR模拟器测试不同设备
4. 使用Socket.io优化实时通信性能

元宇宙不是终点，而是新的起点。现在就开始构建属于你的虚拟世界吧！