expo-three 项目教程

expo-three 项目教程

expo-threeUtilities for using THREE.js on Expo项目地址:https://gitcode.com/gh_mirrors/ex/expo-three

1. 项目的目录结构及介绍

expo-three 项目的目录结构如下：

expo-three/
├── example/
│   ├── App.js
│   ├── app.json
│   ├── assets/
│   ├── babel.config.js
│   ├── package.json
│   └── yarn.lock
├── src/
│   ├── GLView.js
│   ├── Renderer.js
│   └── index.js
├── .gitignore
├── .npmignore
├── .prettierrc
├── README.md
├── package.json
└── yarn.lock

目录结构介绍

• example/: 包含示例应用的代码和配置文件。

  • App.js: 示例应用的主文件。
  • app.json: 示例应用的配置文件。
  • assets/: 存放示例应用的资源文件。
  • babel.config.js: Babel 配置文件。
  • package.json: 示例应用的依赖管理文件。
  • yarn.lock: 锁定依赖版本。

• src/: 包含 expo-three 的核心代码。

  • GLView.js: 用于渲染 WebGL 的视图组件。
  • Renderer.js: 渲染器组件。
  • index.js: 入口文件。

• 根目录下的文件：

  • .gitignore: Git 忽略文件配置。
  • .npmignore: npm 忽略文件配置。
  • .prettierrc: Prettier 代码格式化配置。
  • README.md: 项目说明文档。
  • package.json: 项目依赖管理文件。
  • yarn.lock: 锁定依赖版本。

2. 项目的启动文件介绍

项目的启动文件是 example/App.js，它是示例应用的主文件。以下是 App.js 的简要介绍：

import React from 'react';
import { GLView } from 'expo-gl';
import ExpoTHREE from 'expo-three';
import * as THREE from 'three';

export default class App extends React.Component {
  render() {
    return (
      <GLView
        style={{ flex: 1 }}
        onContextCreate={this._onGLContextCreate}
      />
    );
  }

  _onGLContextCreate = async (gl) => {
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      gl.drawingBufferWidth / gl.drawingBufferHeight,
      0.1,
      1000
    );
    // 创建渲染器
    const renderer = new ExpoTHREE.Renderer({ gl });
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

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

    camera.position.z = 5;

    const animate = () => {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
      gl.endFrameEXP();
    };

    animate();
  };
}

启动文件介绍

• App.js 是一个 React 组件，使用 GLView 组件来创建一个 WebGL 上下文。
• onContextCreate 方法在 WebGL 上下文创建时被调用，初始化场景、相机和渲染器。
• 添加了一个旋转的立方体作为示例。

3. 项目的配置文件介绍

项目的配置文件主要包括 example/app.json 和 example/package.json。

example/app.json

app.json 是 Expo 应用的配置文件，包含应用的基本信息和配置选项。以下是简要内容：

{
  "expo": {

expo-threeUtilities for using THREE.js on Expo项目地址:https://gitcode.com/gh_mirrors/ex/expo-three