Question

我试图从网格中显示的体素中获取值。数据来自.csv和我使用d3.js这样做。

除了raycaster（three.js version = r71）之外，一切似乎都正常。我一直在搜索raycaster，如果它在三个不同的版本中发生了变化，

我使用r71和以下参考： http://threejs.org/docs/#Reference/Core/Raycaster以及其中提供的示例。

尝试了以下操作，但它无法正常工作。 [某些代码已被删除，因为它不需要像颜色，相机位置，控件设置，光..等等]

/// To get the last element of the array
if (!Array.prototype.last){Array.prototype.last = function(){return this[this.length - 1];};};
/// To make D3's .append() and .selectAll() work
THREE.Object3D.prototype.appendChild = function (c) {this.add(c); return c;}
THREE.Object3D.prototype.querySelectorAll = function () {return [];}
/// To use D3's .attr() on THREE's objects
THREE.Object3D.prototype.setAttribute = function (name, value) {
    var chain = name.split('.');
    var object = this;
    for (var i = 0; i < chain.length - 1; i++) {
        object = object[chain[i]];
    }
    object[chain[chain.length - 1]] = value;
}

var camera, scene, renderer, chart3d, raycaster, container, mouse;

    gridMaker();
    animate();

function gridMaker(){
    var data = [];

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 15000 );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.sortObjects = false;

    scene = new THREE.Scene();

    var geometry = new THREE.BoxGeometry(1, 1, 1); 
    var material = new THREE.MeshLambertMaterial( {color: 0x00ff00 });

    container.appendChild(renderer.domElement);

    chart3d = new THREE.Object3D();
    chart3d.rotation.x = 0.2;
    scene.add( chart3d );

    d3.csv("Analysis.csv", function(error, csv){
        if (error) throw error;
        var data = csv;

        var boxes = d3.select( chart3d ).selectAll()
            .data(data)
            .enter().append( function() { return new THREE.Mesh( geometry, material ); } )
            .attr("position.x", function(d) { return d.X*1.1})
            .attr("position.z", function(d) { return d.Y*1.1 })
            .attr("sun", function(d) { return d.SUN*100; })
            .attr("id", function(d) { return d.ID; })
            boxes.each( function(){           
                var materialUpdate = new THREE.MeshLambertMaterial( {color: newColor });
                this.material = materialUpdate;
            });

        raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2();
        controls = new THREE.TrackballControls(camera, renderer.domElement);

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

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

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

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

function render() {
    camera.updateMatrixWorld();

    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children );

    for ( var i = 0; i < intersects.length; i++ ) {
        console.log("clicked!");
        intersects[ i ].object.material.color.set( 0xff0000 );
    }
    renderer.render( scene, camera );
}

Raycaster在Three.js（r71）+ D3中无效

0 个答案: