javascript - キャンバス インタラクティブ キューブ onDocumentMouseDown() 関数を回転キューブに配置しようとしています。問題があります。なぜ？

Question

このオープン ソース キューブは、チュートリアル Web サイトの 1 つから借りてきました。

<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とさまざまな機能を適用する方法を学ぼうとしていますが、webGLやthree.jsはもちろん、Javascriptの初心者でもあるので、おそらく基本が欠けています。

ありがとうございました！！