在three.js中的鼠标单击位置添加3d模型

Question

I am trying to add 3d model into the scene on mouse click , the position of the mesh should be the clicked mouse point.By using raycasting an projection

The mouseClick event code is

var Material = new THREE.MeshLambertMaterial({color : 0xfb0000});
Material.side = THREE.DoubleSide;


function mouseClick(event) {
    var mouse3D = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1,
    -( event.clientY / window.innerHeight ) * 2 + 1,
    0.5);

    var Projector = new THREE.Projector();
    Projector.unprojectVector(mouse3D, Camera);
    mouse3D.sub(Camera.position);
    mouse3D.normalize();

var raycaster = new THREE.Raycaster(Camera.position, mouse3D,0.1,100000);
var intersects;


intersects = raycaster.intersectObjects(Scene.children);
if (intersects.length > 0) {


    var Mesh = new THREE.Mesh(ArrowGeometry,Material);
    Mesh.scale.set(0.05,0.05,0.05);
    //Mesh.scale.set(5,5,5);
    Scene.add(Mesh);
    Mesh.name = "arrow";
    //Mesh.position.set(intersects[0].point);

    if(Scene.getObjectByName("arrow")!= undefined) {
        console.log("added");
    }
  console.log(  intersects[0].point);
}

}


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

when the position of the mesh is changed to 'intersects[0].point' the mesh is not visible. The rest of the code is

var Renderer;
var Scene;
var Light1;
var Camera;
var Mesh;
var Width;
var Height;
var Controls ;
var ArrowGeometry;

function initialize()
{
    Width = window.innerWidth;
    Height = window.innerHeight;

    Renderer = new THREE.WebGLRenderer({antialias :true,alpha : true})
    Renderer.setSize(Width,Height);
    document.body.appendChild(Renderer.domElement);
    Renderer.setClearColor(0x000000, 0);

    Scene = new THREE.Scene();

    Camera = new THREE.PerspectiveCamera(45,Width/Height,0.1,10000);
    Camera.position.set(3,12,13);
    Scene.add(Camera);

     Light1 = new THREE.HemisphereLight(0xffffff, 0x080820, .8);
    Light1.position.y = 100;
    Scene.add(Light1);

    var Geometry = new THREE.PlaneGeometry(20,20);
   var Material = new THREE.MeshLambertMaterial({color : 0xf6b68a});
    Material.side = THREE.DoubleSide;
   var Mesh = new THREE.Mesh(Geometry,Material);
    Mesh.rotateX(Math.PI/2);
    Mesh.name = "plane";
    Scene.add(Mesh);

  var Loader = new THREE.JSONLoader();
    Loader.load('models/arrow.json',function(geometry){

        ArrowGeometry = geometry;

    });


Controls = new THREE.OrbitControls(Camera,Renderer.domElement);

function animate()
{
    requestAnimationFrame(animate);
    Renderer.render(Scene,Camera);

}

window.onload = function()
{
    initialize();
    animate();
}

Answer 1

Mesh.position.set(intersects[0].point.x,intersects[0].point.y,intersects[0].poi‌​nt.z);