Skip to content

Petition to add the following example to the repo #205

@joseocasioserra

Description

@joseocasioserra

Hi,

I have used the library for the last couple of weeks and built and pretty interesting application. I would like share some code that will benefit most of the people using the library on object manipulation; specifically tapping on any object rendered and moving it around at will

objectToMove = ''

    constructor(props) {
        super(props)

        this.state = {
            objects: [], //add objects or models here
            tapPosition: {x: 0, y: 0, z: 0},
            objectId: ''
        }
    }

handleResponderMove = (e) => {
        this.hitTest({ x: e.nativeEvent.pageX, y: e.nativeEvent.pageY })
    }
    
    hitTest = async (location) => {
        const hits = await ARKit.hitTestPlanes(location, 1)
        const result = await ARKit.hitTestSceneObjects(location);

        // Detect hit on object
        if (result.results.length) {
            let id = result.results[0].id
            this.state.objects.forEach((element) => {
                if (element.props.id === id){   
                    this.objectToMove = id
                }
            })
        }

        // Update position on plane hit
        if (hits.results.length) {
            let x = hits.results[0].position.x * 10
            let y = hits.results[0].position.y * 10
            let z = hits.results[0].position.z * 10
            let pos = { x: x, y: y, z: z };

            this.setState({
                tapPosition: pos
            })
        }

renderElements = () => {
        return this.state.objects.map(element => {
            if (element.props.id === this.objectToMove){
                console.log(element)
                element.props.position.x = this.state.tapPosition.x
                element.props.position.y = this.state.tapPosition.y
                element.props.position.z = this.state.tapPosition.z
                element.props.eulerAngles.y = this.state.rotationY
                return element
            }
            else {
                return element   
            }
        })

 <View
                    style={{flex: 1}}
                    onResponderMove={this.handleResponderMove.bind(this)}
                    onStartShouldSetResponder={() => true}
                    onMoveShouldSetResponder={() => false}
                >
                    <ARKit
                        style={{ flex: 1 }}
                        planeDetection={ARKit.ARPlaneDetection.Horizontal}
                        lightEstimationEnabled
                    >
                        <ARKit.Group position={{ x: 0, y: 0, z: 0 }} scale={0.1}>
                            {this.renderElements()}                            
                        </ARKit.Group>
                        <ARKit.Light
                            position={{ x: 0, y: 15, z: 40 }}
                            type={ARKit.LightType.Omni}
                            color="white"
                        />
                    </ARKit>
</View>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions