Threejs扫盲

const scene = new THREE.Scene();
// 访问所有物体
// scene.children
// 通过指定name访问物体
// scene.getChildByMName(name)
// 遍历物体
// scene.traverse((obj) => {})

const fov = 35; // AKA Field of View
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1; // the near clipping plane
const far = 100; // the far clipping plane
// 透视投影
const camera = new PerspectiveCamera(fov, aspect, near, far);
// 定位相机
camera.position.set(0, 0, 5);
scene.add(camera);

const renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById("#mainCanvas"),
  // antialias: true, // 开启抗锯齿
});
renderer.render(scene, camera);
// 设置颜色及其透明度
renderer.setClearColor(0xffcc00);
// 设置设备像素比，防止 HiDPI 显示器模糊（视网膜显示器）
renderer.setPixelRatio(window.devicePixelRatio);
// 调整输出canvas的宽高并考虑设备像素比
renderer.setSize(window.innerWidth, window.innerHeight);

const cube = new THREE.Mesh(
  new THREE.CubeGeometry(1, 2, 3),
  new THREE.MeshBasicMaterial({
    color: 0xff0000,
  })
);
scene.add(cube);
// 拷贝长方体
// const clonedCube = cube.clone();
// 注意：自定义属性不会克隆

// 平移
cube.translateX(100); // 沿着x轴正方向平移100个单位
const axis = new THREE.Vector3(0, 1, 0);
cube.translateOnAxis(axis, 100); // 沿着axis轴表示方向平移100
// 旋转
mesh.rotateX(Math.PI / 2); // 绕x轴旋转π/2
// 缩放
cube.scale.x = 2; // x轴方向放大2倍
cube.scale.set(0.5, 0.5, 0.5); // 缩小为原来的0.5倍

const group = new Group();
group.add(cube);
group.add(light);
group.remove(light);
scene.add(group);

// 创建纹理对象
const texture = new THREE.TextureLoader().load("texture.jpg");
// 也可以指定一个image节点
// const image = document.getElementById('myImage');
// const texture = new THREE.Texture(image);
// 应用到材质上
const material = new THREE.MeshBasicMaterial({ map: texture });
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
import { MTLLoader } from "three/addons/loaders/MTLLoader.js";

const gltfLoader = new GLTFLoader();
const objLoader = new OBJLoader();
const mtlLoader = new MTLLoader();
// 异步加载
const loadedData = await gltfLoader.loadAsync("yourModel.glb");
// load方法是回调的方式
// gltfLoader.load('yourModel.glb', (data) => { // handle data })

function animate() {
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

import React, { useEffect, useRef } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

function MyThreeDemo() {
  const canvasRef = useRef(null);
  const statsRef = useRef(null);
  function initStat() {
    statsRef.current = new Stats();
    container.appendChild(statsRef.current.dom);
  }

  useEffect(() => {
    // 创建场景、相机和渲染器
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 添加光源
    let ambi = new THREE.AmbientLight(0x686868);
    scene.add(ambi);
    // 初始化帧率组件
    initStat();

    // 添加一个立方体到场景中
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    // 调整相机位置
    camera.position.z = 5;
    // 创建 OrbitControls 控制器并附加到相机上
    const controls = new OrbitControls(camera, renderer.domElement);
    // 渲染场景
    const animate = () => {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
      // 更新控制器
      controls.update();
      // 更新帧率
      statsRef.current.update();
    };
    canvasRef.current.appendChild(renderer.domElement);
    animate();

    return () => {
      // 销毁时清除渲染器占用的资源
      renderer.dispose();
    };
  }, []);

  return <div ref={canvasRef} />;
}

export default MyThreeDemo;