在鼠标点击位置添加3D模型.js

Add 3d model in the position of mouse click in three.js

本文关键字:3D 模型 js 添加 位置 鼠标      更新时间:2023-09-26

我正在尝试在鼠标单击时将 3D 模型添加到场景中,网格的位置应该是单击的鼠标点。通过使用光线投射投影

鼠标单击事件代码为

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);

当网格的位置更改为"相交[0].point"时,网格不可见。代码的其余部分是

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();
}
Mesh.position.set(intersects[0].point.x,intersects[0].point.y,intersects[0].poi‌​nt.z);