izzimach / react-three-legacy Goto Github PK

hey, i'm encountering another problem. it is pretty weird.
as soon as i require react-three in in some jsx component like in the code below, no rerenders on state changes are happening at all anymore. only the initial render is taking place. thought it could be react-router but that doesnt seem to be the problem either.

var React = require("react"),
    ReactTHREE = require('react-three'),
    THREE = require('three'),

According to the Three.js docs (http://threejs.org/docs/api/objects/Line.html) the attribute 'type' accepts the values THREE.LineStrip or THREE.LinePieces, but it is actually the attribute 'mode' which stores these (at least in the current version). However, react-three sets the 'type' attribute and so it is not currently possible to use THREE.LinePieces via react-three.

It's possible I just don't understand how commonjs works, but it looks like the configuration in dev branch is not correct. The output file react-three-commonjs.js contains libs other than react-three.

I have about a dozen public npm packages and none of them are distributed with sub-dependencies like this so it doesn't really make sense to me to do it this way.

Currently depends on React 0.12. With the release of React 0.13 and React Native this needs to be updated.

Looks like ReactComponent got stripped down so several of those calls need to be corrected.

Need to see if the constructor process changed. Check react-art.

Finally, composite components may have changed.

-create a test app using JSX
-make sure react-three works with it
-add it to the examples.

hey everyone,

trying to set the background prop on a scene element with an orthographic camera but the canvas always stays black.
react-three code looks like it should work. am i missing something? :)

render: function() {
    var width = 1400;
    var height = 900;
    var cameraprops = {left: width / - 2 , right: width / 2 , up: height / 2, bottom: height / - 2, near: 1, far: 1000};

    return (
      <Scene background="0xffffff" width={width} height={height} camera="maincamera">
        <OrthographicCamera name="maincamera" {...cameraprops} />

      </Scene>
    );
  }

I have properties I'd like to set on an Object3D that are currently not supported by react-three. It occurred to me to make a PR with a commit like this one, however, it doesn't make sense to me to manually set all of these props. For any prop that doesn't require special parsing, why not just pass it along?

I'm guessing that you have a good reason not to do this but I'm wondering what that is.

    applyTHREEObject3DPropsToObject: function(THREEObject3D, oldProps, props) {
        const { position,
                quaternion,
                visible,
                scale,
                up,
                lookat,
                ...rest
              } = props;

        // these props have defaults
        if (typeof position !== 'undefined') {
            THREEObject3D.position.copy(position);
        } else {
            THREEObject3D.position.set(0,0,0);
        }

        if (typeof quaternion !== 'undefined') {
            THREEObject3D.quaternion.copy(quaternion);
        } else {
            THREEObject3D.quaternion.set(0,0,0,1); // no rotation
        }

        if (typeof visible !== 'undefined') {
            THREEObject3D.visible = visible;
        } else {
            THREEObject3D.visible = true;
        }

        if (typeof scale === "number") {
            THREEObject3D.scale.set(scale, scale, scale);
        } else if (scale instanceof THREE.Vector3) {
            // copy over scale values
            THREEObject3D.scale.copy(scale);
        } else {
            THREEObject3D.scale.set(1,1,1);
        }

        if (typeof up !== 'undefined') {
            this._THREEObject3D.up.copy(up);
        }

        if (typeof lookat !== 'undefined') {
            this._THREEObject3D.lookAt(lookat);
        }

        Object.assign(THREEObject3D, rest);
    },

Help needed, i am trying to create regular quaterion animation with requestAnimationFrame(), but it always causes some serious performance troubles and also causes crash after like 60 seconds, and also get an error Invalid array buffer length.
It works fine if i use setInterval() with over 500ms delay, to create animation.
Here is how i added the animation.

    super(props);
    this.state = {
      earth:'',
      bumps:'',
      position:new three.Vector3(-40,0,0),
      rotation:2
    }
    this._animate = this._animate.bind(this);
  }
  _animate() {
     requestAnimationFrame(this._animate);
    this.setState({rotation:this.state.rotation + 0.2});

 }

  componentDidMount() {
    let earthmap = three.ImageUtils.loadTexture('earthmap.jpg');
    let bumps = three.ImageUtils.loadTexture('bumps.jpg');
    this.setState({earth:earthmap,bumps:bumps});
    this._animate();
  }
  render () {
    const {rotation,position,earth,bumps} = this.state;



      let modelQuaternion = new three.Quaternion().setFromEuler(new three.Euler(0,0,rotation));
  <Object3D quaternion={modelQuaternion}>
            <Mesh  {...meshprops}/>
          </Object3D>

I'm currently getting this error whenever I try to compile:

Cannot resolve module 'react/lib/Object.assign'

I am having trouble with react 15 when unmounting 3d scenes.

two parts:
EventPluginHub.js:153 Uncaught TypeError: Cannot read property '_rootNodeID' of null

and then

an infinite loop of

react-three-commonjs.js:1157 Uncaught TypeError: Cannot convert undefined or null to objectrenderScene @ react-three-commonjs.js:1157rapidrender @ react-three-commonjs.js:1090

Any ideas?

Hi again. My latest issue is that MeshLambertMaterials appear completely black?

I've tried messing around with all sorts of things (lighting etc). Now I've simplified it into two test cases in my demo repo.

If you run it up, http://localhost:8000 shows the version using ReactTHREE which is broken (the robot is black).

http://localhost:8000/test shows a version using THREE directly which is working (the robot is red).

Any ideas? I'd be very grateful again if you could shed any light (pardon the pun) on this!

I needed to change the react library dependency from 0.13.1 to 0.14.0-alpha to get the examples to work. Don't know if was just a problem with my set-up or not.

I followed these build instructions and put the whole tree in my Apache docs directory.

git clone https://github.com/Izzimach/react-three.git
cd react-three
npm install -g gulp
npm install
gulp

Any idea why this is happening for me in 0.7.2? It's related to the HMR hack.

Uncaught TypeError: Can't add property _renderedChildren, object is not extensible

preventExtensions in instantiateReactComponent.js

camera-up.js example doesn't work properly if perspective camera changet to othographic, it has wrong mouse click coordinates. 0.7.5

return React.createElement(ReactTHREE.OrthographicCamera,
  {
    name:'maincamera',
    fov:75,
    aspect:this.props.aspectratio,
    position: cameraposition,
    lookat: new THREE.Vector3(0,0,0),
    up: cameraup,
    near:1,
    far:5000,
    left: window.innerWidth/-2,
    right: window.innerWidth/2,
    top: window.innerHeight/2,
    bottom: window.innerHeight/-2

  });

looks like it remove cube only if the cube on line from camera to center

There is an uncommon bug that happens when a React Composite Component (which is produced by React.createClass) is used with non-DOM nodes.

This problem occurs because in certain situation React tries to update the children nodes using DangerouslySetInnerHTML and obviously bombs since the nodes are not HTML.

The 'fix' is to provide a custom version of createClass for non-DOM nodes. There is already similar code in react-pixi

material = new three.MeshPhongMaterial({map: new three.ImageUtils.loadTexture('earthmap.jpg')})
When i try to import material then i always get error document is not defined, what could be wrong ?

Hi,

I am currently learning Threejs with React. So please bare with me eventually :).

I have around 200 small cubes on the screen which are all moving towards the camer/usera, if they are behind the camera they cubes will be positioned at the horizont again (and then they make up their way towards the camera/user again and again).

Following your example code, each <Cube> stores its Z-position in its state and on every requestAnimationFrame that position is modified and therefore rerendered.
This works like a charm however my system goes down after lets say 20 seconds. The more cubes I have the sooner Chrome comes completely unusable.

I think it has to do with the requestAnimationFrame that each cube is using. I think this is very ineffecient, compared to other non React ThreeJS examples that have only one requestAnimationFrame.

What can you suggest for the implementation? I think this is the best approach in the React philosophy to handle the position in the class and not in any parent container.
So am I right with the conclusion that react-three is not suitable for animating lots of objects in a scene?

I have the following components:
Cubes: builds up the array of Cube's and sets the inital position
Cube: stores its Z-position as state, animation is done here

Thanks for your help,
Matthias

As shown in #20, the skinned mesh was not kept up to date. Add a test that uses a skinned mesh. Might also make a good demo.

I get an error on line 859 of ReactTHREE.js with the latest git code. Everything worked fine with the npm version without monkey-patching.

Uncaught TypeError: Cannot read property 'updateComponent' of undefined

The setup is a simple Scene with a PerspectiveCamera, a PointLight and an Object3D containing a Mesh. The error doesn't happen on first render but does on every subsequent setState.

I'm a little bit short on time right now but will provide test code that reproduces the error if needed.

Hi I'm using react-three with a custom camera movement implementation. I run into problems when the camera would not keep its up vector as desired, and I didn't found any way of passing my own calculated up vector to it.

So I've made a small change to the code, if interested see https://github.com/evilfer/react-three/blob/master/src/ReactTHREE.js#L189

Do you think this is a suitable way of solving this issue? Is it worth creating a pull request?

Creating the various components (most notably <Scene> and <Mesh>) are pretty cumbersome even if you just want a simple scene with a single mesh in it. There are a lot of fiddly props and boilerplate that feels very Un-React-ish.

However, IMO the basic react-three components should try to mirror three.js as close as possible which makes it easier to maintain and test the components. A possible approach is to create a set of "higher-order components" which wrap the default components and add sensible defaults or common boilerplate. Some examples:

• <DefaultScene> would provide a default camera at some prescribed distance and size itself to fit into the browser window
• <OrbitCamera> would rotate/pan/zoom child objects based on mouse/touch actions, similar to the code already added by 8318719
• <Box> creates a box of a certain size and color
• <AutoMesh> handles the loading of mesh geometry and materials and things.

This will probably go into an addons directory or something similar.

Is there anyway to easily merge geometries yet?

Something like this would be cool:

<MergedMesh>
   <Mesh
      geometry={sphereGeo}
      material={sceneMat}
      position={{x:0, y:0, z:0}}
      quaternion={rotation}
  />
  <Line
      geometry={sphereGeo}
      material={lineMat}
      position={{x:0, y:0, z:0}}
      quaternion={rotation}
  />
</MergedMesh>

Hi there,

I'm starting to have random trouble with my 3d components after upgrading to react 15.2.

I keep hitting this:

react-three-commonjs.js:2190 Uncaught TypeError: prevChild.getNativeNode is not a function
    moveChild @ react-three-commonjs.js:2190
    _updateChildren @ ReactMultiChild.js:328
    updateChildren @ react-three-commonjs.js:2225
    receiveComponent @ react-three-commonjs.js:2637
    receiveComponent @ react-three-commonjs.js:2372
    receiveComponent @ ReactReconciler.js:131
    newReceiveComponent @ react-three-commonjs.js:334
    updateChildren @ ReactChildReconciler.js:94
    _reconcilerUpdateChildren @ ReactMultiChild.js:213
    _updateChildren @ ReactMultiChild.js:310
    updateChildren @ react-three-commonjs.js:2225
    perform @ Transaction.js:138
    THREERenderer_componentDidUpdate @ react-three-commonjs.js:1130
    invokeComponentDidUpdateWithTimer @ ReactCompositeComponent.js:66
    notifyAll @ CallbackQueue.js:67
    close @ ReactReconcileTransaction.js:79
    closeAll @ Transaction.js:204
    perform @ Transaction.js:151
    perform @ Transaction.js:138
    perform @ ReactUpdates.js:91
    flushBatchedUpdates @ ReactUpdates.js:178
    close @ ReactUpdates.js:49
    closeAll @ Transaction.js:204
    perform @ Transaction.js:151
    perform @ ReactUpdates.js:91
    flushBatchedUpdates @ ReactUpdates.js:178
    closeAll @ Transaction.js:204
    perform @ Transaction.js:151
    batchedUpdates @ ReactDefaultBatchingStrategy.js:63
    batchedUpdates @ ReactUpdates.js:99
    dispatchEvent @ ReactEventListener.js:150

In different circumstances. I think it may be when navigating away/replacing 3d components, but i'm not quite sure.

For the time being I downgraded to react 15.1, but more users will probably hit this...

Regards,
Emil

This might be better as a separate fork called 'react-physijs', but I'd love to be able to use this with Physijs. Physijs's materials, meshes, and scenes aren't incredibly different, but I'm not sure how gravity/constraints/etc will play along with the crazy things you've done to get this to work.

See #14, Probably involves the way webpack packs modules or executes them when invoked.

Started in PR #60

• Tests and examples still need to be fully updated.
• Orbit controls need to be rebound.

So that lighting effects can be used in react-three.

Original THREE.Fog is here:
http://threejs.org/docs/#Reference/Scenes/Fog

Right now, there are multiple THREE.js helpers that work on THREE.Object3d objects. These include:

• BoxHelper
• EdgesHelper
• FaceNormalsHelper
• VertexNormalsHelper
• WireframeHelper

It would be great if there was an easy way to drop a helper as part of a parent Object3d container.

This would be done by lettings you drop in helpers as child components of Object3d elements. Such as:

var geometry = new THREE.BoxGeometry(1, 20, 100)
var material = new THREE.MeshBasicMaterial(0xffffff)
<Mesh material={material} geometry={geometry} >
  <EdgesHelper />
  <VertexNormalsHelper />
</Mesh>

There should also be an easy way to port over the helpers to these types of components.

I need to load geometries dynamically (doing that using OBJLoader) and fail to understand how to get my resulting THREE.Group instances into the tree.
Could you please share these insights?

So far react-three is just great. Having a the scenegraph built out with React components feels so natural. Anyway I am currently testing and I think it is not possible to add PostProcessing effects to the scene. At least the API is not up yet and I do not want to mingle-mangle around before having your opinion on it.

What are your plans for this issue?

Best

Feature request: React component for THREE.js LineSegments

As mentioned in #28, react-three automatically renders the scene using requestAnimationFrame even if you don't change the scene. This causes double-rendering if you update the scene with React.render. You can turn it off manually with #29 but the code should check and not render a scene more than once per frame.

I have a scenario where we have a 3D scene embedded into a larger react app. The problem I am seeing is that orbit controls will take input from the whole document rather than just the 3D scene canvas. Eg. text inputs that are placed at the side of the 3D scene does only respond to orbit controls.

The function for OrbitControls looks like it takes a DOM element that will limtit what it takes input from:

THREE.OrbitControls = function ( object, domElement ) {

    this.object = object;
    this.domElement = ( domElement !== undefined ) ? domElement : document;
    // other code ...
}

However in react-three the canvas is not passed in as domElement, so it defaults to the whole document as per the code above. Currently THREEScene.js looks like this:

componentDidMount() {
    var renderelement = ReactDOM.findDOMNode(this);
    // other code ....
    this.mountOrbitControls(props);
}

If we could change it to something like this maybe the orbit controls would be limited to the scene canvas:

componentDidMount() {
    var renderelement = ReactDOM.findDOMNode(this);
    // other code ....
    this.mountOrbitControls(props, renderelement);
}

mountOrbitControls(props, renderelement) {
    if (props.orbitControls) {
        if (!this.orbitControls) {
            this.orbitControls = new props.orbitControls(this._THREEcamera, renderelement);
        }
    }
}

Or is there some other way to limit the orbit controls to only take input from the 3D scene and not the surrounding parts of the document?

this._THREErenderer.setClearColor(props.background, this.props.transparent ? 1 : 0);

With this line of code, it only sets background color when this.props.transparent is truthy, which seems odd to me. The prop transparent actually means opaque.

On a relevant note, why don't we just have an alpha prop and pass it directly to setClearColor, without coercing it to 1 or 0?

In addition to just updating the code to work with 0.14, some changes to consider:

1. Add babel to the pipeline. Not only is React using it, but ES6 is right around the corner anyways.
2. Remove DOM references if possible. Instead of creating a WebGL canvas, the user would create their own <canvas> element and place the Scene under it. This removes most dependence on the DOM although getting mouse events will have to be handled/abstracted away. Removing all DOM reference makes it easier to do item 3, which is:
3. Add some hooks to render to a native OpenGL surface instead of WebGL. This would mean adding a native lib to replace three.js functionality. It should also be compatible with react-pixi

Needs updating to work with the new component/element/factory forms used in React 0.12.1

Hi,

What are you thoughts on eliminating react-dom? I am trying to get react-three working with Ejecta but the problem is that since there is no DOM with Ejecta I get the error

    Invariant Violation: _registerComponent(...): Target container is not a DOM element.

Some back ground on this:
I modified the Scene component to take a canvas prop and it does this inside of componentDidMount:

        var renderelement = this.props.canvas || ReactDOM.findDOMNode(this);
        var props = this.props;

        this._THREEObject3D = new THREE.Scene();
        this._THREErenderer = new THREE.WebGLRenderer({
            canvas: renderelement,
            antialias: props.antialias === undefined ? true : props.antialias
        });

... but somehow I need to "virtually" mount the component without react-dom.

@Izzimach, I was wondering why you used the internal method receiveComponent in THREEObject3dMixin.js. Would componentWillReceiveProps work just as well?

Hi there,

I'm wondering about the use of window.requestAnimationFrame( rapidrender ) in THREEScene. In my case I am calling requestAnimationFrame in the parent component, where I'm keeping and mutating state that's then passed down to the react-three component as props. This results in renderScene() being called both in rapidrender() and in componentDidUpdate(). If there's a use case for rapidrender() which I'm unaware of, perhaps it could be conditionally disabled?

Really enjoying building things with react-three.

Hello,

It seems that it is not possible to set rotation on 3d object using this strategy:

<Object3D position={somePosition} quaternion={someQuat} />

I believe that this is due to some changes on three.js -- the issue disappears when downgrading to three.js rev 68, but it is evident on current rev 74.

I had a look around, and in current three.js versions, many of the relevant properties are defined using Object.defineProperty, making it impossible to replace the contents in runtime (as you do in the Object3DMixin), at least when using recent versions of Chrome.

It would be great if you were able to switch to another strategy when setting properties on Object3D's.

Thanks,
Emil

I have a group of children under a parent(Object3D). I set the group's position on Object3D, and it works correctly.

Now I need to rotate the group, I tried using quaternion and rotation properties of Object3D, and it doesn't work, no rotation is applied neither to the parent nor its children.

The only way, which worked correctly for me, to rotate an object - was to create a transformation matrix and apply it to a geometry.

I saw the cupcake example where quaternion was used to animate the rotation, but for some reason, it doesn't work for me(the only immediate difference I see is that I do not animate it, I statically define it's rotation at creation time).

  const a = new Euler(0, 1, 1.57, 'XYZ');
  const rotation = new Vector3(1, 0, 1);
  rotation.applyEuler(a);
....
        <Object3D
          position={new Vector3(200, 0, 200)}
          rotation={rotation}
        >
          <Mesh 
            material={new MeshBasicMaterial({ color: 0xFFFFF })}
            geometry={new BoxGeometry(50, 50, 50)}
            position={new Vector3(0, 0, 0)}
          />

          <Mesh 
            material={new MeshBasicMaterial({ color: 0xFFFFF })}
            geometry={new BoxGeometry(50, 50, 50)}
            position={new Vector3(60, 0, 60)}
          />
        </Object3D>

Right now there is some monkey-patching of React to replace DOM-specific code with THREE-specific code. However, React has certain "Injection" hooks that would do the same thing in a more appropriate manner. So the monkey-patch should be replaced by use of React injection.

The default React lib automagically applies some default injection via ReactDefaultInjection.js so the new code would have to bypass default React loading and provide injection similar to that of ReactDefaultInjection with certain parts replaced by react-three friendly code.

For future reference to myself for later:

• Default injection is called in both ReactDOM.js and ReactDOMServer.js so I need new versions of those that call our custom injection
• Need a new copy of React.js that then includes the user-defined versions of ReactDOM.js and ReactDOMServer.js

For 0.15 the DOM stuff may get totally separated (it isn't in 0.14) so this will have to be re-visited, but by then hopefully it will be a little easier to manage.

Hello,

I've been writing ordinary React web apps for awhile now and am comfortable with that. I have inherited an existing THREE.js project that is a mess of Javascript classes wrapping THREE.js objects. I was hoping to use your project to bring the clarity and ease of React to THREE. Few questions, if you don't mind:

1. After studying the code, it appears that you are using React's reactivity mechanisms to call THREE's render function instead of using requestAnimationFrame. Is that correct? If so, then a static THREE scene that just sits there should not re-render at all, resulting in good performance! (My THREE app is mostly idle, except for if there is user input.)
2. That said, I don't quite understand the conversation in #33. It's not clear to me what the difference between using react-three vs plain THREE.js in that case is. His example is still updating the position of each cube on each render frame. Is the overhead of using React components instead of plain THREE objects that much?
3. Can you compare this project to https://github.com/toxicFork/react-three-renderer? They appear to do the same thing, in the same way.

Thanks for your time.

When a custom component in a scene returns null on render (i'm currently writing a Mesh component that waits for its content to be loaded before display), THREE.js fails with :

THREE.Object3D.add: <noscript data-reactid="undefined.1"></noscript> is not an instance of THREE.Object3D.

Which is right since React replaces the value with a noscript tag when null is returned by a component. react-three should check for this behaviour but I haven't found a clean way to do this.
For now I just check if the string is a noscript tag but it is not reliable (and really dirty).

Could someone who knows React internals provide some hints on this subject ?

I'm attempting to create another react-three example, and want to use jsx. Right now, the webpack.examples.config file only support a single entry point, jsxtransform.jsx

It would be better to be able to configure multiple entry points, for other examples that use jsx.

It would also be better if the webpack dev server would automatically watch and reload the built jsx files when they're changed. Currently, they're only built when the server is started up (in the "predev") task

Boy this thing really needs some basic tests like those found in react-pixi. This includes:

• Existence tests.Does the ReactTHREE namespace exist?
• Scene graph structure. If I add a child via ReactTHREE, does it show up in the three.js scene graph in the right place?
• Checking some simple reference images using resemblejs
• Checking the weird bug that happens when React composite components are used with non-DOM nodes. See #6

Right now the context (which is not officially supported but whatever) gets trashed when it hits the Scene component and anything in the scene won't see the context.

This bug also happened in react-pixi and the fix is to grab the context and pass it down as in Izzimach/react-pixi@1253301

Hi, I was just wondering why you don't use ^0.14.0 in package.json ?

I tested with [email protected] one time and it seemed to work fine.

Per the example using shaders:
https://github.com/oveddan/react-three/blob/three-shader-example/examples/shader/shader.jsx#L22

It would be great if there was a react component for a THREE.ShaderMaterial

Currently this is done like:

cass Wavey extends React.Component {
  constructor(props) {
    super(props)

    this.uniforms = {
      time: { type: "f", value: props.time },
      resolution: { type: "v2", value: new THREE.Vector2(props.width, props.height) }
    }; 

    this.material = new THREE.ShaderMaterial({
      uniforms: this.uniforms,
      vertexShader: vertexShader,
      fragmentShader: fragmentShader
    });
  }
  componentWillReceiveProps(nextProps) {
    this.uniforms.time.value = nextProps.time

    if(nextProps.width !== this.props.width)
      this.uniforms.resolution.value.x = nextProps.width;

    if(nextProps.height !== this.props.height)
      this.uniforms.resolution.value.y = nextProps.height;
  }
  render() {
    return <Mesh geometry={geometry} material={this.material} />
  }
}

It would be great if there was some way to have a ShaderMaterial as a child element of the mesh,
and there was an easy way to pass new values to the uniforms.

If this were published to npm i would be soooo happy :)