https://github.com/keqingrong/three-dragcontrols

three.js DragControls
https://github.com/keqingrong/three-dragcontrols

three three-dragcontrols threejs

Last synced: about 1 month ago
JSON representation

three.js DragControls

• Host: GitHub
• URL: https://github.com/keqingrong/three-dragcontrols
• Owner: keqingrong
• License: mit
• Created: 2017-07-10T06:41:54.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-10-01T23:49:35.000Z (about 5 years ago)
• Last Synced: 2024-10-10T13:28:49.376Z (about 1 month ago)
• Topics: three, three-dragcontrols, threejs
• Language: JavaScript
• Homepage: https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/DragControls.js
• Size: 11.7 KB
• Stars: 11
• Watchers: 3
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# three-dragcontrols

[![npm version](https://img.shields.io/npm/v/three-dragcontrols.svg)](https://www.npmjs.com/package/three-dragcontrols)

## Installation

```bash

npm install three-dragcontrols

```

## Usage

```javascript

import {

  Scene,

  PerspectiveCamera,

  WebGLRenderer,

  BoxGeometry,

  MeshBasicMaterial,

  Mesh

} from 'three';

import DragControls from 'three-dragcontrols';

const scene = new Scene();

const camera = new PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);

camera.position.z = 1000;

const renderer = new WebGLRenderer({antialias: true});

renderer.setClearColor(0xf0f0f0);

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.sortObjects = false;

document.body.appendChild(renderer.domElement);

const objects = [];

const geometry = new BoxGeometry(40, 40, 40);

for (let i = 0; i < 2; i++) {

  const object = new Mesh(geometry, new MeshBasicMaterial({color: Math.random() * 0xffffff}));

  object.position.x = Math.random() * 1000 - 500;

  object.position.y = Math.random() * 600 - 300;

  object.position.z = Math.random() * 800 - 400;

  object.rotation.x = Math.random() * 2 * Math.PI;

  object.rotation.y = Math.random() * 2 * Math.PI;

  object.rotation.z = Math.random() * 2 * Math.PI;

  object.scale.x = Math.random() * 2 + 1;

  object.scale.y = Math.random() * 2 + 1;

  object.scale.z = Math.random() * 2 + 1;

  scene.add(object);

  objects.push(object);

}

const dragControls = new DragControls(objects, camera, renderer.domElement);

function animate() {

  requestAnimationFrame(animate);

  renderer.render(scene, camera);

}

animate();

```