threejs学习记录

参考文档【ThreeJS快速入门指南_three js-优快云博客】

实物图如下：

代码如下：

// 引入three.js
import * as THREE from "three";
console.log(THREE,111);
import { OrbitControls } from "three/addons";// 1. 引入图片
import floor from "@/assets/img/floor_wood.jpg";
// 立方体的顶部纹理
import grass_top from "@/assets/img/grass_top.png";
// 立方体的侧边纹理
import grass_side from "@/assets/img/grass_side.png";
// 立方体的底部纹理
import grass_bottom from "@/assets/img/grass_bottom.png";

const IndexPage: React.FC = () => {
 // 1. 创建渲染器,指定渲染的分辨率和尺寸,然后添加到body中
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.pixelRatio = window.devicePixelRatio;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.append(renderer.domElement);

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

// 3. 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(5, 5, 10);
camera.lookAt(0, 0, 0);

// 4. 创建物体
const axis = new THREE.AxesHelper(5);
scene.add(axis);

// 2. 初始化纹理加载器
const textloader = new THREE.TextureLoader();
// 添加立方体
const geometry = new THREE.BoxGeometry(4, 4, 4);
// const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const material = [
  new THREE.MeshBasicMaterial({
    map: textloader.load(grass_side),
  }),
  new THREE.MeshBasicMaterial({
    map: textloader.load(grass_side),
  }),
  new THREE.MeshBasicMaterial({
    map: textloader.load(grass_top),
  }),
  new THREE.MeshBasicMaterial({
    map: textloader.load(grass_bottom),
  }),
  new THREE.MeshBasicMaterial({
    map: textloader.load(grass_side),
  }),
  new THREE.MeshBasicMaterial({
    map: textloader.load(grass_side),
  }),
];
// 5. 渲染
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
// 2.
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

// 3.
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 1. 渲染器能够渲染阴影效果
renderer.shadowMap.enabled = true;

// 2. 该方向会投射阴影效果
directionalLight.castShadow = true;

// 3. 
cube.castShadow = true;
// 4. 
const planeGeometry = new THREE.PlaneGeometry(20, 20);
// const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
// 3. 给地板加载纹理
const planeMaterial = new THREE.MeshStandardMaterial({
  map: textloader.load(floor),
});
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
planeMesh.rotation.x = -0.5 * Math.PI;
planeMesh.position.set(0, -3, 0);
planeMesh.receiveShadow = true;
scene.add(planeMesh);

// 5. 方向光的辅助线
const directionalLightHelper = new THREE.DirectionalLightHelper(
  directionalLight
);
scene.add(directionalLightHelper); // 辅助线


renderer.render(scene, camera);
const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);

  const elapsedTime = clock.getElapsedTime(); // 返回已经过去的时间, 以秒为单位
  cube.rotation.y = elapsedTime * Math.PI; // 两秒自转一圈

  renderer.render(scene, camera);
}

animate()


  return null
};
export default IndexPage;

环境：    "three": "^0.165.0", node：v20.12.2，react:18.0.11

引入3D模型

代码：

const loader = new GLTFLoader();
loader.load( '/test.glb', function ( gltf ) {
  console.log('控制台查看加载gltf文件返回的对象结构',gltf);
  console.log('gltf对象场景属性',gltf.scene);
  // 返回的场景对象gltf.scene插入到threejs场景中
  scene.add( gltf.scene );
})

test.glb地址https://download.youkuaiyun.com/download/qq_39933787/89492194

放在public文件夹下