nunuStudio icon indicating copy to clipboard operation
nunuStudio copied to clipboard

External HTML Link inside of the scene?

Open petepolyakov opened this issue 4 years ago • 3 comments

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 :(

petepolyakov avatar Oct 10 '20 01:10 petepolyakov

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);
})

petepolyakov avatar Oct 11 '20 02:10 petepolyakov

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");
	}
	
}

} `

petepolyakov avatar Oct 11 '20 05:10 petepolyakov

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");
	}
}

tentone avatar Oct 12 '20 08:10 tentone