three-dragcontrols

2019-04-14 admin

three-dragcontrols是什么

什么是three-dragcontrols,three.js DragControls

three-dragcontrols使用教程帮助文档

three-dragcontrols

npm version

Installation

npm install three-dragcontrols

Usage

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();

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-61724.html

文章标题:three-dragcontrols

回到顶部