React-three-fiber: Unable to run example

[brandonreid]

Hi there,

I tried to just fire up the example but am running into some issues.

Steps to reproduce:

1. npm init react-app three-js-play
2. cd three-js-play
3. yarn add react-three-fiber --save
4. yarn start
5. Added code from the example to my src/App.js file:

import * as THREE from 'three';
import React from 'react';
import ReactDOM from 'react-dom'
import { Canvas } from 'react-three-fiber'

import './App.css';

function Thing({ vertices, color }) {
  return (
    <group ref={ref => console.log('we have access to the instance')}>
      <line>
        <geometry
          attach="geometry"
          vertices={vertices.map(v => new THREE.Vector3(...v))}
          onUpdate={self => (self.verticesNeedUpdate = true)}
        />
        <lineBasicMaterial attach="material" color="black" />
      </line>
      <mesh 
        onClick={e => console.log('click')} 
        onPointerOver={e => console.log('hover')} 
        onPointerOut={e => console.log('unhover')}>
        <octahedronGeometry attach="geometry" />
        <meshBasicMaterial attach="material" color="peachpuff" opacity={0.5} transparent />
      </mesh>
    </group>
  )
}

function App() {
  return (
    <Canvas>
      <Thing vertices={[[-1, 0, 0], [0, 1, 0], [1, 0, 0], [0, -1, 0], [-1, 0, 0]]} />
    </Canvas>
  );
}

export default App;

Result:

Module not found: Can't resolve 'three' in '/Users/brandonreid/Documents/random-code-stuff/three-js-play/node_modules/react-three-fiber/dist'

This is probably something simple that I don't know about, but at least it will be here if others like myself get lost.

p.s.
If I change the import to import * as THREE from 'react-three-fiber/dist'; I get....

Attempted import error: 'Vector3' is not exported from 'react-three-fiber/dist' (imported as 'THREE').

[ryanking1809]

You need to install three.js - yarn add three

[drcmda]

three's marked as a peer dependency, should have complained about it when you first npm install. but i'll add it to the docs.

[brandonreid]

That did it. Many thanks guys. I'll let you close this at will.