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