繁体   English   中英

在three.js中检测圆柱面

detect cylinder faces in three.js

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我创建了一个带有纹理和网格圆柱体的场景,以及一个带有三个顶点和三个顶点的网格。 通过向左或向右拖动鼠标,滚筒具有旋转效果。

<!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>

如何通过单击其表面来了解圆柱体的哪个面?

1 个回复

您必须从视点拍摄虚拟光线到立方体。 然后,您可以从相交的对象中读出face或faceIndex。

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_interactive_cubes示例

1 在 Three.js 中对圆柱体进行纹理化

我现在正在关注这个很长一段时间。 我在任何地方都找不到任何解决方案。 我正在尝试在圆柱体上应用 3 种不同的纹理(2 个盖子和侧面)但我完全不知道如何实现这一点。 你能给我指点迷津吗? 这是我现在正在做的事情: 正如你在这里看到的,我只在所有面上应用一种纹理。 但即使在大写字母上,它也没有真正显 ...

2 Three.js-编辑面孔

我以为我会在这里问这个问题,因为在任何地方都找不到任何信息(SO或three.js文档)-如何获得特定面孔的平均x,y,z坐标? 或者至少,有一种方法可以获取构成一个面的三个顶点的x,y,z坐标? 然后用那些来计算平均值? 到目前为止,我有 此外,除了移动顶点外,还有没有其他方 ...

3 THREE.js - 多个面孔

我试图使用WebGL为Three.js中的多维数据集提供多个面。 我确定关键在于 但我不明白如何使用“边”变量。 这是我的演示: http://enriquemorenotent.com/demos/cube/ ...

2012-02-28 09:51:19 1 1274   three.js
4 脸上的Three.js多维数据集

我正在尝试使用three.js创建360度全景图。 该计划是使用PlaneGeometry创建6个面,但我认为有一种更有效的方法。 我想大概使用CubeGeometry吗? 我可以利用MeshLambertMaterial来显示类似以下图像: http://www.html ...

5 Three.js-从点开始缩放圆柱

是否可以从特定点增加Y轴上的圆柱比例。 由于圆柱体不是从其原始位置向上和向下增长到新的比例,而是像条形图一样从顶部向上/向下生长。 当前代码: ...

6 three.js:thetaLength为负的圆柱体

我想使用thetaLength设置为-6.3的“倒置”圆柱体,以便将内部分类为FrontSide,以便该圆柱体可以进入另一个普通圆柱体,其顶部和底部均带有环,以形成管子。 我要执行所有操作的原因是,可以将整个对象用一种材料组合成一个网格。 如果不将thetaLength设置为负,则必须具 ...

7 Three.js线向量到圆柱体?

我有这个在两点之间创建一条线: (线宽,没有任何影响。) 我的问题是如何将其转换为圆柱体? 我想在两点之间创建一个圆柱体。 ...

2013-03-09 21:29:26 10 8425   three.js
8 三.js 圆柱面上的多个图像

我正在尝试使用three.js 在旋转圆柱体的外部(不是顶部或底部)显示多个图像。 我可以显示 1 张图像,但我的目标是并排显示多张图像。 我在材质数组中添加了 3 个纹理,但只显示了第一个。 任何帮助表示赞赏。 ...

9 Three.js-代表矢量的圆柱体的旋转

我正在使用three.js创建一个简单的3d矢量环境。 我使用线来表示所有3个矢量分量x,y,z,最后一行表示最终的矢量。 问题是在Windows中无法设置线宽。 我尝试实现的解决方法是将圆柱体放置在生产线上(请参见下图中的红色对象)。 那是我目前的结果: 如您所见,我无法将 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM