0

Hello friends i am new to threejs please help to add hyperlink in the side of a cube so that if i click on a face of a cube it opens a website

<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75,
        window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();


    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // How to make a responsive thing
    window.addEventListener('resize', function() {
        var width = window.innerWidth;
        var height = window.innerHeight;
        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    });


    //How to make controls of a geometry in your hand

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

    //The geometry of the shape is begin
    var geometry = new THREE.BoxGeometry(2, 2, 2);
    var cubeMaterials = [
        new THREE.MeshBasicMaterial({
            map: new
            THREE.TextureLoader().load('1.svg'),
            side: THREE.DoubleSide
        }), //Right Side
        new THREE.MeshBasicMaterial({
            map: new
            THREE.TextureLoader().load('2.svg'),
            side: THREE.DoubleSide
        }), //Left Side
        new THREE.MeshBasicMaterial({
            map: new
            THREE.TextureLoader().load('3.svg'),
            side: THREE.DoubleSide
        }), //Top Side
        new THREE.MeshBasicMaterial({
            map: new
            THREE.TextureLoader().load('4.svg'),
            side: THREE.DoubleSide
        }), //Bottom Side
        new THREE.MeshBasicMaterial({
            map: new
            THREE.TextureLoader().load('5.svg'),
            side: THREE.DoubleSide
        }), //Front Side
        new THREE.MeshBasicMaterial({
            map: new
            THREE.TextureLoader().load('6.svg'),
            side: THREE.DoubleSide
        }) //Back Side
    ]

    //Create a material,color or image texture
    var material = new THREE.MeshFaceMaterial(cubeMaterials);
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;
    //game logic
    var animate = function() {
        requestAnimationFrame(animate);

        // cube.rotation.x += 0.01;
        // cube.rotation.y += 0.01;
        //draw scene
        renderer.render(scene, camera);
    };

    animate();
</script>
Shiva
  • 6,677
  • 4
  • 36
  • 61
  • 1
    You can use `THREE.Raycaster()` with mouse events, checking the normal of a face you've intersected. – prisoner849 Nov 05 '18 at 11:58
  • Check this answer https://stackoverflow.com/questions/24690731/three-js-3d-models-as-hyperlink/24692057#24692057 . Let me know if you need any other help – Shiva Nov 06 '18 at 19:40

0 Answers0