How to create hotspots in 3d enviroment using threejs? - javascript

I'm a beginner to three.js.I'm trying to build something similar to this https://virtualshowroom.nissan.in/car-selected.html?selectedCar=ext360_deep_blue_pearl. I built everything using three.js, but I'm not able to figure out how to create a hotspot(like the red dot in the above link) and show pop up when you click on it. below is my project code, let me know if anything else is required.
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<h1></h1>
<script src="./three.js"></script>
<script type="module">
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
var renderer,scene,camera;
scene = new THREE.Scene();
scene.background = new THREE.Color(0xfff6e6)
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var loader = new GLTFLoader();
var hlight = new THREE.AmbientLight(0x404040, 100)
scene.add(hlight)
var directionalLight = new THREE.DirectionalLight(0xffffff, 100)
directionalLight.position.set(0,1,0)
directionalLight.castShadow = true
scene.add(directionalLight)
var light = new THREE.PointLight(0xffffff, 10)
light.position.set(0, 300, 500)
scene.add(light)
var light2 = new THREE.PointLight(0xffffff, 10)
light2.position.set(500, 100, 0)
scene.add(light2)
var light3 = new THREE.PointLight(0xffffff, 10)
light3.position.set(0, 100, -500)
scene.add(light3)
var light4 = new THREE.PointLight(0xffffff, 10)
light4.position.set(-5000, 300, 0)
scene.add(light4)
var controls = new OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement)
var loader = new GLTFLoader();
loader.load( './scene.gltf', function ( gltf )
{
scene.add( gltf.scene );
}, undefined, function ( error ) { console.error( error ); } );
// load a image resource
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>

Those “hotspots” as you call them are Annotations where the annotation content is basically pure HTML.
The tutorial in the link is probably the best step-by-step readiness you can follow to learn how to do it in your scene.

I can give a walkthrough on the steps required to get the desired effect since I have done it a few times myself.
define a 3d point in your scene where the hotspot should be. You can optionally nest this in a an other Object3D to make sure it scales, moves and rotates with the model / parent.
Add a plane to this point load a image texture to this plane. and there you have your visible hotspot
update the hotspots to make sure they are always looking at the camera by using the lookAt function.
when the user clicks the screen cast a raycast against all the hotspots you have in your scene. Easiest way to do this is by storing all your hotspots in an array.
When the raycast hits a hotspot get the location either of the hitpoint or the hotspots location. Transform that to screen coordinates. Search on stackoverflow how to do this. I am sure there is a post about this.
Final step display your html on the correct location you obtained from the previous step.
The advantage of this method is that the hotspot will integrate nicely with the model in your scene. Since html based hotspots will always be on top of the scene.
That is about all that is to it. Let me know if you need any further clarification!

Related

Problem with mouse-camera raycasting in threejs

I try to make a very simple program with a clickable 3d object in Threejs. My code is based on
https://threejs.org/examples/#webgl_interactive_cubes
It works when I click on the object (although the resulting array contains the object twice, I assume because the ray intersects it when entering it and when exiting it).
But when I click in an area just surrounding the object raycaster.intersectObjects returns the object although it should return an empty array.
What am I doing wrong? Why is the object also intersected when I click next to it and not on it? And is an object always included twice in the intersect array because of the ray entering and exiting it?
A working example of the code is here:
https://codepen.io/ettir_deul/pen/PoGLNZx
(open the console to see the intersect array after you clicked on the screen)
And the code looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="libs/three.min.js.r116.1"></script>
</head>
<body>
<div id="threejsCanvas"></div>
<script>
let scene, center, camera, renderer, raycaster;
const mouse = new THREE.Vector2();
const threejsCanvas = document.getElementById("threejsCanvas");
init3d();
function init3d(){
scene = new THREE.Scene();
scene.background = new THREE.Color(0xAAAAEE);
center = new THREE.Vector3(0, 0, 0);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(center.x, center.y, center.z+1);
camera.lookAt(center);
buttonMesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.2), new THREE.MeshBasicMaterial({map : null, color: 0x008844, wireframe: false, side: THREE.DoubleSide}));
buttonMesh.position.set(center.x, center.y, center.z);
scene.add(buttonMesh);
buttonMesh.objId = "buttonMesh";
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
threejsCanvas.appendChild(renderer.domElement);
renderer.render(scene, camera);
raycaster = new THREE.Raycaster();
document.addEventListener('click', onMouseClick, false);
}
function onMouseClick(event){
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
console.log(intersects);
}
</script>
</body>
</html>
the reason for getting the object twice is the
side: THREE.DoubleSide
in the material. You can use THREE.FrontSide
The reason for picking the object when the mouse is close is the canvas and window dimensions not being equal.
If you add :
body{
padding: 0;
margin: 0;
}
in the CSS it is fixed.
Here is a codepen that works.
Two results - is OK. You got 2 faces of mesh. Each one intersects ray. Check result intersection properties: face, faceIndex, point.
Raycaster is not precise and pretty slow. You can use its 'params' to change precision (see https://threejs.org/docs/#api/en/core/Raycaster). I suggest using GPUPicker. It is precise and super fast. Check here:
https://github.com/brianxu/GPUPicker
Edit: Yes you can change material to avoid 2 intersections. But it is often it is not acceptable for surfaces.
Edit: Yes precision settings affects only points and line picking. But GPUPicker can pick exact rendering result of points (shader effects, symbols with transparency). But standard raycaster - can't.

Changing sites as continous animation with Three.js

I was looking at this website called Garden-Eight and they have this very beautiful transition when you change from "Home" to "About Us". I am really interested in how they made it so smooth and continuous without loading screens or any loading time at all.
It looks like it has to be one scene, but watching the URL one can watch a change in the address so there must be some kind of change in the site location.
I am not necessarily looking at this kind of highly complex transitions.
It would be great if I could create some kind of seemingly continuous camera movement along the x axis that changes as a starting point.
For example, I made this very short animation with this JavaScript:
var camera, scene, renderer, geometry, material, mesh, geometryNew, materialNew, meshNew;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
scene.add(camera);
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0,0,0);
scene.add(mesh);
geometryNew = new THREE.CubeGeometry(200, 200, 200);
materialNew = new THREE.MeshNormalMaterial();
meshNew = new THREE.Mesh( geometryNew, materialNew);
meshNew.position.set(800,0,0);
scene.add(meshNew);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
meshNew.rotation.x -= 0.01;
meshNew.rotation.y -= 0.02;
if(camera.position.x < 800)
camera.position.x += 3
renderer.render(scene, camera);
}
You can watch the animation in this JSFiddle.
What I want to achieve is that the first cube is on the landing page and the second cube is on another page. Can this be done by some kind of asynchronous loading or is there a built-in method, that helps to switch from one canvas to the other?
This is a single-page-app, (SPA), which means it's all one HTML page, regardless what the URL updates to. Some frameworks, like React, have a very complex methodology to implement this, and it would take an entire tutorial to teach.
For simplicity's sake, I recommend you look into the window.onhashchange event to do a fake "change address" without loading a new page. For instance, going from site.com/ to site.com/#about would trigger the event, and then you can start your animation on the same canvas:
window.onhashchange = function() {
if (location.hash === '#about') {
// animate camera to about section
} else if (location.hash === '#work') {
// animate camera to work section
} else if (location.hash === '') {
// animate camera to home section
}
}
Then you can set the hash to change the URL and trigger the event above:
// Adds #about hash to URL, and triggers event listener
location.hash = "#about";
// Removes any hash, and triggers event listener
location.hash = "";

Why my Three.js code isn't working when i test it?

I'm trying out Three.js, I followed a tutorial step-by-step. In the code editor I'm using( Visual Studio Code 2019) everything seems normal, but when I test it, nothing appears on the page.
the editor I'm using, used the desktop as the place to locate my code, since it is a .html file I could run it. When I did that, the only thing that appeared was the navbar I programmed, nothing else
This is the entire three.js code:
<script src="three.js-dev/build/three.min.js"> </script>
<script>
var scene = new THREE.scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight);
var renderer = new THREE.WebGLRenderer({antialias = true});
renderer.setSize( window.innerWidth, window.innerHeight);
$('body').append( renderer.domElement);
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial ( { color = 0xff0000 });
var cube = new THREE.Mesh( geometry, material) ;
scene.add( cube );
cube.position.z = -5;
var animate = function () {
cube.rotation.x += 0.01;
renderer.render(scene, camera);
requestAnimationFrame( animate );
};
animate();
and this the code before it:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script
src="https://code.jquery.com/jquery-2.1.4.js"
integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4="
crossorigin="anonymous"></script>
</head>
<body>
<div id="navbar"><span>Three.js Tut</span></div>
I expected a red cube rotating, but nothing appeared. ¿Is there something I'm doing wrong?
You have a few errors in your code:
THREE.scene should be THREE.Scene
{antialias = true} should be {antialias: true}
{ color = 0xff0000 } should be { color: 0xff0000 }
Live demo with your code: https://jsfiddle.net/so736vxj/
BTW: If you are using VSCode, I'm a bit irritated that no errors are highlighted. Especially the last two syntax errors should be reported since it is no valid JavaScript.
three.js R105

How to make a menu before my three program starts executing

I´ve started programming using three.js a little time ago, and I would like to know how to make a menu on a page before it loaded the program using three itself.So, for instance I would like before running my game to have two options:"start" and "music control" being desplayed before it loaded itself.
Is this made using three, or do you use html, javascript files?(Sorry, I really don´t know how to even start it).
If possible, I would like some tutorials or even videos about it.
I would like something like this for example:
http://www.dilladimension.com/
http://lights.helloenjoy.com/
You probably do want to use html to display the menu and js to control the instantiation of your scene.
Rather than use the page load event to set up your renderer, etc, put them inside a function, and use js events to begin the function:
function start() {
var renderer = new THREE.WebGLRenderer();
...
// more setup
...
renderer.render(scene, camera);
};
Then activate this method with a button or a link:
<button onclick="start()">
Start Scene
</button>
Here's a test implementation:
function start() {
var renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
35, // Field of view
800 / 600, // Aspect ratio
0.1, // Near plane
10000 // Far plane
);
camera.position.set(-15, 10, 10);
camera.lookAt(scene.position);
var geometry = new THREE.BoxGeometry(5, 5, 5);
var material = new THREE.MeshLambertMaterial({
color: 0xFF0000
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var light = new THREE.PointLight(0xFFFF00);
light.position.set(10, 0, 10);
scene.add(light);
renderer.setClearColor(0xdddddd, 1);
renderer.render(scene, camera);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
<button onclick="start()">
Start Scene
</button>

Three.js: jsonLoader will not load textures no matter what

Help, I'm getting multiple brain spasms trying to figure this out. I'm using r74 the most recent version threejs and I've created a model in blender and exported it using the most recent plugin. When I run my program, it loads the 3d file just fine, but it should also load the texture and apply it, right? Well it isn't, and according to everything I've seen online and every article I've read I'm doing it right. So what the heck! Is three.js broken right now?
Anyway, rants aside, here is my javascript code:
<!doctype html>
<html lang="en">
<head>
<title>Imported Model (Three.js)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel=stylesheet href="css/base.css"/>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/THREEx.KeyboardState.js"></script>
<script src="js/THREEx.FullScreen.js"></script>
<script src="js/THREEx.WindowResize.js"></script>
<!-- jQuery code to display an information button and box when clicked. -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel=stylesheet href="css/jquery-ui.css" />
<link rel=stylesheet href="css/info.css"/>
<script src="js/info.js"></script>
<div id="infoButton"></div>
<div id="infoBox" title="Demo Information">
This three.js demo is part of a collection at
http://stemkoski.github.io/Three.js/
</div>
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<script>
// MAIN
// standard global variables
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var clock = new THREE.Clock();
// custom global variables
var android;
init();
animate();
// FUNCTIONS
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);
// RENDERER
renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
// EVENTS
THREEx.WindowResize(renderer, camera);
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);
// SKYBOX/FOG
var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
// scene.add(skyBox);
scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );
//JSON LOADER HERE !!!!!!!
// Note: if imported model appears too dark,
// add an ambient light in this file
// and increase values in model's exported .js file
// to e.g. "colorAmbient" : [0.75, 0.75, 0.75]
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load("map/titled.json", addModelToScene );
jsonLoader.setTexturePath("http://localhost:8080/map/");
// addModelToScene function is called back after model has loaded
var ambientLight = new THREE.AmbientLight(0x111111);
scene.add(ambientLight);
}
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshFaceMaterial( materials );
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(10,10,10);
scene.add( mesh );
}
function animate()
{
requestAnimationFrame( animate );
render();
update();
}
function update()
{
if ( keyboard.pressed("z") )
{
// do something
}
controls.update();
stats.update();
}
function render()
{
renderer.render( scene, camera );
}
</script>
</body>
</html>
Json file (titled.json):
"materials":[{
"DbgIndex":81,
"DbgColor":15658734,
"depthTest":true,
"shading":"phong",
"wireframe":false,
"depthWrite":true,
"transparent":false,
"DbgName":"Material.002",
"colorSpecular":[0.5,0.5,0.5],
"visible":true,
"colorEmissive":[0,0,0],
"opacity":1,
"colorDiffuse":[0.64,0.64,0.64],
"specularCoef":50,
"blending":"NormalBlending"
},{
"DbgIndex":117,
"DbgColor":15658734,
"depthTest":true,
"shading":"phong",
"wireframe":false,
"depthWrite":true,
"transparent":false,
"DbgName":"Material",
"colorSpecular":[0.5,0.5,0.5],
"visible":true,
"colorEmissive":[0,0,0],
"opacity":1,
"colorDiffuse":[0.64,0.64,0.64],
"specularCoef":50,
"blending":"NormalBlending"
}],
--- edit --- in response to gaitat ---
I know.
Earlier I was using the old version of the blender plug-in "io_mesh_three" and I would choose the same settings as I'm choosing now, and there would a be reference to my texture in the json file. However, I recently found that the old blender plug-in, according to mrdoob found here: (https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender), had been completely replaced. So I installed the new plug-in, and with the new exporter options ui I could't quite tell if I was using the same settings or not, but the reference would no longer show up, so I figured it just didn't need the reference. I think I'm having trouble understanding what's happening because there isn't a lot of support online for the more recent versions of three.js. Most of what I've found has been support for the older versions, so I'm just fishing to try and find a solution to get my code to load my json file AND apply the texture.

Categories