最近创建旅行星球的星球点亮页，需要在整个屏幕中创建一个可操作并且遵行自然规则的3D地球，哦，不对，星球 —— Travo Planet，本文记录下整个开发过程。

安装 threejs：

yarn add three

创建 Planet 类：

import THREE from 'three'

const defaultAspect = {
  width: window.innerWidth,
  height: window.innerHeight
}

const defaultOptions = {
  aspect: {
    ...defaultAspect
  }
}

export default class Planet {
  constructor (container, options = { ...defaultOptions }) {
    this.container = container
    this.options = {
      ...defaultOptions,
      ...options
    }

    this.init(container, options)
  }

init (container, options) {} 
}

之后的所有开发都将在这个文件中进行，要基于 ThreeJS 展示什么，我们至少需要三样东西：一个 scene，一个 camera 以及一个 renderer。

  init (container, options) {
    if (this.inited) {
      return this
    }

    const {
      aspect
    } = options

    const scene = this.scene = new THREE.Scene()
    const camera = this.camera = new THREE.PerspectiveCamera(45, aspect.width / aspect.height, 0.01, 1000)
    camera.position.z = 1.5

    const renderer = this.renderer = new THREE.WebGLRenderer()
    renderer.setSize(aspect.width, aspect.height)
  }

scene 的作用用来跟踪与展示我们需要展示的对象们，接下来添加光效，如下图所示，分别为：Ambient light、Directional light 以及 ·Ambient & Directional light`：

scene.add(new THREE.AmbientLight(0x333333))
const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
directionalLight.position.set(5, 3, 5)
scene.add(directionalLight)

安装极光插件

yarn add jpush-react-native jcore-react-native

链接插件

react-native link
# rnpm-install info Linking jcore-react-native ios dependency
# rnpm-install info Platform 'ios' module jcore-react-native has been successfully linked
# ? Input the appKey for JPush xxxxxxxxx
# patching android/settings.gradle...
# patching android/**/AndroidManifest.xml...
# patching android/**/build.gradle...
# patching ios/**/AppDelegate.m...
# done!
# rnpm-install info Linking jpush-react-native ios dependency
# rnpm-install info Platform 'ios' module jpush-react-native has been successfully linked
# rnpm-install info Platform 'android' module jpush-react-native is already linked

这一步操作会做下面这些操作：

在 android/settings.gradle 文件中添加下面这几行：

include ':jcore-react-native'
project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')

include ':jpush-react-native'
project(':jpush-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jpush-react-native/android')

在 android/app/build.gradle 文件里面添加

android {
  ...
  defaultConfig {
    manifestPlaceholders = [
       JPUSH_APPKEY: "xxxxxxxx",
       APP_CHANNEL : "default"
     ]
  }
  ...
}

在 android/app/src/main/AndroidManifest.xml 的 applicaiton 中添加两个 meta-data：

<meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}" />
<meta-data  android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}" />

在 ios/AppName/AppDelegate.m 中添加：

- (void)jpushNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(NSInteger))completionHandler
{
  NSDictionary * userInfo = notification.request.content.userInfo;
  if ([notification.request.trigger isKindOfClass:[UNPushNotificationTrigger class]]) {
    [JPUSHService handleRemoteNotification:userInfo];
    [[NSNotificationCenter defaultCenter] postNotificationName:kJPFDidReceiveRemoteNotification object:userInfo];
  }

  completionHandler(UNNotificationPresentationOptionAlert);
}

- (void)jpushNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)())completionHandler
{
  NSDictionary * userInfo = response.notification.request.content.userInfo;
  if ([response.notification.request.trigger isKindOfClass:[UNPushNotificationTrigger class]]) {
    [JPUSHService handleRemoteNotification:userInfo];
    [[NSNotificationCenter defaultCenter] postNotificationName:kJPFOpenNotification object:userInfo];
  }

  completionHandler();
}

手动配置

IOS

在 iOS 工程中设置 TARGETS-> BUILD Phases -> LinkBinary with Libraries 找到 UserNotifications.framework 把 status 设为 optional

在 iOS 工程中如果找不到头文件可能要在 TARGETS-> BUILD SETTINGS -> Search Paths -> Header Search Paths 添加如下路径：

$(SRCROOT)/../node_modules/jpush-react-native/ios/RCTJPushModule

在 xcode8 之后需要点开推送选项： TARGETS -> Capabilities -> Push Notification 设为 on 状态

删除原有 boost

sudo rm –rf /usr/local/include/boost
sudo rm –rf /usr/local/lib/libboost_*

brew uninstall boost

重新从官网下载 Boost

cd ./node_modules/react-native/third-party

查看 boost 版本号，从官方网站上面下载 boost https://www.boost.org/users/download/。

可以下载适合你的版本。

替换 .rncache 目录下面的 boost 包

将下载的 boost 包复制至 .rncache 目录下，解压该文件，

cd ./boost_1_63_0
./booststrap.sh
sudo ./b2 install

再次尝试应该是可以了

react-native run-ios

如果还不行的话，可以试试直接将 /opt/local/include/boost 复制至 ./node_modules/react-native/third-party 目录下。

往年的这个时候都会去北京城的各个红叶黄叶区去拍拍照，今年没有去什么人多的地方，只是在现在住的地方周边转了一下，那天下了点小雨，一个人背着相机瞎转，秋天伴着细雨落下来，安静的躺在路上，水泥就在脚下，它们已经无法归根……

- 阅读剩余部分 -