0

Im pretty new to using three js, have been able to set up a basic scene, using a skybox and loading a few static glb meshes. I would like to make these into hyperlinks - can anyone explain how I might do this or point me in the direction of a good tutorial? thanks!

*edit : have been attempting it with no luck - here is my code, please let me know if you spot any mistakes or maybe i have gone in the wrong direction entirely haha

    var scene, camera, renderer;

      function init() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(55,window.innerWidth/window.innerHeight,45,30000);
        camera.position.set(-900,-200,-900);

        // set canvas - dynamic resizing without distortion
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        window.addEventListener('resize', function() {
          renderer.setSize(window.innerWidth, window.innerHeight);
          camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        });

        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();

        // controls
        var controls = new THREE.OrbitControls(camera);
        controls.addEventListener('change', renderer);
        controls.minDistance = 100;
        controls.maxDistance = 2000;

        // lights
        var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
            light.position.set( 0, 200, 0 );
                scene.add( light );
        var light = new THREE.AmbientLight( 0xFFFFFF )
        scene.add( light )

         // moon mesh
        var sphere = new THREE.SphereGeometry( 6.7, 21.4, 21.4 )
        var material = new THREE.MeshPhongMaterial()
        material.map = new THREE.TextureLoader().load('moonmap4k.jpg')
        var moonMesh = new THREE.Mesh( sphere, material )
        moonMesh.position.set(10, 10, 0)
        moonMesh.scale.set(15, 15, 15)
        moonMesh.userData = { URL: "https://threejs.org/examples/?q=fbx#webgl_loader_fbx"};
        scene.add( moonMesh )

        function onMouseMove(event) {

                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
                mouseX = event.clientX - window.innerWidth / 2;
                mouseY = event.clientY - window.innerHeight / 2;
                camera.position.x += (mouseX - camera.position.x) * 0.01;
                camera.position.y += (mouseY - camera.position.y) * 0.01;
                camera.lookAt(scene.position);

              };

              function onDocumentMouseDown(event) {
                  event.preventDefault();
                  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

                  raycaster.setFromCamera(mouse, camera);

                  var intersects = raycaster.intersectObjects([moonMesh]);
                  if (intersects.length > 0) {
                  //get a link from the userData object
                      openMoonMesh();
                  }

              };


        // skybox
        var materialArray = [];
        var texture_ft = new THREE.TextureLoader().load( 'graycloud_ft.jpg');
        var texture_bk = new THREE.TextureLoader().load( 'graycloud_bk.jpg');
        var texture_up = new THREE.TextureLoader().load( 'graycloud_up.jpg');
        var texture_dn = new THREE.TextureLoader().load( 'graycloud_dn.jpg');
        var texture_rt = new THREE.TextureLoader().load( 'graycloud_rt.jpg');
        var texture_lf = new THREE.TextureLoader().load( 'graycloud_lf.jpg');

        materialArray.push(new THREE.MeshBasicMaterial( { map: texture_ft }));
        materialArray.push(new THREE.MeshBasicMaterial( { map: texture_bk }));
        materialArray.push(new THREE.MeshBasicMaterial( { map: texture_up }));
        materialArray.push(new THREE.MeshBasicMaterial( { map: texture_dn }));
        materialArray.push(new THREE.MeshBasicMaterial( { map: texture_rt }));
        materialArray.push(new THREE.MeshBasicMaterial( { map: texture_lf }));

        for (var i = 0; i < 6; i++)
           materialArray[i].side = THREE.BackSide;
        var skyboxGeo = new THREE.BoxGeometry( 10000, 10000, 10000);
        var skybox = new THREE.Mesh( skyboxGeo, materialArray );
        scene.add( skybox );
        animate();




      }

      function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
        requestAnimationFrame(render)

        var delta = clock.getDelta();

         mixer.update( delta )


      }
      init();
tc94
  • 1
  • 1
  • So when clicking on certain meshes you want the browser to navigate to different URLs, right? – Mugen87 Jul 26 '19 at 10:59
  • Yes, exactly! Thanks for replying - I'm going to update my post with the code I have been working on - not managed to get it working yet. – tc94 Jul 26 '19 at 13:16
  • Possible solution: https://discourse.threejs.org/t/mouse-hovering-in-three-js-editor/1903/5?u=mugen87 – Mugen87 Jul 26 '19 at 13:45
  • Possible duplicate of [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) – M - Jul 26 '19 at 19:42
  • When your raycast hits the desired object, simply use this: https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage – M - Jul 26 '19 at 19:44

0 Answers0