React.jsにthree.jsぶっこむぞ - 超平面あのにのに

「背景でWebGLがぬるぬる動くWebサイト作りたいぞ！」

って思ったときに、ページ遷移する度に背景再描画されるのすっごくイケてなさみがある。結局SPAっぽく使うことになるんだとおもった。ということでReact.jsでthree.jsを使うパッケージつかう。

import React from 'react';
import React3 from 'react-three-renderer';
import THREE from 'three';

export default class HomePage extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.cameraPosition = new THREE.Vector3(0, 0, 100);

    this.state = {
      cubeRotation: new THREE.Euler(),
    };

    this._onAnimate = () => {
      this.setState({
        cubeRotation: new THREE.Euler(
          this.state.cubeRotation.x + 0.004,
          this.state.cubeRotation.y + 0.002,
          0
        ),
      });
    };
  }
  render() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    return (<React3
      mainCamera="camera"
      width={width}
      height={height}

      onAnimate={this._onAnimate}
    >
      <scene>
        <perspectiveCamera
          name="camera"
          fov={75}
          aspect={width / height}
          near={0.1}
          far={1000}

          position={this.cameraPosition}
        />
        <mesh
          rotation={this.state.cubeRotation}
        >
          <torusGeometry
            radius = {50}
            tube = {10}
            radialSegments = {10}
            tubularSegments = {20}
            arc = {Math.PI * 2}
          />
          <meshNormalMaterial
            wireframe = {true}
          />
        </mesh>
      </scene>
    </React3>);
  }
}

f:id:anoChick:20161101054634g:plain