OrbitControlsのデフォルトでは、ワールドの中心座標で回転する。
これをオブジェクトの中心で回転させたい。
OrbitControls.jsのソースを見ると、targetという変数がカメラの注視点のようだ。
これをオブジェクトの中心に変えれば良さそう。
やってみた。
<html>
<head>
<meta charset="utf-8" />
<script src="./three.min.js"></script>
<script src="./OrbitControls.js"></script>
<script>
window.addEventListener('load', init);
function init() {
const width = 960;
const height = 540;
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#myCanvas')
});
renderer.setSize(width, height);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, 1000);
const controls = new THREE.OrbitControls(camera);
const mesh = new THREE.Mesh(
new THREE.BoxGeometry(100, 100, 100),
new THREE.MeshNormalMaterial()
);
mesh.position.set(300, 100, 100);
scene.add(mesh);
var axes = new THREE.AxisHelper(500);
scene.add(axes);
var add_line = function(obj, end_pos, color) {
var start_pos = new THREE.Vector3(0, 0, 0);
var g = new THREE.Geometry();
g.vertices.push(start_pos);
g.vertices.push(end_pos);
var material = new THREE.LineBasicMaterial({linewidth: 4, color: color});
var line = new THREE.Line(g, material);
obj.add(line);
}
var cube_size = 100;
var grid_count = 10;
var grid_size = grid_count * cube_size;
var grid = new THREE.GridHelper(grid_size, grid_count);
grid.material.color = new THREE.Color(0xaaaaaa);
scene.add(grid);
var grid_half = grid_size / 2;
add_line(grid, new THREE.Vector3( grid_half, 0, 0 ), "#ff0000");
add_line(grid, new THREE.Vector3( 0, grid_half, 0 ), "#00ff00");
add_line(grid, new THREE.Vector3( 0, 0, grid_half ), "#0000ff");
document.addEventListener("keydown", function(event) {
if(event.code == 'Escape') {
if(controls.target.x == controls.target0.x &&
controls.target.y == controls.target0.y &&
controls.target.z == controls.target0.z) {
controls.target.set(300, 100, 100);
controls.update();
} else {
controls.target.copy(controls.target0);
controls.update();
}
}
});
tick();
function tick() {
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
keydownでOrbitControlsの注視点を切り替える。
target0はtargetの初期状態だ。
サンプルの再生
※ESCキーで「ワールドの中心座標」と「オブジェクトの中心」がトグルします。