$(function() {
/*custom built variables*/
var scene, camera, renderer;
var controls, guiControls, datGUI;
var stats;
var spotLight, hemi;
var SCREEN_WIDTH, SCREEN_HEIGHT;
var mouse, raycaster;
var objects = [];
function initialSetup() {
$(".popup").hide();
/*creating an empty scene object and renderer*/
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, .1, 500);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0xFFFFFF);
renderer.setSize(window.innerWidth, window.innerHeight * .8);
renderer.shadowMap.enabled = false;
renderer.shadowMapSoft = false;
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 30;
camera.lookAt(scene.position);
//adding hemisphere light
hemi = new THREE.HemisphereLight(0xbbbbbb, 0x660066);
scene.add(hemi);
/*adds spot light with initial parameters*/
spotLight = new THREE.SpotLight(0xffffff);
spotLight.castShadow = false;
spotLight.position.set(20, 35, 40);
scene.add(spotLight);
var loader = new THREE.JSONLoader();
loader.load('shreeganeshsweets.in/1.json', function(geometry, materials) {
var mesh8 = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
mesh8.translation = THREE.GeometryUtils.center(geometry);
mesh8.position.x = 0;
mesh8.position.y = 0;
mesh8.position.z = 0;
scene.add(mesh8);
});
//adding raycaster and mouse as vectors in 2D
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
//adding event listener for mouse and calling function when activated
document.addEventListener('mousedown', handleMouseDown, false);
document.addEventListener('touchstart', handleTouchStart, false);
$("#webGL-container").append(renderer.domElement);
}
function handleTouchStart(event) {
event.preventDefault();
event.clientX = event.touches[0].clientX;
event.clientY = event.touches[0].clientY;
handleMouseDown(event);
}
function handleMouseDown(event) {
event.preventDefault();
mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects);
//var color = (Math.random() * 0xffffff);
if (intersects.length > 0) {
//intersects[ 0 ].object.material.color.setHex( color );
this.temp = intersects[0].object.material.color.getHexString();
this.name = intersects[0].object.name;
$(".text").empty();
$(".popup").append("<div class='text'><p>This is the color <strong>#" + this.temp + "</strong> and the name assigned in Blender is <strong>" + this.name + "</strong></p></div>");
$(".popup").show();
}
}
function renderScene() {
scene.rotation.y += .001;
}
function animateScene() {
requestAnimationFrame(animateScene);
renderScene();
renderer.render(scene, camera);
}
initialSetup();
animateScene();
$(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);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<HTML>
<title>Demo Page</title>
<style>
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
overflow: hidden;
}
.popup {
height: 100%;
width: 100%;
top: 0;
left: 0;
color: red;
background: rgba(1, 1, 0, 0.5);
position: fixed;
display: none;
font-size: 30px;
}
.text {
color: blue;
background: rgb(1, 1, 1);
left: 50px;
top: 20px;
}
</style>
<body>
<div class="popup">
<div class="text"></div>
<button id="close">×close</button>
</div>
<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="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<script type="text/javascript" src="OrbitControls.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>I am encountering an issue with the raycasting functionality not working as expected in my code setup. I am aiming to have a pop-up appear with predefined information related to the clicked character in the scene. If anyone has insights or solutions regarding this matter, it would be greatly appreciated.