# threejs-http-example

**Repository Path**: szmars/threejs-http-example

## Basic Information

- **Project Name**: threejs-http-example
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-28
- **Last Updated**: 2024-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

由于项目需要，研究了一下 3D模型在前端页面展示并交互的技术方案。

这里的交互包含：

* 主动事件：鼠标，键盘，触摸
* 被动事件：定时，网络


# 设计一下被动事件的网络交互：


![3D模型交互.drawio.png](assets/3D模型交互.drawio-20240828143017-26qhcrh.png)


# 写个代码测试一下

## 业务数据服务器代码：

server.js

```$hWnd
const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;

app.use(cors());
app.use(express.static('public'));

// 生成随机颜色的函数
function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

app.get('/api/getCubeData', (req, res) => {
    const cubeData = {
        color: getRandomColor(), // 每次请求生成随机颜色
        position: {
            x: Math.random() * 4 - 2,
            y: Math.random() * 4 - 2,
            z: Math.random() * 4 - 2
        }
    };
    res.json(cubeData);
});

app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

```


## 3D模型渲染服务器代码：

app.js

```$hWnd
import * as THREE from './three/build/three.module.js';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 渲染函数
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

// HTTP请求函数，用于获取新的立方体颜色和位置
function fetchCubeData() {
    fetch('http://127.0.0.1:3000/api/getCubeData')
        .then(response => response.json())
        .then(data => {
            // 更新立方体颜色
            cube.material.color.set(data.color);

            // 更新立方体位置
            cube.position.set(data.position.x, data.position.y, data.position.z);
        })
        .catch(error => console.error('Error fetching cube data:', error));
}


// 初始调用一次，模拟定时调用或用户触发
fetchCubeData();

// 模拟定时请求，每隔5秒更新一次立方体
setInterval(fetchCubeData, 5000);

```


# 测试视频：

演示一个3D方块收到业务数据服务器的更改方块颜色和位置的交互信息

![](assets/output.gif)


# 代码仓库:

[mars/threejs-http-example - 码云 - 开源中国 (gitee.com)](https://gitee.com/szmars/threejs-http-example)


# 备注:

要将3D模型嵌入到Web前端，可以通过以下步骤实现：

1. 选择合适的3D模型格式：首先，需要选择一个适合Web的3D模型格式，常见的格式有glTF、FBX、OBJ等。其中，glTF是一种支持在Web上显示的开放标准格式，具有较小的文件大小和较快的加载速度，因此推荐使用glTF格式。
2. 导入3D模型到前端项目：将所选的3D模型文件导入到前端项目中，可以将模型文件放置在项目的静态资源目录中。可以使用外部库或框架来处理3D模型的导入，如Three.js、Babylon.js等。
3. 创建一个3D场景：使用库或框架的API，创建一个3D场景，并将导入的3D模型添加到场景中。可以设置模型的位置、旋转、大小等属性，以使其在场景中正确显示。
4. 添加交互功能：根据需要，为3D模型添加交互功能，例如旋转、缩放、点击事件等。可以使用JavaScript来监听用户的交互操作，并相应地改变模型的属性。
5. 渲染和显示3D场景：最后，使用库或框架的渲染引擎将3D场景渲染到Web前端页面上。通过Canvas、WebGL等技术，将3D模型呈现在用户的浏览器中。