1

Three.js に関するこのコードについて助けが必要です。すべてが正しく、機能する他のコードからコピーされているため、なぜ機能しないのかわかりません。問題は、マウス ホバリング効果が機能しないことです。

<html>
<head>
    <title>NUEVO</title>
    <style>canvas { width: 100%; height: 100% }</style>
</head>

<body>

    <script src="js/libs/Tween.js"></script>
    <script src="js/libs/stats.min.js"></script>
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>

    <script>

        var scene,camera,rendered,projector;
        var mouseX, mouseY, stats, container;
        var objects=[];
        var INTERSECTED;
        var theta = 0;

        init();
        animate();

        function init(){ 

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 20000);
            camera.position.set( 0, 150, 400 );
            camera.lookAt(scene.position);  

            renderer = new THREE.CanvasRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight); 
            container = document.createElement( 'div' );
            document.body.appendChild( container );
            container.appendChild( renderer.domElement );

            projector = new THREE.Projector(); 

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.bottom = '0px';
            stats.domElement.style.zIndex = 100;
            container.appendChild( stats.domElement );

            for (var i=0; i<3; i++)
            {
                var geometry = new THREE.CubeGeometry(40,40,40); 
                var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
                var cube = new THREE.Mesh(geometry, material);
                cube.position.x = (i*200) -200 
                objects.push(cube);
                scene.add(cube);
            }

            window.addEventListener( 'resize', onWindowResize, false );
        }

        function onDocumentMouseDown( event ) 
        {
            event.preventDefault();
            mouseX =  ( event.clientX / window.innerWidth ) * 2 - 1;
            mouseY = - ( event.clientY / window.innerHeight ) * 2 + 1;
        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }


        function animate()
        {
            requestAnimationFrame(animate);
            render();
            update();
        }


        function update()
        {

            var vector = new THREE.Vector3( mouseX, mouseY, 1 );
            projector.unprojectVector( vector, camera );

            var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
            var intersects = ray.intersectObjects( scene.children );

            if ( intersects.length > 0 ) {

                if ( intersects[ 0 ].object != INTERSECTED ) 
                {
                    if ( INTERSECTED ) 
                        INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
                        // store reference to closest object as current intersection object
                        INTERSECTED = intersects[ 0 ].object;
                        // store color of closest object (for later restoration)
                        INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
                        // set a new color for closest object
                        INTERSECTED.material.color.setHex( 0xffff00 );  

                } else {// there are no intersections 
                    // restore previous intersection object (if it exists) to its original color
                    if ( INTERSECTED ) 
                        INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
                        // remove previous intersection object reference
                        //     by setting current intersection object to "nothing"
                        INTERSECTED = null;
                }

                /*  for(var i=0; i<3; i++)
                {  
                    objects[i].rotation.y += 0.05; 
                }*/
            }
        }

        function render() 
        { 
            //theta += 0.4;
            camera.position.x = 300 * Math.sin( theta * Math.PI / 360 );
            camera.position.y = 300 * Math.sin( theta * Math.PI / 360 );
            camera.position.z = 300 * Math.cos( theta * Math.PI / 360 );
            camera.lookAt( scene.position );

            renderer.render(scene, camera);
        }   


    </script>



</body>
</html>
4

1 に答える 1

4

これはあなたが望むものです：

http://jsfiddle.net/Lx6nE/4/

何が問題でしたか:

  • Three.js へのリンクは、縮小されたソースに向けられている必要があります。
  • ちらつきのため、ブレースは右にインデントする必要があります
  • mousedown イベントをキャプチャする必要があります。

コード：

   var scene,camera,rendered,projector;
    var mouseX, mouseY, stats, container;
    var objects=[];
    var INTERSECTED;
    var theta = 0;

    init();
    animate();

    function init(){ 

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 20000);
        camera.position.set( 0, 150, 400 );
        camera.lookAt(scene.position);  

        renderer = new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight); 
        container = document.createElement( 'div' );
        document.body.appendChild( container );
        container.appendChild( renderer.domElement );

        projector = new THREE.Projector(); 

        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.bottom = '0px';
        stats.domElement.style.zIndex = 100;
        container.appendChild( stats.domElement );

        for (var i=0; i<3; i++)
        {
            var geometry = new THREE.CubeGeometry(40,40,40); 
            var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
            var cube = new THREE.Mesh(geometry, material);
            cube.position.x = (i*50) -60
            objects.push(cube);
            scene.add(cube);
        }

        window.addEventListener( 'resize', onWindowResize, false );
        window.addEventListener( 'mousedown', onDocumentMouseDown, false );
    }

    function onDocumentMouseDown( event ) 
    {
        event.preventDefault();
        mouseX =  ( event.clientX / window.innerWidth ) * 2 - 1;
        mouseY = - ( event.clientY / window.innerHeight ) * 2 + 1;
    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }


    function animate()
    {
        requestAnimationFrame(animate);
        render();
        update();
    }


    function update()
    {

        var vector = new THREE.Vector3( mouseX, mouseY, 1 );
        projector.unprojectVector( vector, camera );

        var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
        var intersects = ray.intersectObjects( scene.children );

        if ( intersects.length > 0 ) {

            if ( intersects[ 0 ].object != INTERSECTED ) 
            {
                if ( INTERSECTED ) 
                    INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
                    // store reference to closest object as current intersection object
                    INTERSECTED = intersects[ 0 ].object;
                    // store color of closest object (for later restoration)
                    INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
                    // set a new color for closest object
                    INTERSECTED.material.color.setHex( 0xffff00 );  

            }
        } else {// there are no intersections 
                // restore previous intersection object (if it exists) to its original color
                if ( INTERSECTED ) 
                    INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
                    // remove previous intersection object reference
                    //     by setting current intersection object to "nothing"
                    INTERSECTED = null;

            /*  for(var i=0; i<3; i++)
            {  
                objects[i].rotation.y += 0.05; 
            }*/
        }
    }

    function render() 
    { 
        //theta += 0.4;
        camera.position.x = 300 * Math.sin( theta * Math.PI / 360 );
        camera.position.y = 300 * Math.sin( theta * Math.PI / 360 );
        camera.position.z = 300 * Math.cos( theta * Math.PI / 360 );
        camera.lookAt( scene.position );

        renderer.render(scene, camera);
    }

</p>

于 2012-11-13T13:58:52.477 に答える