个人中心
gpt4 book ai didi

three.js - 拖动控件问题

转载 作者：行者123 更新时间：2023-12-04 08:01:09 26 4
gpt4 key购买 nike

我有一个问题，当我在立方体、圆柱体或球体等对象上使用 DragControls 时，它可以工作:我可以拖动这些对象，但是当我在使用 OBJLoader 的加载对象上使用它时，它不起作用我无法拖动它们
PS:我也在使用 OrbitContols，它适用于 Geometry 对象，但不适用于加载的对象。

//variables : 
var objects = [];

//scene
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );

//camera
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;



//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );




//adding light
scene.add( new THREE.AmbientLight( 0x0f0f0f ) );
var light = new THREE.SpotLight( 0xffffff, 1 );
light.position.set( 0, 500, 2000 );
scene.add(light);





//controls

const orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
const dragControls = new THREE.DragControls( objects, camera, renderer.domElement );


//fix the window resize problem 
window.addEventListener('resize', function(){
    renderer.setSize(window.innerWidth,window.innerHeight) ; 
    camera.aspect = window.innerWidth / window.innerHeight ; 
    camera.updateProjectionMatrix();
}) ;





function animate() {
    requestAnimationFrame( animate );
    renderer.render(scene, camera);
};


function createCube () {
    
    var geometry = new THREE.BoxGeometry( 200, 200, 200 );
    var cube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0x00004B } ) );
    scene.add( cube );
    objects.push( cube );
    cube.position.x = 0;
    cube.position.y = 0;
}



function createRockCube() {
    var texture = new THREE.TextureLoader().load( 'rock.jpg' );
    var rock_geometry = new THREE.BoxGeometry( 200, 200, 200 );
    var rock_material = new THREE.MeshBasicMaterial( {map: texture} );
    var rock_cube = new THREE.Mesh( rock_geometry, rock_material );
    scene.add( rock_cube );
    objects.push( rock_cube );
    rock_cube.position.x = -500;
    rock_cube.position.y = 0;
}


function createRobot() {
    var objLoader = new THREE.OBJLoader();
    objLoader.setPath('/examples/3d-obj-loader/assets/') ;
    objLoader.load('r2-d2.obj', function (object) {
        object.position.x = 500 ;
        objects.push( object );
        scene.add(object);
}) ; 
}

function createRobot2() {
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath('/examples/3d-obj-loader/assets/') ; 
    mtlLoader.load('r2-d2.mtl',  (materials)=> {
    materials.preload(); 
        
        var objLoader2 = new THREE.OBJLoader();
        objLoader2.setMaterials(materials);
        objLoader2.setPath('/examples/3d-obj-loader/assets/') ;
        objLoader2.load('r2-d2.obj',  (object2) =>{
        objects.push( object2 );
        scene.add(object2);
        });
})
}

function disableControl(){
    orbitControls.enabled = false;
}

function enableControl(){
    orbitControls.enabled = true;
}






animate();
body { 
    margin: 0px;
    background-color: rgb(240, 240, 240);
}
        

canvas {
    
    width: 100%; 
    height: 100vh ;
    position: absolute;
    
  
}


.btn-cube button {
    position: absolute;
    top: 4%;
    left: 8px;
    background-color: rgb(0, 0, 75);
    height: 50px;  
    width: 50px;
}



#close-image img {
    display: block;
    height: 50px;  
    width: 50px;
    position: absolute;
    top: 15%;
}

#move-btn {
    position: absolute;
    top: 45%;
    width: 100px;
}
#view-btn {
    position: absolute;
    top: 50%;
    width: 100px;
}

#robot-btn {
    position: absolute;
    top: 70%;
    width: 100px;
}

#robot2-btn {
    position: absolute;
    top: 75%;
    width: 100px;
}
<html>
    <head>
        <title>Three js</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <script  src="./three.min.js"></script>
        <script  src="./DragControls.js"></script>
        <script  src="./OrbitControls.js"></script>
        <script  src="./OBJLoader.js"></script>
        <script  src="./MTLLoader.js"></script>
        <script  src="./app.js"></script>
        

        <div class="btn-cube">
        <button onclick="createCube()"></button>
        </div>
        
        <button onclick="createRockCube()" id="close-image"><img src="./rock.jpg"></button>
        <button id="move-btn" onclick="disableControl()">move</button>
        <button id="view-btn" onclick="enableControl()"> view </button>
        <button id="robot-btn" onclick="createRobot()"> Robot </button>
        <button id="robot2-btn" onclick="createRobot2()"> Robot 2 </button>

    </body>
</html>

最佳答案

objects.push( object );


问题是 OBJ 加载器没有返回 THREE.Mesh 的实例。但是 THREE.Group .您必须遍历该组并将所有网格单独添加到 objects大批。所以 
object.traverse( function( o ) {

    if ( o.isMesh ) objects.push( o );

} );

关于three.js - 拖动控件问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66458239/

26 4 0
文章推荐： python - 创建用于数据框的函数
文章推荐： node.js - 成功付款重定向后，NodeJS Express session 变空
文章推荐： python - 是否有一个 Pandas 函数可以将例如前三行连接在一起(就像我有一个长度为三的窗口)
文章推荐： PostgreSQL : How to run ALTER queries returned as a result from SQL SELECT statement
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com