JavaScript交互式三维对象

JavaScript interactive 3D Object

本文关键字：对象三维交互式 JavaScript 更新时间：2023-09-26

我正试图用JavaScript创建一个交互式Sphere来为HCI赋值，问题是我是JavaScript和Three.js的新手。

我想要的是让它在点击球体时显示特定主题的统计数据。我已经创建了球体并将其制成一个对象，但我在球体的交互方面遇到了问题。我不在乎当点击球体时是否会打开div或警报，但我只需要它作为一个伪版本工作

以下是JavaScript和THRE.js:中的一个示例

    var sphere = new Object({}); //declared sphere as an object first.
     var angularSpeed = 0.2; 
     var lastTime = 0;
     function animate (){
      //update
      var time = (new Date()).getTime();
      var timeDiff = time - lastTime;
      var angleChange = angularSpeed * timeDiff * 0.1 * Math.PI / 1000;
      sphere.rotation.y -= angleChange;
      sphere2.rotation.sphere -=angleChange;
      lastTime = time;
      // render
      renderer.render(scene, camera);
      requestAnimationFrame(function(){ //request new frame
        animate();
        });
    }
      // renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      // camera
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1,          1000);
      camera.position.z = 500;
      // scene
      var scene = new THREE.Scene();

      //material
      var material = new THREE.MeshLambertMaterial({
      map:THREE.ImageUtils.loadTexture('images/earth2.jpg')});

      //sphere geometry
   sphere = new THREE.Mesh(new THREE.SphereGeometry( 100, 50, 50 ), material);
   sphere.overdraw = true;
   sphere.rotation.x = Math.PI * 0.1;
   sphere.position.x= 0; // moves position horizontally (abscissa) + = right and - = left
   sphere.position.y= 0;  // moves position virtually (ordinate) + = right and - = left
   sphere.position.z= 0; // moves position z (applicate) + = forwards and - = backwards 
      scene.add(sphere);
      //animate
      animate();
      var sphere = new Object:({event});
   function statistics(){
   alert('You clicked on the div!') // displays the statistics before the rendering
    };
        sphere.onMouseDown=statistics(event);

.onMouseDown仅适用于HTML元素。您不能将此函数用于THRE.js对象，但Raycaster正是您想要的！

jsfiddle

            var container, stats;
    var camera, scene, projector, raycaster, renderer, selected, sphere;
    var mouse = new THREE.Vector2(), INTERSECTED;
    init();
    animate();
    function init() {
        container = document.createElement( 'div' );
        document.body.appendChild( container );
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
        scene = new THREE.Scene();
        var light = new THREE.DirectionalLight( 0xffffff, 2 );
        light.position.set( 1, 1, 1 ).normalize();
        scene.add( light );
        var light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( -1, -1, -1 ).normalize();
        scene.add( light );
        sphere = new THREE.Mesh(new THREE.SphereGeometry( 20, 50, 50 ), new THREE.MeshNormalMaterial());
        sphere.overdraw = true;
        scene.add(sphere);
        projector = new THREE.Projector();
        raycaster = new THREE.Raycaster();
        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor( 0xf0f0f0 );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.sortObjects = false;
        container.appendChild(renderer.domElement);
        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        window.addEventListener( 'resize', onWindowResize, false );
        renderer.domElement.addEventListener( 'mousedown', onCanvasMouseDown, false);
    }
    function animate() {
        requestAnimationFrame( animate );
        render();
    }
    function render() {
        camera.lookAt(new THREE.Vector3(0,0,0));
        camera.position = new THREE.Vector3(0,100,100);
        // find intersections
        var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
        projector.unprojectVector( vector, camera );
        raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
        selected = raycaster.intersectObjects( scene.children );
        renderer.render( scene, camera );
    }
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }
    function onDocumentMouseMove( event ) {
        event.preventDefault();
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    }
    //detect mouse click on the sphere
    function onCanvasMouseDown( event ){
        if(selected[0].object==sphere){
            statistics();
        }
    }
    function statistics(){
       alert('You clicked on the div!') // displays the statistics before the rendering
    };