如何在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); 
}); 

});

下面

是我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>

我怎樣才能使每個模型中的超鏈接，每個模型應該我重定向到一個新page.here test.json是攪拌器文件，其中包含只有4個不同的字符。

來源

2016-06-23 sharad gupta

你需要它是一個真正的DOM 超鏈接或點擊模型並提供重定向足夠？ – user01

你能告訴我兩種方法嗎？@ user01 –

除非你有一個奇妙的理由想要元素，否則Rush2112簡要介紹的第二種方法（光線投射）是一個更好的解決方案。你甚至可以通過修改你的場景（突出顯示模型在徘徊時）或css改變（將光標從一個指針改變爲一個手指）來模擬make元素'linky'的一些事情 – 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'來幫助你辨別哪個 – user01

能告訴我任何使用.uuid或者userData @ user01 –

如何在three.js中創建對象超鏈接

回答

相關問題