Three.js , групповая ротация

#javascript #three.js

#javascript #three.js

Вопрос:

Итак, у меня есть две геометрии коробки:

 var box;
loader.load( 'img/plytos.jpg', function ( texture ){
var boxGeometry = new THREE.BoxGeometry(7,0.5,0.5);
var boxMaterial =  new THREE.MeshLambertMaterial({ map: texture, overdraw: 0.5 });
box = new THREE.Mesh(boxGeometry, boxMaterial);
box.castShadow = true;

box.position.x=15;
box.position.y=5;
box.position.z=2.7; 
group.add(box);


var box;
loader.load( 'img/plytos.jpg', function ( texture ){
var boxGeometry = new THREE.BoxGeometry(7,7,0.5);
var boxMaterial =  new THREE.MeshLambertMaterial({ map: texture, overdraw: 0.5 });
box = new THREE.Mesh(boxGeometry, boxMaterial);
box.castShadow = true;

box.position.x=15;
box.position.y=5;
box.position.z=2.7; 
group.add(box);
 

Оба они находятся в одной группе, которая вращается вокруг:

 group.rotation.y  = ctrl.groupStep; 
 

Итак, допустим, я хочу, чтобы они продолжали вращаться таким образом, потому что в одной группе больше разных объектов, но я также хотел бы, чтобы эти две геометрические формы вращались во время вращения.
Поэтому я попытался добавить эту строку рядом с group.rotation:

 box.rotation.z  = 0.02;
 

Однако вращается только один блок.

Как заставить их обоих вращаться?

Ответ №1:

После некоторых исследований я добился желаемых результатов. Я переименовал второй ящик в box2.