Izzimach / react-three-legacy

React bindings to create and control a 3D scene using three.js
Other
1.52k stars 128 forks source link

version 0.9.5 and pointerevents #92

Closed eeh closed 7 years ago

eeh commented 7 years ago

Hi,

Something seems to have happened with pointer events in the latest release. I can't get it to work at all anymore.

The pointer events are registered in bindPointerEvents, but projectPointerEvent never gets called for some reason. Changes in ReactBrowserEventEmitter or EventPluginHub perhaps?

Thanks, /Emil

Izzimach commented 7 years ago

I just tried out the interactive example and it seemed to work. Can you verify it doesn't work for you? Can you post code that doesn't work?

eeh commented 7 years ago

Hello,

This React Component here:

import React from 'react';
import {Renderer,Scene,Mesh,PerspectiveCamera,AmbientLight,PointLight,AxisHelper} from 'react-three';
import THREE from 'three';

class ThreeDTest extends React.Component {

    render(){
        const cameraprops =
            {
                aspect: 1,
                near: 1,
                far:  100,
                fov:  60,
                position: new THREE.Vector3(0,3,5),
                rotation: new THREE.Euler(-.5,0,0,'XYZ')
            };

        return (
            <div>
                <h1>This is a test page for 3d</h1>
                <Renderer width={400} height={400}>
                    <Scene camera="maincamera" pointerEvents={['onClick']}>
                        <PerspectiveCamera name="maincamera" {...cameraprops}  >
                            <PointLight color={new THREE.Color(0xa0a0a0)} distance={0} />
                        </PerspectiveCamera>
                        <AmbientLight color={new THREE.Color(0xa0a0a0)} intensity={0.8}  />
                        <Mesh geometry={new THREE.SphereGeometry(2)} material={new THREE.MeshLambertMaterial()} onClick3d={()=>alert('clicked')} />
                    </Scene>
                </Renderer>
            </div>
        )
    }

}

export default ThreeDTest

Renders ok:

skarmavbild 2016-12-07 kl 22 49 53

But the click event does not fire.

The relevant dependencies in play here are:

react@15.4.1
react-dom@15.4.1
react-three@0.9.5
three@0.78

and a bunch more of routing components etc.

Any help appreciated...

/Emil

Izzimach commented 7 years ago

Hm, looks like two instances of React get loaded, so what probably happened is that react-three packaged up its own internal version. If you bind events using one instance of the React library then the other instance will ignore them.

Probably webpack is misconfigured again because I am horrible at webpack. Need to exclude React from getting packaged up when building the npm version.

Izzimach commented 7 years ago

@eeh this seems to fix it for me, can you verify 0.9.6 works?

eeh commented 7 years ago

Will check it out first thing in the morning!

/Emil

8 dec. 2016 kl. 22:41 skrev Gary Haussmann notifications@github.com:

@eeh this seems to fix it for me, can you verify 0.9.6 works?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

eeh commented 7 years ago

Works fine 👍 thanks for helping out!