nunuStudio
nunuStudio copied to clipboard
External HTML Link inside of the scene?
I was wondering if possible to MouseClickOn (basically when you be able to click on some 3D object in the scene) external HTML link? I tried to find any example, but nothing so far :(
what I found so far.
Sample that works, just not sure how incorporate it into nunu, to the object I need. Basically what I thought about, create an invisible box behind menu options (a couple of them lead to external links) but now I'm trying to figure out how to implement this code into the nunu webeditor hmhmhmhmhm
import * as THREE from "https://threejs.org/build/three.module.js";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(-10, 5, 10);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let button = new THREE.Mesh(new THREE.BoxBufferGeometry(5, 3, 1), new THREE.MeshNormalMaterial());
scene.add(button);
document.addEventListener("click", onBtnClick);
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let intersects;
function onBtnClick(event){
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
intersects = raycaster.intersectObject(button);
if (intersects.length > 0){
window.open("https://threejs.org", "_blank");
}
}
renderer.setAnimationLoop(()=>{
renderer.render(scene, camera);
})
this is final solution so far. scene with example attached. ButtonTest3.zip
`function initialize() { }
function update() {
//Check interseted objects - checking all files grouped with the script
var intersects = scene.raycaster.intersectObjects(self.children);
//Link
for(var i = 0; i < intersects.length; i++)
{
if(Mouse.buttonPressed(Mouse.LEFT))
{
window.open("https://nunustudio.org", "_blank");
}
}
} `
Hello
This code can be simplified by a lot there is a default onMouseOver
method available for scripts.
This method is automatically called when the mouse is over one of the children elements of the script.
function onMouseOver(intersections)
{
if (Mouse.buttonJustPressed(Mouse.LEFT)) {
window.open("https://nunustudio.org", "_blank");
}
}