发表新帖
发表新帖

How to load three-orbitcontrols with import syntax?

前端 未结
关注
5 1627
遇见更好的自我
遇见更好的自我 2021-01-17 14:59

Has anyone tried using the OrbitControls function with ReactJS? Here is the sample code I wrote: 

import React, { Component } from \'react\';
import \'tachy
相关标签:
5条回答
  • 鱼传尺愫
    2021-01-17 15:10

    There is an npm package that you can use: Orbit Controls ES6

    Link: https://www.npmjs.com/package/orbit-controls-es6

    Installation:

    npm i orbit-controls-es6 --save

    Usage:

    import OrbitControls from 'orbit-controls-es6';

const controls = new OrbitControls(camera, renderer.domElement);

    Update 2020:

    three.js now exports OrbitControls as a module by default, and as others have pointed out, it can be used as follows:

    import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
    0 讨论(0)
  • 误落风尘
    2021-01-17 15:11

    I have to go with Anurag with this one. First i had three-orbit-controls installed which danlong suggested, but i ended up having issues with require not being defined when trying to start the WebClient.

    After that i switched to orbit-controls-es6 and everything worked just fine.

    0 讨论(0)
  • 粉色の甜心
    2021-01-17 15:26

    The problem is that when you import THREE, it is not globally scoped which is what the 'three-orbitcontrols' module relies on.

    You could use this module instead - 'three-orbit-controls' (https://www.npmjs.com/package/three-orbit-controls)

    and import it like so:

    const OrbitControls = require('three-orbit-controls')(THREE);

    Usage of orbital controls is the same as you have now but with this, an instance of THREE is being passed to the Orbit Controls module.

    EDIT - 2020

    Although the above answer was useful when the question was first asked, @Marquizzo rightly pointed out this is no longer the case.

    Orbit Controls is now packaged with three.js and there's no need to use require(), when you should use the import statement.

    Please refer to this answer now - https://stackoverflow.com/a/55929101/8837901

    0 讨论(0)
  • 孤街浪徒
    2021-01-17 15:26

    There is also an option to import OrbitControls directly from "three" package like this:

    import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as THREE from 'three';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";

    and use it in the app without any issues:

    this.controls = new OrbitControls(camera, domElement);

    domElement has to be passed as second argument in latest builds of Three.js. React ref can be used for it.

    Here is a live demo with latest React and Three.js https://codesandbox.io/s/github/supromikali/react-three-demo

    0 讨论(0)
  • 生来不讨喜
    2021-01-17 15:31

    I just did it like this when using parcel bundler:

    app.js:

    import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// the rest of the example from threejs web page 
// https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_orbit.html

    index.html:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Parcel threejs example</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script src="app.js"></script>
  </body>
</html>

    package.json:

    {
  "name": "test-threejs-with-parcel",
  "version": "0.1.0",
  "description": "Threejs with parcel test",
  "main": "app.js",
  "scripts": {
    "start": "parcel index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.10.0"
  },
  "dependencies": {
    "three": "^0.109.0"
  }
}
    0 讨论(0)
 看不清?
提交回复
热议问题