three.js에서 개체 하이퍼 링크를 만드는 방법

다음은 내 firstpage.js 파일입니다. 아래 three.js에서 개체 하이퍼 링크를 만드는 방법

$(function(){ 

/*global variables*/ 
var scene, camera, renderer; 
var spotLight, hemi; 
var SCREEN_WIDTH, SCREEN_HEIGHT; 
var mouse 
var loader, model, animation; 
var objects = []; 

function init(){ 


    /*creates empty scene object and renderer*/ 
    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, .1, 1000); 
    renderer = new THREE.WebGLRenderer({antialias:true}); 

    renderer.setClearColor(0xEBE0FF); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.shadowMap.enabled= true; 
    renderer.shadowMapSoft = false; 


    camera.position.x = -2; 
    camera.position.y = 2; 
    camera.position.z = -9; 
    camera.lookAt(scene.position); 

    //hemi light 
    hemi = new THREE.HemisphereLight(0xbbbbbb, 0x660066); 
    scene.add(hemi);   

    /*adds spot light with starting parameters*/ 
    spotLight = new THREE.SpotLight(0xffffff); 
    spotLight.castShadow = true; 
    spotLight.position.set (20, 35, 40); 
    scene.add(spotLight); 

    //load blender scene 
    var loader = new THREE.ObjectLoader(); 
    loader.load("test.json",function (obj) { 

     scene.add(obj); 

     scene.traverse(function(children){ 
      objects.push(children); 
     });     
    });     
    $("#webGL-container").append(renderer.domElement);  
} 
function render() { 
     scene.rotation.y += .005;  
} 


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

init(); 
animate(); 

$(window).resize(function(){ 
    SCREEN_WIDTH = window.innerWidth; 
    SCREEN_HEIGHT = window.innerHeight; 
    camera.aspect = SCREEN_WIDTH/SCREEN_HEIGHT; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 
}); 

});

내가 각 모델 하이퍼 링크 할 수 있습니다 모든 모델은 새로운 page.here의 test.json에 저를 리디렉션하는 방법을 내 firstpage.html 파일

<HTML> 
<title> Demo Page</title> 
<body> 
<div id ="webGL-container" style="z-index:-9;"></div> 
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">  </script> 
<script type="text/javascript" src="three.min.js"></script> 
<script type ="text/javascript" src="firstpage.js"></script>   
</body> 
</html>

것은이 들어있는 믹서기 파일입니다 단지 4 개의 다른 문자.

출처

2016-06-23 sharad gupta

실제 DOM 하이퍼 링크가 필요하거나 모델을 클릭하고 리디렉션 충분합니까? – user01

두 가지 방법 모두 말해 줄 수 있습니다. @ user01 –

요소가 필요한 환상적인 이유가 없다면 Rush2112에서 간략히 다루는 두 번째 방법 (레이 캐스팅)이 훨씬 더 좋은 해결책입니다. 장면 수정 (마우스를 올리면 모델 강조 표시) 또는 CSS 변경 (손가락에서 포인터로 커서 변경) – user01

먼저 마우스 클릭을위한 eventListener가 필요합니다. 물건이되었을 경우 해당 이벤트 리스너에서

, 당신은 설치 raycaster 볼, 그들은이있는 경우 각 개체가 자신의 링크를 원한다면

는, 당신은 window.open(link)

전화를 "클릭" 어떤 객체가 어떤 링크로 연결되는지 지정해야합니다. raycaster 객체를 반환 때문에 현장에서 아이들의 목록을 검색 할 수 있으며, 경우에 하드 코딩 각각
예를 들어 문 :
if(raycaster.intersects[0] === object1) { window.open(link1) } else if (raycaster.intersects[0] === object2 { window.open(link2) }

등

에 당신이 사용하지 않은 경우 raycaster here 전에 설정하고 사용하는 좋은 예입니다

출처

2016-06-23 20:53:27 Rush2112

어떤 3dmodel이 object1인지 그리고 어떻게 지정해야합니까? 어느 것이 object2인지. –

모델이 구성되어있는 [Object3D] (http://threejs.org/docs/index.html#Reference/Core/Object3D)는 여러 가지 방법으로 선택할 수 있습니다. 그것들은'.name','.uuid', 또는'.userData'를 가지고있어서 .uuid 나 userData @ user01을 사용하여 객체가 선택되는 예제 나 코드를 – user01

알 수 있습니다. –

three.js에서 개체 하이퍼 링크를 만드는 방법

답변

관련 문제