在鼠标点击位置添加3D模型.js
Add 3d model in the position of mouse click in three.js
我正在尝试在鼠标单击时将 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].point.z);
相关文章:
- 如何在HTML5中查看3D模型
- 在 JavaScript/HTML5 中显示 3D 模型
- 使用3d模型作为图标,而无需在Google地球插件中进行缩放
- 使用三.js和
- 在鼠标点击位置添加3D模型.js
- 我有一个应用程序,我想在画布上生成 3D 模型,但我不知道要使用哪个工具
- 当前哪个WebGL库支持大多数3D模型格式(以及哪些)
- 使用 HTML5 画布元素和 Javascript 加载 3D 模型
- Three.js 3D模型在应用纹理后消失
- 如何将ASCII JSON 3D模型文件转换为二进制文件
- 在3D模型上绘制原始2D形状
- 用JS在HTML上旋转3D模型
- JavaScript运行时错误:无法获取property 'geometries'当将3D模型导入thr
- 我如何使用画布实现3D模型查看器,如wowhead's网站使用的画布
- 如何在Three.js中加载.obj 3D模型
- 如何在three.js中创建一个颜色选择器,这将允许用户改变Maya 3D模型中特定多边形的颜色
- 在谷歌地球中加载/刷新3D模型
- 为什么我无法让这个 3D 模型 (.obj) 显示在屏幕上
- Three.js如何缓存(本地存储)3d模型和纹理
- Javascript和画布3D模型查看器