Javascript 在three.js中检测圆柱体面
我已经创建了一个带有纹理和网格的圆柱体以及一个网格的场景,网格的线和顶点为three.js。通过向左或向右拖动鼠标,圆柱体具有旋转效果Javascript 在three.js中检测圆柱体面,javascript,html5-canvas,three.js,Javascript,Html5 Canvas,Three.js,我已经创建了一个带有纹理和网格的圆柱体以及一个网格的场景,网格的线和顶点为three.js。通过向左或向右拖动鼠标,圆柱体具有旋转效果 <!DOCTYPE html> <html lang="en"> <head> <title>3d Model using HTML5 and three.js</title> <meta charset="utf-8"> <me
<!DOCTYPE html>
<html lang="en">
<head>
<title>3d Model using HTML5 and three.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="three.min.js" type="text/javascript"></script>
<script src="Stats.js" type="text/javascript"></script>
<script src="Detector.js" type="text/javascript"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, light, projector;
var particleMaterial;
var cylinder, line, geometry, geometry1;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var objects = [];
var radious = 1600, theta = 45, onMouseDownTheta = 45, phi = 60, onMouseDownPhi = 60, isShiftDown = false;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cylinder<br/>Objective: By spining left, cylinder should go into the surface and by spining right it should come out.';
container.appendChild( info );
// camera
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 200;
camera.position.z = 800;
// scene
scene = new THREE.Scene();
// light
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 0 );
scene.add( light );
// texture
var materials = [];
for ( var i = 0; i < 6; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
}//alert(materials.length);
// Grid
geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
for ( var i = 0; i <= 20; i ++ ) {
line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.z = ( i * 50 ) - 500;
scene.add( line );
line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.add( line );
}
// cylinder
geometry1 = new THREE.CylinderGeometry(100, 100, 300, 16, 4, false);
cylinder = new THREE.Mesh(geometry1 ,new THREE.MeshLambertMaterial( { color: 0x2D303D, wireframe: true, shading: THREE.FlatShading } ));
//cylinder.position.x = 100;
cylinder.position.y = -50;
//cylinder.overdraw = true;
scene.add(cylinder);
alert(geometry1.faces.length);
objects.push(cylinder);
// projector
projector = new THREE.Projector();
// renderer
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.left = window.innerWidth / - 2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = window.innerHeight / - 2;
camera.aspect = window.innerWidth / window.innerHeight;
//camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentTouchStart( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
cylinder.rotation.y += ( targetRotation - cylinder.rotation.y ) * 0.05;
renderer.render( scene, camera );
}
</script>
</body>
</html>
使用HTML5和three.js的3d模型
身体{
字体系列:Monospace;
背景色:#f0;
边际:0px;
溢出:隐藏;
}
如果(!Detector.webgl)Detector.addGetWebGLMessage();
var容器,stats;
摄像机、场景、渲染器、灯光、投影仪;
var粒子材料;
var圆柱、直线、几何、几何1;
var目标=0;
var targetRotationOnMouseDown=0;
var-mouseX=0;
var mouseXOnMouseDown=0;
var windowHalfX=window.innerWidth/2;
var windowHalfY=window.innerHeight/2;
var对象=[];
var radious=1600,θ=45,onMouseDownTheta=45,phi=60,onMouseDownPhi=60,isShiftDown=false;
init();
制作动画();
函数init(){
container=document.createElement('div');
文件.正文.附件(容器);
var info=document.createElement('div');
info.style.position='绝对';
info.style.top='10px';
info.style.width='100%';
info.style.textAlign='center';
info.innerHTML='拖动以旋转圆柱体
目标:向左旋转,圆柱体应进入曲面,向右旋转,圆柱体应出来';
container.appendChild(info);
//摄像机
摄像头=新的三个透视摄像头(70,window.innerWidth/window.innerHeight,11000);
摄像机位置y=200;
摄像机位置z=800;
//场面
场景=新的三个。场景();
//轻的
添加(新的三个环境光(0x404040));
灯光=新的三个方向灯光(0xffffff);
光。位置。设置(0,1,0);
场景。添加(灯光);
//质地
var材料=[];
对于(变量i=0;i<6;i++){
push(新的3.MeshBasicMaterial({color:Math.random()*0xffffff}));
}//警报(材料、长度);
//网格
几何体=新的三个。几何体();
geometry.vertices.push(新的3.Vector3(-500,0,0));
geometry.Vertexs.push(新的3.Vector3(500,0,0));
对于(var i=0;i,您必须从视点向立方体发射虚拟光线。然后您可以从相交对象读取面或面索引
function onDocumentMouseDown( event ) {
event.preventDefault();
// position of mouse + screen calc
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
// create a ray from the camera thru the vector
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
// array of intersecting object (front to back)
var intersects = ray.intersectObjects( objects );
// are we hitting something?
if ( intersects.length > 0 ) {
// first intersection should be the object (Mesh,...)
console.log(intersects[0].object);
// gimme face as THREE.Face3/4 object
console.log(intersects[0].face);
// tell me face index (int)
console.log(intersects[0].faceIndex);
// lets change color of the intersected object for fun
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}
}
另请查看canvas\u interactive\u cubes
example我是根据three.js中提供的示例执行此操作的。但无法识别圆柱体的面。单击鼠标时,我想确定选择或单击了圆柱体的哪个面。甚至我尝试了stackoverflow上的此问题。但未能成功。感谢n0oitaf。现在它正在显示选定面上的粒子和控制台上的面索引。但一旦我旋转圆柱体,已经出现的粒子将不会移动。它会出现在我之前单击的cyclinder上。这些粒子只是为了说明。删除了它们。我还添加了,您可以使用相交[0]访问面本身.face
好的,我明白了你的意思,还添加了控制台.log(intersects[0].face);
。为了以不同的颜色显示圆柱体的选定面,我使用了intersects[0].face.color.setHex(Math.random()*0xffffff);
。但它没有以颜色显示整个面。这是什么原因?