Socket
Socket
Sign inDemoInstall

three-transform-controls

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    three-transform-controls

Transform Controls as a NPM package


Version published
Weekly downloads
219
decreased by-17.36%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

three-transform-controls

ThreeJS TransformControls as an npm module. See example with react-three-renderer.

Alt Text

Install

npm install three-transform-controls

Example

import React, { Component } from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import ReactDOM from 'react-dom';

var TransformControls = require('../controls/TransformControls')(THREE);

export default class Example extends Component {
  constructor(props, context) {
    super(props, context);

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

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

    this._onAnimate = () => {
      // we will get this callback every frame
    };
  }


  componentDidMount() {

    var material = new THREE.MeshBasicMaterial({
      color: "#1300FF",
      transparent: true,
      depthWrite: false
    });

    var object = new THREE.Object3D();
    var plane = new THREE.Mesh(new THREE.PlaneGeometry(25, 5), material);
    var control = new TransformControls(this.refs.camera, ReactDOM.findDOMNode(this.refs.react3));
    //control.addEventListener('change', render);
    control.attach( plane);
    object.add(control);
    object.add(plane);
    

    this.refs.group.add(object);
  }


  render() {
    const width = window.innerWidth; // canvas width
    const height = window.innerHeight; // canvas height

    return (
      <React3
        mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below
        width={width}
        height={height}
        ref="react3"
        onAnimate={this._onAnimate}
        antialias
        alpha={false}
      >
        <module
          ref="mouseInput"
          descriptor={MouseInput}
        />

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

          <group ref='group' />
          <gridHelper
            size={10}
            colorGrid={"#040404"}
          />

          <mesh
            rotation={this.state.cubeRotation}
          >
            <boxGeometry
              width={1}
              height={1}
              depth={1}
            />
            <meshBasicMaterial
              color={0x00ff00}
            />
          </mesh>


        </scene>
      </React3>
    );
  }
}

Keywords

FAQs

Last updated on 09 Jul 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc