threejs 如何围绕对象自己的中心而不是世界中心旋转 - TypeScript (1)

📌 相关文章

📜 threejs 如何围绕对象自己的中心而不是世界中心旋转 - TypeScript (1)

📅 最后修改于: 2023-12-03 15:35:19.775000 🧑 作者: Mango

Three.js如何围绕对象自己的中心而不是世界中心旋转

在Three.js中，我们可以通过设置对象的中心点来实现围绕自己的中心旋转。这可以通过设置对象的几何体来实现。

在本例中，我们将创建一个正方体并将其放置在场景中。然后，我们将设置它的中心点为顶部。

在我们开始之前，我们需要确保已经安装并导入了Three.js库。以下是HTML代码的模板：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Three.js Rotate around center example</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script>
// Your code goes here
</script>
</body>
</html>

创建场景、相机和渲染器

我们将首先创建场景、相机和渲染器。以下是完整的代码：

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

创建几何体、材质和网格

接下来，我们将创建一个正方体。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);

需要注意的是，默认情况下，正方体的中心点位于它的几何体的中心，我们需要将它移动到顶部。

geometry.translate(0, 0.5, 0);

最后，将网格添加到场景中。

scene.add(cube);

完整的代码如下：

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
geometry.translate(0, 0.5, 0);

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

添加光源

为了让场景看起来更真实，我们需要添加光源。我们将创建一个方向光。

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 1).normalize();
scene.add(light);

设置相机位置

最后，我们需要将相机移动到场景中心，并将其指向正方体。

camera.position.set(0, 0, 5);
camera.lookAt(cube.position);

添加动画

现在，我们可以通过添加动画来围绕正方体旋转。

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

上述代码将在每个动画帧中旋转正方体。不幸的是，它不是围绕自己的中心而是围绕世界中心旋转的。

将正方体移动到世界中心

为了让它看起来像是围绕自己的中心旋转，我们需要将正方体移动到世界中心。这可以通过以下方式实现：

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

我们也需要将相机向后移动，以便我们可以看到正方体。

camera.position.set(0, 0, 5);
camera.lookAt(cube.position);

现在，正方体已经位于世界中心，并且我们可以看到它。

完整的代码如下：

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
geometry.translate(0, 0.5, 0);

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0, 0);

scene.add(cube);

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 1).normalize();
scene.add(light);

camera.position.set(0, 0, 5);
camera.lookAt(cube.position);

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

现在你已经知道如何在Three.js中围绕对象自己的中心旋转了！