Add another model in scene and move together

Questions
1

There is a group in my scene, and it’s position and rotation is changing in requestAnimationFrame,like:
group.position.x+=Math.random()*10
group.rotation.y+=Math.random()*10
There is a button which user can click to add a cube on top face of group. The cube’s position and rotation are same as group.

Here is question, my code is
…
const cube=new THREE.Mesh(g,m)
group.add(cube)

the cube is added to scene,but it’s postion and rotation are fixed. How can the cube moves or rotates with group?

2

Here is question

Where :') ? (Your code itself is alright, for what I can see.)

3

sorry, I didn’t make it clear. The cube was added in the group after user click a button, but the cube cannot move or rotate with the group. How can I make the cube move with group?

4

Can you share a codepen or jsfiddle replicating the issue? If the cube is really added to the group, it should inherit group transformation (without any additional steps necessary.)

5 
getItemsData() {
        requestAnimationFrame(this.getItemsData)
        
        if (Date.now() - this.dataSetting.itemsLastTime < this.dataSetting.itemsDiffTime) {   
            return 0  
        }
        this.dataSetting.itemsLastTime = Date.now()

        axios({
            url: this.dataSetting.itemsURL,
            method: 'post',
        }).then(res => {
            this.dataSetting.itemsData = res.data       //get new data
            ....
            ....
            const addItems = []  //object.name, will add in the scene
            const delItems = []  //object.name, will delete from the scene
            
            for (let i = 0; i < newItems.length; i++) {
                if (lastItems.includes(newItems[i]) === false) {
                    addItems.push(newItems[i])
                }
            }
           
            for (let i = 0; i < lastItems.length; i++) {
                if (newItems.includes(lastItems[i]) === false) {
                    delItems.push(lastItems[i])
                }
            }

            for (let i = 0; i < delItems.length; i++) {
                const name = 'Package-' + delItems[i]
                scene.remove(scene.getObjectByName(name))            //it works!
            } 

            for (let i = 0; i < addItems.length; i++) {

                const info = this.dataSetting.itemsData[addItems[i]]     //get the mesh size, color, etc
                const pkg = scene.getObjectByName('_pkg_back').clone()
                pkg.scale.set(10, 10, 10)
                pkg.visible = true
                pkg.name = 'Package-' + addItems[i]

                    const agv = scene.getObjectByName(info.location)        //in renderScene(), the AGV is a group and moving
                    agv.add(pkg)   //<----------------------------------here is add in a group

                scene.add(pkg)
            }

        }).catch(err => {
            console.log( err)
        })
    }        ,
6

it moves suddenly… Thank you for your time

1 Like