'How to on-click change the texture of the object in AR using three.js

I want to display the entire tic-tac-toe board, and then I would like to change the texture of the clicked-on box. I would like to implement that in onSelect method. Can you give me a simple example, not exactly related with my code? Displaying just a single box and changing his texture on-click will be enough. I have already implemented the methods for the texture changing, but they require the box Number which I don't not how to get after clicking on the box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Strona</title>
    <script  src='../../three/build/three.js'> </script>
    <script  src='../../three/build/three.min.js'> </script>
    <script  src='../../three/build/three.module.js'> </script>
<!--    <script type="text/javascript" src='drawTicTacToe.js'></script>-->
    <script type="text/javascript" src='ticTacToe.js'></script>
</head>
<body>

<div id="info">
    <p>Three.js example with images</p>
    <a href="index.html">Back</a>
</div>

<script type="module">

    import {ARButton} from '../../three/examples/jsm/webxr/ARButton.js';

    let camera, scene, renderer, board, controller, raycaster;
    let pointer;
    let i = 0;

    class ticTacToeBoard {
        boxes = [];

        constructor() {
            const SIZE = 0.05;

            for(let i = 0 ; i < 9 ; ++i){
                const texture = new THREE.TextureLoader().load('textures/white.png' ); // Loading a basic texture png
                const geometry = new THREE.BoxBufferGeometry(SIZE, SIZE, SIZE);
                const material = new THREE.MeshBasicMaterial({
                    map: texture
                });
                let box = new THREE.Mesh(geometry, material);
                this.boxes.push(box);
            }
            this.setBoxesPosition();
        }

        addToScene() {
            for(let i = 0 ; i < 9 ; ++i){
                scene.add(this.boxes[i]);
            }
        }

        setBoxesPosition(){
            const POSITION = 0.08;
            this.boxes[0].position.set(POSITION, POSITION, -0.5);
            this.boxes[1].position.set(0, POSITION, -0.5);
            this.boxes[2].position.set(-POSITION, POSITION, -0.5);
            this.boxes[3].position.set(POSITION, 0, -0.5);
            this.boxes[4].position.set(0, 0, -0.5);
            this.boxes[5].position.set(-POSITION, 0, -0.5);
            this.boxes[6].position.set(POSITION, -POSITION, -0.5);
            this.boxes[7].position.set(0, -POSITION, -0.5);
            this.boxes[8].position.set(-POSITION, -POSITION, -0.5);
        }
    }

    function updateTextureX(boxNumber){
        board.boxes[boxNumber].material.map = new THREE.TextureLoader().load('textures/x.png');
    }

    function updateTextureXWin(boxNumber){
        board.boxes[boxNumber].material.map = new THREE.TextureLoader().load('textures/xWin.png');
    }

    function updateTextureO(boxNumber){
        board.boxes[boxNumber].material.map = new THREE.TextureLoader().load('textures/o.png');
    }

    function updateTextureOWin(boxNumber){
        board.boxes[boxNumber].material.map = new THREE.TextureLoader().load('textures/oWin.png');
    }


    function init() {

        const container = document.createElement('div');
        document.body.appendChild(container);
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.01, 20);

        board = new ticTacToeBoard();
        raycaster = new THREE.Raycaster();

        renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.xr.enabled = true;
        container.appendChild(renderer.domElement);
        document.body.appendChild(ARButton.createButton(renderer, {}));

        const light = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 1);
        light.position.set(0.5, 1, 0.25);
        scene.add(light);



        controller = renderer.xr.getController(0);
        controller.addEventListener('select', onSelect);
        scene.add(controller);


        window.addEventListener('resize', ()=> {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        drawScene();
    }

    function onSelect() {
        //here I want to change the texture of the clicked-on box
    }

    function animate() {
        renderer.setAnimationLoop(render);
    }

    function render() {

        renderer.render(scene, camera);
    }



    function drawScene() {
        board.addToScene();
    }

    //START APP
    init();
    animate();
    console.log(board.boxes[2].getCenter());
    drawScene();

</script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to on-click change the texture of the object in AR using three.js

Sources

Related Questions