JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<button id="rotate" onclick="MoveRotateCenter()" >Move and rotate the center</button>
JavaScript
// I would like to move and rotate the center, but not the cube
var objMesh;
window.onload=function(){
info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.style.color = '#fff';
info.style.fontWeight = 'bold';
info.style.backgroundColor = 'transparent';
info.style.zIndex = '1';
info.style.fontFamily = 'Monospace';
info.innerHTML = 'Drag mouse to rotate camera';
document.body.appendChild(info);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.001, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geom = new THREE.CubeGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
objMesh = new THREE.Mesh(geom, material);
scene.add(objMesh);
objMesh.centroid = new THREE.Vector3();
for (var i = 0, l = geom.vertices.length; i < l; i++) {
objMesh.centroid.add( // CHANGED for r.55
geom.vertices[i].clone());
}
objMesh.centroid.divideScalar(geom.vertices.length);
var sGeom = new THREE.CubeGeometry(1, 0.1, 0.1, 1, 1, 1);
var cubeMesh = new THREE.Mesh(sGeom, new THREE.MeshBasicMaterial({
color: 0xff0000
}));
cubeMesh.position.copy(objMesh.centroid);
scene.add(cubeMesh);
camera.position.set(3, 3, 3);
scene.add(new THREE.AxisHelper(10));
// controls
var controls = new THREE.OrbitControls(camera);
function render() {
requestAnimationFrame(render);
controls.update();
renderer.render(scene, camera);
}
render();
}
function MoveRotateCenter()
{
objMesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(new THREE.Vector3(1, 0.1, 0.1)));
}