LOD object position

Hi guys, why my LOD object generate itself there ??

what do you mean?

The cap that stops at position (0,0,0) is part of the machine. It shouldn’t be there.

can you put the code to jsfiddle or codepen?

<title>three.js</title>

<style>

</style>
<script src="three.js"></script>

<script src="dat.gui.module.js"></script>

<script src="./DragControls.js"></script>

<script src="renderer_stats.js"></script>

<div id="info">

</div>

<div id="container"></div>

<script type="module">

    //import * as THREE from 'https://threejs.org//build/three.module.js';

    import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';

    import { GUI } from "./dat.gui.module.js";

    import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

    import { RoomEnvironment } from 'https://threejs.org/examples/jsm/environments/RoomEnvironment.js';

    //import{DragControls} from "https://threejs.org/examples/jsm/controls/DragControls.js";

    import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';

    import { DRACOLoader } from 'https://threejs.org/examples/jsm/loaders/DRACOLoader.js';

    //import { DragControls } from "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/controls/DragControls.js";

    //import { GLTFLoader } from 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/loaders/GLTFLoader.js';

    //import { DRACOLoader } from 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/loaders/DRACOLoader.js';

    //import { DragControls } from '../DragControls.js'

    let camera, scene, renderer;

    let stats;

    let spotLight, lightHelper, shadowCameraHelper;

    let grid;

    let controls;

    const objects = [];

    const lod = new THREE.LOD()

    var group = new THREE.Group(), geometry, plane;

    function init() {

        scene = new THREE.Scene();

        let material = new THREE.MeshPhongMaterial({

            color: 0x808080,

            dithering: true,

        });

        let geometry = new THREE.PlaneBufferGeometry(2000, 2000);

        let mesh = new THREE.Mesh(geometry, material);

        mesh.position.set(0, -1, 0);

        mesh.rotation.x = -Math.PI * 0.5;

        mesh.receiveShadow = true;

        scene.add(mesh);

        const container = document.getElementById('container');

        renderer = new THREE.WebGLRenderer({ antialias: true });

        //var ambient = new THREE.AmbientLight (0xffffff,0.5);

        //scene.add(ambient);

        renderer.setPixelRatio(window.devicePixelRatio);

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

        renderer.setAnimationLoop(render);

        renderer.outputEncoding = THREE.sRGBEncoding;

        renderer.toneMapping = THREE.ACESFilmicToneMapping;

        renderer.toneMappingExposure = 0.85;

        container.appendChild(renderer.domElement);

        spotLight = new THREE.SpotLight(0xffffff, 1);

        spotLight.position.set(15, 40, 35);

        spotLight.angle = Math.PI / 4;

        spotLight.penumbra = 0.1;

        spotLight.decay = 2;

        spotLight.distance = 200;

        spotLight.castShadow = true;

        spotLight.shadow.mapSize.width = 512;

        spotLight.shadow.mapSize.height = 512;

        spotLight.shadow.camera.near = 10;

        spotLight.shadow.camera.far = 200;

        spotLight.shadow.focus = 1;

        scene.add(spotLight);

        lightHelper = new THREE.SpotLightHelper(spotLight);

        //scene.add(lightHelper);

        shadowCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);

        //scene.add(shadowCameraHelper);

        renderer.shadowMap.enabled = true;

        renderer.shadowMap.type = THREE.PCFSoftShadowMap;

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

        stats = new Stats();

        container.appendChild(stats.dom);

        stats.update();

        //

        camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 100);

        camera.position.set(7, 5, 7);

        controls = new OrbitControls(camera, renderer.domElement);

        controls.rotatSpeed = 0.01;

        controls.dampingFactor = 0.05

        // controls.enableDamping = true

        //controls.screenSpacePanning = false    

    //  controls.target.set(0, 0, 0);

        //controls.addEventListener('change', renderer);

        controls.anablePan = false;

        controls.update();

        const environment = new RoomEnvironment();

        const pmremGenerator = new THREE.PMREMGenerator(renderer);

        //scene.environment = pmremGenerator.fromScene( environment ).texture;

        scene.fog = new THREE.Fog(0xeeeeee, 10, 50);

        grid = new THREE.GridHelper(100, 40, 0x000000, 0x000000);

        grid.material.opacity = 0.1;

        grid.material.depthWrite = false;

        grid.material.transparent = true;

        scene.add(grid);

        var directionalLight = new THREE.DirectionalLight(0xffffff);

        directionalLight.position.set(0, 0, 0);

        directionalLight.castShadow = true;

        scene.add(directionalLight);

        //const shadow = new THREE.TextureLoader().load( '"texture_file"' );

        const dracoLoader = new DRACOLoader();

        dracoLoader.setDecoderPath('/NEW');

        const loader = new GLTFLoader();

        loader.setDRACOLoader(dracoLoader);

        const bakedMaterial = new THREE.MeshBasicMaterial({ color: 0xffffe5, transparent: 0.5 })

        const dragmesh = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: 0.1 })

        const lod = new THREE.LOD()

        loader.load('./Test_LOD/New_Names/testNew2LOD.glb', function (gltf) {

            var austinMesh = gltf.scene

            austinMesh.rotation.set(3.14, 5, 0);

            austinMesh.position.set(0, 0, 0);

            //gltf.scene.scale.set(0.1, 0.1, 0.1)

            //gltf.scene.position.set(0,0,-10)

            gltf.scene.traverse(function (child) {

            });

            var dragControls = new THREE.DragControls([gltf.scene], camera, renderer.domElement);

            dragControls.addEventListener('dragstart', function (event) {

                controls.enabled = false

                event.object.material.color.set(0xff0000)

                event.object.material.transparent = 0.33

            })

            dragControls.addEventListener('dragend', function (event) {

                controls.enabled = true

                //event.material.color.set(gltf.scene)

                event.object.material.transparent = 1

            })

                const lod = new THREE.LOD();

                // scene.add(lod);

                

                let theResult4 = gltf.scene.getObjectByName("part1_1");

                

                let theResult = gltf.scene.getObjectByName("part1_2");

                let theResult2 = gltf.scene.getObjectByName("part1_3");

                let theResult3 = gltf.scene.getObjectByName("part1");

                theResult3.updateMatrix();

                theResult3.matrixAutoMatrixUpdate = false

            

                lod.addLevel(theResult, 10);

                lod.addLevel(theResult2, 12);

                lod.addLevel(theResult3, 13);

                lod.addLevel(theResult4, 17);

                lod.scale.set(0.01,0.01,0.01)

                //group.add(lod)

                scene.add(lod);

                console.log(mouse)

                                    

            //

            //  

            //

            //  if (children.isMesh) {

            //

            //           const geometry = children.geometry;

            //        var material = children.material;

            //      theResult =  gltf.scene.clone(geometry,material);

            //      gltf.scene.opacity = false ;

            //

            //                

            //

            //             scene.add( theResult );

            //            for (var i = gltf.scene.length - 1; i >= 0; i--) {

            //              theResult.remove(gltf.scene);

            //}

            //        lod.addLevel(theResult, 1);

            //       }

            //

            //          

            //let theResult2 = gltf.scene.getObjectByName("474-1801X10", true);

            //

            //

            //

            ////console.log(theResult2);

            //

            //

            //

            //if (children.isMesh) {

            //      

            //  

            //

            //      var geometry = children.geometry;

            //      var material = children.material;

            //      theResult2 =  gltf.scene.clone(geometry,material);

            //

            //      

            //

            //     scene.add( theResult2 );

            //      lod.addLevel(theResult2, 2);

            //  }

            //

            //

            //  

            //let theResult3 = gltf.scene.getObjectByName("474-1151X39 1", true);

            //

            //

            //

            ////console.log(theResult3);

            //

            //

            //if (children.isMesh) {

            //      var geometry = children.geometry;

            //      var material = children.material;

            //      theResult3 =  gltf.scene.clone(geometry,material);

            //

            //      

            //

            //     scene.add( theResult3 );

            //      lod.addLevel(theResult3, 3);

            //  }

            //

            //  // // Get each object

            //const LOD1 =  gltf.scene.getObjectByName("D_912-M8X25", true);

            //const LOD2 = gltf.scene.getObjectByName("474-1801X10", true);

            //const LOD3 =  gltf.scene.getObjectByName("474-1801X10", true);

            // console.log(LOD1)

            // console.log(LOD2)

            // console.log(LOD3)

            //

            //scene.add(lod);

            //scene.add(gltf.scene);

            //console.log(children);

            //scene.add(gltf.scene)

            //children.material = bakedMaterial

            //console.log(LOD1);

            //console.log(typeof children);

            //  if ( children instanceof THREE.Mesh ) {

            //child.material.ambient.setHex(0xFF0000);

            //child.material.color.setHex(0xaa0000);

            //  }

            //Origin Axes

            var arrowHelper = new THREE.Scene();

            arrowHelper.background = new THREE.Color(0xdddddd);

            arrowHelper.add(new THREE.AxesHelper(1000));

            scene.add(arrowHelper);

            //austinMesh.scale.set(1, 1, 1);

            

            //controls.update();

            

            var stats = new Stats();

            //renderer.render(scene, camera);

            //renderer_stats_update(0);

            const gui = new GUI();

            const rotationFolder = gui.addFolder("Rotation")

            austinMesh.rotation.reorder("YXZ")

            rotationFolder.add(austinMesh.rotation, "x", 0, Math.PI * 2)

            rotationFolder.add(austinMesh.rotation, "z", 0, Math.PI * 2)

            rotationFolder.add(austinMesh.rotation, "y", 0, Math.PI * 2)

            rotationFolder.open();

            const cameraFolder = gui.addFolder('Camera')

            cameraFolder.add(camera.position, 'z', 0, 10)

            cameraFolder.open();

            const positionFolder = gui.addFolder("Position")

            positionFolder.add(austinMesh.position, 'x', -15, Math.PI * 2)

            positionFolder.add(austinMesh.position, 'y', 0, Math.PI * 2)

            positionFolder.add(austinMesh.position, 'z', 0, Math.PI * 2)

            positionFolder.open();

            const params = {

                "light color": spotLight.color.getHex(),

                intensity: spotLight.intensity,

                distance: spotLight.distance,

                angle: spotLight.angle,

                penumbra: spotLight.penumbra,

                decay: spotLight.decay,

                focus: spotLight.shadow.focus,

            };

            const LightFolder = gui.addFolder("Light")

            {

                LightFolder.addColor(params, "light color").onChange(function (val) {

                    spotLight.color.setHex(val);

                    render();

                });

                LightFolder.add(params, "intensity", 0, 2).onChange(function (val) {

                    spotLight.intensity = val;

                    render();

                });

                LightFolder.add(params, "distance", 50, 200).onChange(function (val) {

                    spotLight.distance = val;

                    render();

                });

                LightFolder.add(params, "angle", 0, Math.PI / 3).onChange(function (val) {

                    spotLight.angle = val;

                    render();

                });

                LightFolder.add(params, "penumbra", 0, 1).onChange(function (val) {

                    spotLight.penumbra = val;

                    render();

                });

                LightFolder.add(params, "decay", 1, 2).onChange(function (val) {

                    spotLight.decay = val;

                    render();

                });

                LightFolder.add(params, "focus", 0, 1).onChange(function (val) {

                    spotLight.shadow.focus = val;

                    render();

                });

            }

            function search() {

            }

            function render() {

                lightHelper.update();

                shadowCameraHelper.update();

                renderer.render(scene, camera);

            }

            //scene.add(gltf.scene);

            // shadow

            const mesh = new THREE.Mesh(

                new THREE.PlaneBufferGeometry(0.655 * 4, 1.3 * 4),

                new THREE.MeshBasicMaterial({

                    blending: THREE.MultiplyBlending, toneMapped: false, transparent: true

                })

            );

            mesh.rotation.x = - Math.PI / 2;

            mesh.rotation.y = - Math.PI / 2;

            mesh.rotation.z = - Math.PI / 2;

            mesh.renderOrder = 2;

            austinMesh.add(mesh);

            scene.add(austinMesh);

            //console.log(renderer.info);

        });

        render();

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();

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

    }

    function render() {

        //scene.add(lod);

        const time = - performance.now() / 10;

        //  grid.position.z = - ( time ) % 5;

        renderer.render(scene, camera);

        stats.update();

    }

    init();

</script>

Have you tried put the model to Blender or THREEJS Editor see if that works?Can’t run your code

Because that model loading from my folder