Raycastings mit jsonloader

$(function() { 
 

 
    /*global 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 init() { 
 
    $(".popup").hide(); 
 

 

 
    /*creates 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); 
 

 

 
    //hemi light 
 
    hemi = new THREE.HemisphereLight(0xbbbbbb, 0x660066); 
 
    scene.add(hemi); 
 

 
    /*adds spot light with starting 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); 
 
    }); 
 

 
    //add raycaster and mouse as 2D vector 
 
    raycaster = new THREE.Raycaster(); 
 
    mouse = new THREE.Vector2(); 
 

 
    //add event listener for mouse and calls function when activated 
 
    document.addEventListener('mousedown', onDocumentMouseDown, false); 
 
    document.addEventListener('touchstart', onDocumentTouchStart, false); 
 

 

 
    $("#webGL-container").append(renderer.domElement); 
 

 
    } 
 

 
    function onDocumentTouchStart(event) { 
 

 
    event.preventDefault(); 
 

 
    event.clientX = event.touches[0].clientX; 
 
    event.clientY = event.touches[0].clientY; 
 
    onDocumentMouseDown(event); 
 

 
    } 
 

 
    function onDocumentMouseDown(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 render() { 
 

 
    scene.rotation.y += .001; 
 
    } 
 

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

 
});

<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">&times;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>

Das Problem, das ich bin vor hier ist die Ray-Casting-Funktion nicht funktioniert, habe ich keine Ahnung, warum. Was ich will, ist, wenn ich auf ein Zeichen in der Szene klicke, sollte ein Popup erscheinen und Informationen bezüglich dieses Charakters anzeigen und die Informationen werden vordefiniert sein. Wenn mir jemand helfen kann, wäre das großartig.

Quelle

2016-10-09 sharad gupta

var intersects = raycaster.intersectObjects(objects);

Hier ist das Array objects leer. Sie müssen die mesh8 in diesem Array hinzufügen.

Quelle

2016-10-10 09:31:27

Können Sie mir bitte sagen, wie man mesh8 in diesem Array hinzufügen @ rasheduzzaman –

Sie können diese Zeile hinzufügen - 'objects.push (mesh8);' nach der Zeile - 'scene.add (mesh8);' –

Danke Das hat funktioniert . aber wie kann ich zwischen jedem Charakter unterscheiden, weil jedes Zeichen die gleiche Uuid hat und beim Klicken jedes Zeichens dieselbe Information anzeigt. @ rasheduzzaman –

Raycastings mit jsonloader

Antwort

Verwandte Themen