javascript - 试图将画布交互式立方体 onDocumentMouseDown() 函数放置在旋转立方体上。我有问题。为什么？

Question

我从一个教程网站借用了这个开源多维数据集：

<script src="http://www.html5canvastutorials.com/libraries/Three.js">
</script>
<script>
window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();

function animate(lastTime, angularSpeed, three){
    // update
    var date = new Date();
    var time = date.getTime();
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    three.cube.rotation.y += angleChange;
    lastTime = time;

    // render
    three.renderer.render(three.scene, three.camera);

    // request new frame
    requestAnimFrame(function(){
        animate(lastTime, angularSpeed, three);
    });
}

window.onload = function(){
    var angularSpeed = 0.2; // revolutions per second
    var lastTime = 0;

    // 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 = 700;

    // scene
    var scene = new THREE.Scene();

    // material
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    });

    // cube
    var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300), material);
    cube.overdraw = true;
    scene.add(cube);

    // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x555555);
    scene.add(ambientLight);

    // add directional light source
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // create wrapper object that contains three.js objects
    var three = {
        renderer: renderer,
        camera: camera,
        scene: scene,
        cube: cube
    };

    animate(lastTime, angularSpeed, three);
};

它会生成一个蓝色的旋转立方体。

我想添加画布交互式立方体的这些交互式元素。特别是允许在用户单击时将点添加到从光线检测到的立方体或对象的功能。

https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes.html

在多维数据集代码中使用下面的函数不起作用。为什么？任何人都可以向我解释基本知识以及我想为这个立方体改变什么，或者让我们说任何其他对象？我应该将此代码放在我的代码中的什么位置？

这是我下面带有混合元素的代码。为什么它不起作用？

<script src="http://www.html5canvastutorials.com/libraries/Three.js">
</script>
<script>
window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();

function animate(lastTime, angularSpeed, three){
    // update
    var date = new Date();
    var time = date.getTime();
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    three.cube.rotation.y += angleChange;
    lastTime = time;

    // render
    three.renderer.render(three.scene, three.camera);

    // request new frame
    requestAnimFrame(function(){
        animate(lastTime, angularSpeed, three);
    });
}

window.onload = function(){
    var angularSpeed = 0.2; // revolutions per second
    var lastTime = 0;

    // 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 = 700;

    // scene
    var scene = new THREE.Scene();

    // material
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    });

    // cube
    var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300), material);
    cube.overdraw = true;
    scene.add(cube);

    // add subtle ambient lighting
    var ambientLight = new THREE.AmbientLight(0x555555);
    scene.add(ambientLight);

    // add directional light source
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // create wrapper object that contains three.js objects
    var three = {
        renderer: renderer,
        camera: camera,
        scene: scene,
        cube: cube
    };

    animate(lastTime, angularSpeed, three);


function init() { 

            container = document.createElement( 'div' );
            document.body.appendChild( container );

var PI2 = Math.PI * 2;
            particleMaterial = new THREE.ParticleCanvasMaterial( {

                color: 0x000000,
                program: function ( context ) {

                    context.beginPath();
                    context.arc( 0, 0, 1, 0, PI2, true );
                    context.closePath();
                    context.fill();

                }

            } );

            projector = new THREE.Projector();

            renderer = new THREE.CanvasRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.appendChild( renderer.domElement );

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

            document.addEventListener( 'mousedown', onDocumentMouseDown, false );

            //

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

            }


function onDocumentMouseDown( event ) {

            event.preventDefault();

            var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
            projector.unprojectVector( vector, camera );

            var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

            var intersects = raycaster.intersectObjects( objects );

            if ( intersects.length > 0 ) {

                intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

                var particle = new THREE.Particle( particleMaterial );
                particle.position = intersects[ 0 ].point;
                particle.scale.x = particle.scale.y = 8;
                scene.add( particle );

            }

             }; 

             }; 

本质上我正在尝试学习three.js以及如何应用不同的功能，但我仍然是Javascript的新手，更不用说webGL或three.js了，所以我可能缺少基础知识。

谢谢！！