如何在Three.js中将对象设置为超链接

Question

如何在Three.js中将对象设置为超链接

3

以下是我的firstpage.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>

如何将每个模型制作为超链接，且每个模型都应该将我重定向到新页面。这里的test.json是一个包含4个不同角色的Blender文件。

- sharad gupta

你需要一个真正的DOM <a/> 超链接，还是点击模型并提供重定向就足够了？ - user01

你能告诉我两种方法吗？ - sharad gupta

除非你有一个惊人的理由想要<a>元素，否则Rush2112简要介绍的第二种方法（射线投射）是一个更好的解决方案。你甚至可以通过修改场景（悬停时突出显示模型）或CSS更改（将光标从指针改为手指）来模拟一些使元素“链接”的东西。 - user01

2个回答

0

3Dink.js是three.js的包装库，用于WebGL，可以轻松地创建3D超链接。在这种情况下，它非常有用。

在最短的情况下，只需3行代码即可实现单击和光标更改。

DDDINK.addURL(object, "https://www.npmjs.com/package/3dink");
DDDINK.readRendererObj( renderer, scene, camera );
DDDINK.domEvent.addFnc();

请浏览它的代码库。https://github.com/takashift/3Dink.js

- higechira

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rush2112 · Accepted Answer

首先，您需要为鼠标点击创建一个事件监听器。

在该事件监听器中，您需要设置一个射线投射器，并查看是否已经“点击”了任何对象。

如果有，则调用window.open(link)。

如果您希望每个对象都有自己的链接，那么您需要指定哪个对象指向哪个链接。由于射线投射器返回一个对象，因此您可以搜索场景中子元素列表，并为每个子元素硬编码if语句。例如：
示例：

if (raycaster.intersects[0] === object1) {
    window.open(link1)
} else if (raycaster.intersects[0] === object2) {
    window.open(link2)
}

等等。

如果您以前没有使用过射线投射器，请在这里找到如何设置和使用它的好例子。