three.js

一.认识three.js

未使用框架开发

import * as THREE from "three";
import "./style.css";

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

// 创建一个相机
const camera = new THREE.PerspectiveCamera(
  // 视野角度
  75,
  // 视口宽高比
  window.innerWidth / window.innerHeight,
  // 近裁剪面
  0.1,
  // 远裁剪面
  1000
);

// 创建一个渲染器
const render = new THREE.WebGLRenderer();

// 设置渲染器的大小
render.setSize(window.innerWidth, window.innerHeight);
// 添加渲染器到DOM中
document.body.appendChild(render.domElement);

// 创建一个物体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建一个材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建一个网格
const cube = new THREE.Mesh(geometry, material);

// 将网格添加到场景中
scene.add(cube);

// 设置相机位置
camera.position.z = 5;

// 设置渲染函数
function animate() {
  // 每一帧都调用一次
  requestAnimationFrame(animate);

  // 旋转物体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染场景
  render.render(scene, camera);
}
animate();

// 开始渲染
render.render(scene, camera);

使用 vue 开发

<script setup>
import * as THREE from "three";
import "./style.css";

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

// 创建一个相机
const camera = new THREE.PerspectiveCamera(
  // 视野角度
  75,
  // 视口宽高比
  window.innerWidth / window.innerHeight,
  // 近裁剪面
  0.1,
  // 远裁剪面
  1000
);

// 创建一个渲染器
const render = new THREE.WebGLRenderer();

// 设置渲染器的大小
render.setSize(window.innerWidth, window.innerHeight);
// 添加渲染器到DOM中
document.body.appendChild(render.domElement);

// 创建一个物体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建一个材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建一个网格
const cube = new THREE.Mesh(geometry, material);

// 将网格添加到场景中
scene.add(cube);

// 设置相机位置
camera.position.z = 5;

// 设置渲染函数
function animate() {
  // 每一帧都调用一次
  requestAnimationFrame(animate);

  // 旋转物体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染场景
  render.render(scene, camera);
}
animate();

// 开始渲染
render.render(scene, camera);
</script>

<template></template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
</style>

使用 react 开发

import { useEffect } from "react";
import * as THREE from "three";
import "./App.css";

function App() {
  useEffect(() => {
    // 创建一个场景
    const scene = new THREE.Scene();

    // 创建一个相机
    const camera = new THREE.PerspectiveCamera(
      // 视野角度
      75,
      // 视口宽高比
      window.innerWidth / window.innerHeight,
      // 近裁剪面
      0.1,
      // 远裁剪面
      1000
    );

    // 创建一个渲染器
    const render = new THREE.WebGLRenderer();

    // 设置渲染器的大小
    render.setSize(window.innerWidth, window.innerHeight);
    // 添加渲染器到DOM中
    document.body.appendChild(render.domElement);

    // 创建一个物体
    const geometry = new THREE.BoxGeometry(1, 1, 1);

    // 创建一个材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

    // 创建一个网格
    const cube = new THREE.Mesh(geometry, material);

    // 将网格添加到场景中
    scene.add(cube);

    // 设置相机位置
    camera.position.z = 5;

    // 设置渲染函数
    function animate() {
      // 每一帧都调用一次
      requestAnimationFrame(animate);

      // 旋转物体
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      // 渲染场景
      render.render(scene, camera);
    }
    animate();

    // 开始渲染
    render.render(scene, camera);
  }, []);

  return (
    <>
      <main></main>
    </>
  );
}

export default App;

二.使用轨道控制器来控制

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。
要使用这一功能，就像在/examples（示例）目录中的所有文件一样， 您必须在 HTML 中包含这个文件。

OrbitControls 是一个附加组件，必须显式导入。

import { OrbitControls } from "three/addons/controls/OrbitControls.js";

代码实列:

// 使用轨道控制器来控制这个相机的使用
const controls = new OrbitControls(camera, render.domElement);

controls.update(); // 更新控制器

官方网站实列:

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

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  10000
);

const controls = new OrbitControls(camera, renderer.domElement);

//controls.update() must be called after any manual changes to the camera's transform
camera.position.set(0, 20, 100);
controls.update();

function animate() {
  requestAnimationFrame(animate);

  // required if controls.enableDamping or controls.autoRotate are set to true
  controls.update();

  renderer.render(scene, camera);
}

开启阻尼效果:(开启这个会有更加真实的感觉,会有滑动的效果在里面,当你在控制控制器的时候就会有这个效果)还可以设置一些参数等数据

controls.enableDamping = true; // 开启阻尼

…….还有更多的属性与方法,可以去去官网查看效果

---

三.设置窗口的变化的屏幕自适应