javascript - three.js - 放大/缩小完整的管几何结构-6ren

javascript - three.js - 放大/缩小完整的管几何结构

转载作者：搜寻专家更新时间：2023-10-31 23:08:53

我创建了一个管几何图形，其中包含从 JSON 格式的外部 javascript 文件加载的 200 个点的数据。请找到以下代码。

<!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>          
        <input type="button" value="plot" onClick="return plotPath();" />        
        <script src="three.min.js" type="text/javascript"></script>
        <script src="Curve.js" type="text/javascript"></script>
        <script src="TubeGeometry.js" type="text/javascript"></script>              
        <script src="Stats.js" type="text/javascript"></script>
        <script src="Detector.js" type="text/javascript"></script>      
        <script src="path.js" type="text/javascript"></script>

        <script>

        // variables
        var container, stats;

        var camera, scene, renderer, controls, stats;

        var text, plane, tube, tubeMesh, parent;

        var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var mouseX = 0;
        var mouseXOnMouseDown = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        var radius = 600;
        var theta = 0;
        var PI2 = Math.PI * 2;

        function plotPath()
        {                                           
            var obj = getPath();
            var segments = 50;
            var closed = false;
            var debug = true;
            var radiusSegments = 12;
            var tube;
            var points = [];
            var x=0,y=0,z=0;                    

            for(var i=0; i<obj.path.length; i++)
            {                               
                console.log(obj.path[i].point);
                points.push(obj.path[i].point);
                extrudePath = new THREE.SplineCurve3(points);
                extrudePath.dynamic = true;

                tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed, debug);
                tube.dynamic = true;

                tubeMesh = new THREE.Mesh(tube ,new THREE.MeshBasicMaterial({
                    color: 0x000000, side: THREE.DoubleSide,
                    opacity: 0.5, transparent: true, wireframe: true}));
                tubeMesh.__dirtyVertices = true;
                tubeMesh.dynamic = true;

                parent = new THREE.Object3D();
                parent.position.y = 100;

                if ( tube.debug ) tubeMesh.add( tube.debug );
                parent.add( tubeMesh );                                 
            }
            scene.add( tubeMesh );
            scene.add(parent);                      

            animate();                          
        } 

        init();                             

        function init(){

            // container
            container = document.createElement( 'div' );
            document.body.appendChild( container );                 

            // renderer         
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setClearColorHex(0xEEEEEE, 1.0);            
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.clear();
            container.appendChild( renderer.domElement );                   

            // camera           
            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.set(-100,75,75);                    

            // scene            
            scene = new THREE.Scene();
            camera.lookAt(scene.position);

            // light            
            scene.add( new THREE.AmbientLight( 0x404040 ) );
            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 0, 1, 0 );
            scene.add( light ); 

            // CONTROLS
            controls = new THREE.TrackballControls( camera );               

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

            // projector
            projector = new THREE.Projector();

            plotPath();

            // 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( 'mouseover', onDocumentMouseOver, false );
            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            document.addEventListener( 'touchmove', onDocumentTouchMove, false );
            window.addEventListener('DOMMouseScroll', mousewheel, false);
            window.addEventListener('mousewheel', mousewheel, false);
            window.addEventListener( 'resize', onWindowResize, false );
        }

        function mousewheel(event) {

            var fovMAX = 160;
            var fovMIN = 1;

            camera.fov -= event.wheelDeltaY * 0.05;
            camera.fov = Math.max( Math.min( camera.fov, fovMAX ), fovMIN );
            camera.projectionMatrix = new THREE.Matrix4().makePerspective(camera.fov, window.innerWidth / window.innerHeight, camera.near, camera.far);

        }

        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;         

            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 onDocumentMouseOver( 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, renderer.domElement );
            render();
            update();
        }

        function update(){
            controls.update();          
        }

        function toCameraCoords(position) {
              return camera.matrixWorldInverse.multiplyVector3(position.clone());
            }

        function render() {                 
            tubeMesh.rotation.y += ( targetRotation - tubeMesh.rotation.y ) * 0.15;                     
            camera.lookAt(scene.position);
            camera.updateMatrixWorld();
            renderer.render( scene, camera );
        }
        </script>        
    </body>
</html>

当我使用鼠标滚轮放大时，相机会在管的起点放大。如何使管的几何形状可以完全缩放，或者换句话说，管的任何部分都可以缩放？

最佳答案

与任何传统的现实生活相机一样，您可以通过调用 setLens 方法更改 THREE.PerspectiveCamera 的焦距(变焦)。我发现这种方式非常直观，比移动相机来放大/缩小要简单得多。

three.js 中的方法文档如下:

/**
 * Uses Focal Length (in mm) to estimate and set FOV
 * 35mm (fullframe) camera is used if frame size is not specified;
 * Formula based on http://www.bobatkins.com/photography/technical/field_of_view.html
 */
THREE.PerspectiveCamera.prototype.setLens = function ( focalLength, frameHeight )
...

这是一个用法示例:

var focalLength = 25.734; // equivalent to FOV=50
$('#scene').mousewheel(function (event, delta, deltaX, deltaY) {
    event.preventDefault();

    focalLength += deltaY;
    camera.setLens(focalLength);
});

jQuery.fn.mousewheel 方法由 Mousewheel Plugin 提供.

关于javascript - three.js - 放大/缩小完整的管几何结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12636370/

文章推荐： php - 如何在 Symfony2 中创建 IP 黑名单？

文章推荐： html - 使用 vim 正则表达式在 vim 中查找重复的连续字符串

文章推荐： PHP 将 XML 加载到对象中

文章推荐： php - Google Calendar API 出错 - 添加日历事件时需要 401 登录

c - 结构 |结构/union 的不完整类型错误
我目前正在尝试基于哈希表构建字典。逻辑是:有一个名为 HashTable 的结构，其中包含以下内容: HashFunc HashFunc; PrintFunc PrintEntry; CompareF
c++ - 如何删除指向(结构/对象)的指针而不破坏(结构/对象)内部的指针？
如果我有一个指向结构/对象的指针，并且该结构/对象包含另外两个指向其他对象的指针，并且我想删除“包含这两个指针的对象而不破坏它所持有的指针”——我该怎么做这样做吗？指向对象 A 的指针(包含指向对象
go - 如何访问该“结构” slice 的新“类型”中的“结构”字段？
像这样的代码 package main import "fmt" type Hello struct { ID int Raw string } type World []*Hell
mysql - 将 CSV 移动到 MySQL 关系数据库的第一步。 CSV 结构!= MySQL 结构
我有一个采用以下格式的 CSV: Module, Topic, Sub-topic 它需要能够导入到具有以下格式的 MySQL 数据库中: CREATE TABLE `modules` ( `id
c++ - 将 POD 结构/结构 vector 复制到 vector 的最优雅方式
通常我使用类似的东西 copy((uint8_t*)&POD, (uint8_t*)(&POD + 1 ), back_inserter(rawData)); copy((uint8_t*)&PODV
apache-spark - Spark : Union can only be performed on tables with the compatible column types. 结构<名称，ID> != 结构
错误 : 联合只能在具有兼容列类型的表上执行。结构(层:字符串，skyward_number:字符串，skyward_points:字符串)<> 结构(skyward_number:字符串，层:字符
条件跳转或移动取决于未初始化的值、结构
我有一个指向结构的指针数组，我正在尝试使用它们进行 while 循环。我对如何准确初始化它并不完全有信心，但我一直这样做: Entry *newEntry = malloc(sizeof(Entry)
C "if"结构
我正在学习 C，我的问题可能很愚蠢，但我很困惑。在这样的函数中: int afunction(somevariables) { if (someconditions)
创建列表的列表(结构)
我现在正在做一项编程作业，我并没有真正完全掌握链接，因为我们还没有涉及它。但是我觉得我需要它来做我想做的事情，因为数组还不够我创建了一个结构，如下 struct node { float coef;
C符号常量+结构
给定以下代码片段: #include #include #define MAX_SIZE 15 typedef struct{ int touchdowns; int intercepti
Checknullarray 结构
struct contact list[3]; int checknullarray() { for(int x=0;x<10;x++) { if(strlen(con
javascript "for (;;);"结构
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Empty “for” loop in Facebook ajax what does AJAX call
C# 结构 "this = ...."
我刚刚在反射器中浏览了一个文件，并在结构构造函数中看到了这个: this = new Binder.SyntaxNodeOrToken(); 我以前从未见过该术语。有人能解释一下这个赋值在 C# 中的
用于命名字符串常量的 Python 结构
我经常使用字符串常量，例如: DICT_KEY1 = 'DICT_KEY1' DICT_KEY2 = 'DICT_KEY2' ... 很多时候我不介意实际的文字是什么，只要它们是独一无二的并且对人类读
用指针初始化 C 结构
我是 C 的新手，我不明白为什么下面的代码不起作用: typedef struct{ uint8_t a; uint8_t* b; } test_struct; test_struct
可以像内置类型一样直接分配常量值的 .NET 结构
您能否制作一个行为类似于内置类之一的结构，您可以在其中直接分配值而无需调用属性？前任: RoundedDouble count; count = 5; 而不是使用 RoundedDouble cou
编译 C 结构
这是我的代码: #include typedef struct { const char *description; float value; int age; } swag
r - 重叠嵌套列表并保留命名/结构
在创建嵌套列表时，我认为 R 具有对列表元素有用的命名结构。我有一个列表列表，并希望应用包含在任何列表中的每个向量的函数。 lapply这样做但随后剥离了列表的命名结构。我该怎么办 lapply嵌套列
个人管理器的 XML 结构
我正在做一个用于学习目的的个人组织者，我从来没有使用过 XML，所以我不确定我的解决方案是否是最好的。这是我附带的 XML 文件的基本结构:
couchdb - PouchDB 结构
我是新来的 nosql概念，所以当我开始学习时 PouchDB ，我找到了这个转换表。我的困惑是，如何PouchDB如果可以说我有多个表，是否意味着我需要创建多个数据库？因为根据我在 pouchdb

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - three.js - 放大/缩小完整的管几何结构