# Jump

**Repository Path**: firfe/Jump

## Basic Information

- **Project Name**: Jump
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 17
- **Created**: 2025-05-03
- **Last Updated**: 2025-08-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# finish

## 介绍
以下是 Three.js实现跳一跳

## 部署说明

当前汉化仅适用于 版本：

首先感谢原作者的开源。[原项目地址](https://gitee.com/fwjzzz/Jump)

有需要帮忙部署这个项目的朋友,一杯奶茶,即可程远程帮你部署，需要可联系。  
微信号 `E-0_0-`  
闲鱼搜索用户 `明月人间`  
或者邮箱 `firfe163@163.com`  
如果这个项目有帮到你。欢迎start。

有其他的项目的汉化需求，欢迎提issue。或其他方式联系通知。

### 镜像

从阿里云或华为云镜像仓库拉取镜像，注意填写镜像标签，镜像仓库中没有`latest`标签

容器内部端口 3000

```bash
docker pull swr.cn-north-4.myhuaweicloud.com/firfe/jump:2025.05.03
```

### docker run 命令部署

```bash
docker run -d \
--name jump \
--network bridge \
--restart always \
--log-opt max-size=1m \
--log-opt max-file=3 \
-p 3000:3000 \
swr.cn-north-4.myhuaweicloud.com/firfe/jump:2025.05.03
```
### compose 文件部署 👍推荐

```yaml
#version: '3.9'
services:
  jump:
    container_name: jump
    image: swr.cn-north-4.myhuaweicloud.com/firfe/jump:2025.05.03
    network_mode: bridge
    restart: always
    logging:
      options:
        max-size: 1m
        max-file: '3'
    ports:
      - 3000:3000
```

## 修改说明

这里对除了汉化之外的代码修改的说明。  
增加修改部分具体见 [修改说明](./修改说明.md)。

`./README.md` 文件翻译，增加 `## 部署说明`、`## 修改说明`、`## 效果截图` 部分。

增加目录 `./图片`
新增文件 `./.dockerignore`、`./Dockerfile`、`./修改说明.md`

## 效果截图

<img src="图片/效果图.png" width="500" />


## 教程
 
```js
 //1.场景
  let scene=new THREE.Scene();
  //创建一个场景
  //2.相机
  let camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
  //创建一个透视相机 4个参数（视觉范围，宽高比例，距离，远距离）
  camera.position.z=10;
  //z轴 距离越远看到的越小
  camera.position.y=3;
  //y轴 上
  camera.position.x=8;
  //x轴 右
  
  //3.几何体
  let geometry=new THREE.CubeGeometry(4,2,4);
  //创建一个几何体对象 （宽，高，深度）
  let material=new THREE.MeshLambertMaterial({color:0xbebebe});
  //创建了一个可以用于立方体的材质,对象包含了颜色、透明度等属性，
  let cube=new THREE.Mesh(geometry,material);
  //结合在一起
  cube.position.x=16;
  scene.add(cube);
  //添加到场景中
  
  //光照
  let directionalLight=new THREE.DirectionalLight(0xffffff,1.1);
  //平行光  （颜色，强度)
  directionalLight.position.set(3,10,5);
  //平行光位置
  scene.add(directionalLight);
  //在场景中加入平行光
  let light=new THREE.AmbientLight(0xffffff,0.4);
  //光的材质
  scene.add(light);
  //4.渲染器
  let renderer=new THREE.WebGLRenderer({antialias:true});
  //创建一个渲染器 （让边缘动画没有锯齿感）
  renderer.setSize(window.innerWidth,window.innerHeight);
  // 画布宽高
  renderer.setClearColor(0x282828);
  //修改画布颜色
  renderer.render(scene,camera);
  //渲染场景相机 （后续更新也是这里）
  document.body.appendChild(renderer.domElement);
  //把当前渲染的画布放到body里面
  let x=8;
  function render() {
	  //递归
    x-=0.1;
    camera.position.x=x;
    renderer.render(scene,camera);
	//更新重新渲染
    if(x>=-8){
	//满足当前条件
      requestAnimationFrame(render)
	  //循环渲染
    }
  }
  //render();
```


#### 使用说明

下载点击HTML文件即可