Javascript 如何在Three.JS中更改导入模型的位置？_Javascript_Three.js_3d_Gltf

Javascript 如何在Three.JS中更改导入模型的位置？

javascript three.js 3d

Javascript 如何在Three.JS中更改导入模型的位置？,javascript,three.js,3d,gltf,Javascript,Three.js,3d,Gltf,我正在尝试用Three.JS（Pepperghost效果）制作一张全息图，为了让它工作，我需要4个旋转模型我有一个有效的POC（）。这是一个STL模型，所以我无法向它添加纹理。我做了一些研究，给了gLTF一个机会。我得到了一个带有纹理的模型，导入都成功了，但是旋转部分没有像我预期的那样工作以下是问题的gif图：我想让它绕着自己的轴旋转，而不是绕圈子。我认为问题在于，它没有将其导入居中，因此这将是模型位置的问题，而不是旋转部分的问题（这是mesh.rotation.y+=0.01；）我尝试

我正在尝试用Three.JS（Pepperghost效果）制作一张全息图，为了让它工作，我需要4个旋转模型

我有一个有效的POC（）。这是一个STL模型，所以我无法向它添加纹理。我做了一些研究，给了gLTF一个机会。我得到了一个带有纹理的模型，导入都成功了，但是旋转部分没有像我预期的那样工作

以下是问题的gif图：我想让它绕着自己的轴旋转，而不是绕圈子。我认为问题在于，它没有将其导入居中，因此这将是模型位置的问题，而不是旋转部分的问题（这是

mesh.rotation.y+=0.01；

）

我尝试使用

mesh.position.set（）

函数移动网格，但这会移动整个场景（我想这就是您所说的？）

另外，正如你在最后一张gif上看到的，我还有一个问题，胸部只显示两次。也许这和我的另一个问题有关

我试着把它放在一个

jsfiddle

中，但是因为我无法上传不起作用的模型。这是我要导入的三维模型：

peppersghost文件可以在这里找到


三点全息图
var容器；
摄像机、场景、渲染器、效果、网格、立方体；
var组；
//var cameraTarget=新的三个矢量3（0，-0.25,0）；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
//console.log（window.innerWidth/window.innerHeight）
摄像头=新的三个透视摄像头（60，window.innerWidth/window.innerHeight，11000）；
场景=新的三个。场景（）；
//scene.background=新的三种颜色（0xffd300）；
var环境光=新的三个环境光（0xffffff）；
var灯=新的三点灯（0xffffff，2.0200）；
照相机。添加（环境光）；
相机。添加（灯光）；
场景。添加（摄影机）；
摄像机位置z=1100；
摄像机。注视（场景。位置）；
const gltfLoader=new THREE.gltfLoader（）；
gltfLoader.load（'/media/autoconvert/scene.gltf'，（gltf）=>{
mesh=gltf.scene；
//网格位置设置（0,100,0）
//网格。比例。设置（3，1，1）；
场景。添加（网格）；
const box=new THREE.Box3（）.setFromObject（网格）；
const-boxSize=box.getSize（新的三个.Vector3（））.length（）；
const-boxCenter=box.getCenter（新的3.Vector3（））；
});
var renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setPixelRatio（window.devicePixelRatio）；
container.appendChild（renderer.doElement）；
效果=新的三个。PeppersGhostEffect（渲染器）；
效果.设置大小（window.innerWidth、window.innerHeight）；
影响系数=5；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
效果.设置大小（window.innerWidth、window.innerHeight）；
}
函数animate（）{
请求动画帧（动画）；
网格旋转y+=0.02；
//var timer=Date.now（）*0.0005；
//camera.position.x=数学cos（计时器）*3；
//camera.position.z=Math.sin（计时器）*3；
//摄像机。注视（摄像机目标）；
渲染（场景、摄影机）；
}

谢谢

编辑：谢谢你的帮助！我尝试了两种解决方案，但仍然遇到问题：（

首先，我试着得到第一个孩子。虽然它不像以前那样绕着圈子旋转，但它仍然以错误的方式旋转，它只显示了两个模型，而不是四个：

然后我扩展并添加了一个组，如下所示：

group=new THREE.group（）；scene.add（group）；

和

group.add（mesh）

而不是

scene.add（mesh）

这是我在那之后得到的：

如您所见，它仍然不起作用。我仍在试图找到解决问题的方法。欢迎您提出任何其他建议！

gltf。scene

是一个实际的3.js，包含导入模型中的所有对象，因此您要查找的网格是此场景的子对象。如果没有其他内容，则很可能是第一个。所以请尝试

mesh=gltf.scene.children[0]

并且您应该能够直接控制模型的位置、缩放和旋转。为了扩展此功能，。如果您发现对象没有围绕所需的轴心点旋转或缩放。。您可以插入Object3D或Group节点作为网格的父节点，然后操纵该节点，而不是网格。。允许您使用网格设置轴的位置/缩放/旋转。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Three.js Hologram POC</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
    <script src="peppersghost.js"></script>
    <!-- <script charset="utf-8" src="STLLoader.js"></script> -->
    <!-- <script src="three.module.js"></script> -->
    <!-- <script src="http://threejs.org/build/three.min.js"></script> -->
    <script src="http://threejs.org/examples/js/loaders/MTLLoader.js"></script>
    <script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
    <script src="http://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

</head>

<body>

    <script type="module">



        var container;

        var camera, scene, renderer, effect, mesh, cube;
        var group;
        // var cameraTarget = new THREE.Vector3( 0, - 0.25, 0 );

        init();
        animate();

        function init() {

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


            // console.log(window.innerWidth / window.innerHeight)
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100000 );



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

            var ambientLight = new THREE.AmbientLight(0xffffff);

            var light = new THREE.PointLight(0xffffff, 2.0, 200);
            camera.add(ambientLight);
            camera.add(light);

            scene.add(camera);

            camera.position.z = 1100;
            camera.lookAt(scene.position);



            const gltfLoader = new THREE.GLTFLoader();
            gltfLoader.load('/media/autoconvert/scene.gltf', (gltf) => {
                mesh = gltf.scene;
                // mesh.position.set(0, 100, 0)
                // mesh.scale.set(3, 1, 1);
                scene.add(mesh);


                const box = new THREE.Box3().setFromObject(mesh);

                const boxSize = box.getSize(new THREE.Vector3()).length();
                const boxCenter = box.getCenter(new THREE.Vector3());


            });


            var renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setPixelRatio( window.devicePixelRatio );
            container.appendChild( renderer.domElement );

            effect = new THREE.PeppersGhostEffect( renderer );
            effect.setSize( window.innerWidth, window.innerHeight );
            effect.cameraDistance = 5;

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            effect.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );

            mesh.rotation.y += 0.02;

            // var timer = Date.now() * 0.0005;
            // camera.position.x = Math.cos( timer ) * 3;
            // camera.position.z = Math.sin( timer ) * 3;
            // camera.lookAt( cameraTarget );


            effect.render( scene, camera );

        }

        </script>

</body>

</html>