《threejs》十二周学习计划；01初识threejs

原创已于 2025-03-09 14:59:38 修改 · 217 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

THREE

于 2025-03-09 14:59:00 首次发布

threejs三要素：场景、相机、渲染器；

今日任务：项目初始化vite+threejs

1、创建目录a_threejs

2、cmd：yarn init -y （创建package.json）

3、cmd：yarn add -D vite （下载vite依赖 node版本需要18以上可以使用nvm管理node版本）

4、cmd：yarn add -D three （下载three依赖）

5、创建html文件 01.html

6、模块化导入threejs

<script type="module">
  import * as THREE from "three";
</script>

7、创建场景

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

8、创建透视相机

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

9、创建渲染器、设置渲染器大小、将渲染器添加到页面中、将场景和相机放到渲染器中

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到页面中
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

至此为止就成功创建了一个空的three项目；

接下来给这个空的three项目放一点东西吧；

1、创建一个立方体、将立方体添加到场景中

// 创建一个立方体
const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({color: 0x00ff00})
);
// 将立方体添加到场景中
scene.add(cube);

2、现在还无法看到这个立方体，是因为没有设置好相机的位置，就像我们看不到身后的东西一样

// 设置相机的位置
camera.position.set(2, 2, 2);
// 设置相机的方向
camera.lookAt(0, 0, 0);

这样就能在页面上看到一个立方体了。

利用浏览器的动画帧API，让这个立方体动起来；

function animate() {
  // 使用浏览器的动画帧API实现循环动画
  // requestAnimationFrame 会以显示器的刷新频率（通常60FPS）回调动画函数
  // 通过递归调用自身，保持动画的持续运行
  requestAnimationFrame(animate);
  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 执行场景的最终渲染
  // 将相机视角下的3D场景实时渲染到2D画布上
  // 每次动画帧更新后都需要重新调用以呈现连续画面
  renderer.render(scene, camera);
}
// 初始化动画循环
// 首次调用启动递归动画流程，后续由requestAnimationFrame自动维持循环
animate();

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }
  </style>
</head>
<body>
<script type="module">
  import * as THREE from "three";
  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机 透视相机
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  // 设置相机的位置
  camera.position.set(2, 2, 2);
  // 设置相机的方向
  camera.lookAt(0, 0, 0);
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器的大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 将渲染器添加到页面中
  document.body.appendChild(renderer.domElement);


  // 创建一个立方体
  const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({color: 0x00ff00})
  );
  // 将立方体添加到场景中
  scene.add(cube);


  function animate() {
    // 使用浏览器的动画帧API实现循环动画
    // requestAnimationFrame 会以显示器的刷新频率（通常60FPS）回调动画函数
    // 通过递归调用自身，保持动画的持续运行
    requestAnimationFrame(animate);
    // 旋转立方体
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 执行场景的最终渲染
    // 将相机视角下的3D场景实时渲染到2D画布上
    // 每次动画帧更新后都需要重新调用以呈现连续画面
    renderer.render(scene, camera);
  }
  // 初始化动画循环
  // 首次调用启动递归动画流程，后续由requestAnimationFrame自动维持循环
  animate();
</script>
</body>
</html>

标签

#学习 #js