threejs 3d_threejs load参数-CSDN博客

本文链接：https://blog.csdn.net/weixin_45044818/article/details/127193237

threejs学习笔记

1. 官网
2. 本地搭建官网
3. 新的打包工具（parcel）
- 官网
- 使用
4. 使用threejs去渲染第一个场景和物体
5. 添加轨道控制器
6. 坐标辅助器
7. 控制物体移动
8. 物体的缩放与旋转
9. requestAnimationFrame
10. gsap
- 官网
- 使用
11. 根据尺寸实现自适应画面
12. 通过js来控制是否全屏
13. dat.gui
- 安装
- 使用
14. 常见网格集合体
15. 材质与纹理
16. 纹理的偏移、旋转和重复
17. 透明材质和纹理
18. 环境遮挡贴图和强度
19. PBR
- 什么是PBR
- PBR的组成部分
20. 粗糙度和粗糙度贴图
21. 金属度和金属贴图
22. 法线贴图
23. 如何获取各种类型的纹理贴图
24. 纹理加载进度情况
25. 环境贴图
26. 灯光和阴影的关系与设置
27. 平行光阴影
28. 聚光灯
29. 点光源
30. 杂记
- renderer.setClearColor
- 球环境贴图

1. 官网

https://threejs.org/(外网，访问较慢)

2. 本地搭建官网

https://github.com/mrdoob/three.js/

下载压缩包进行本地启动
在这里插入图片描述

3. 新的打包工具（parcel）

官网

https://www.parceljs.cn/

使用

npm install -g parcel-bundler
parcel index.html

4. 使用threejs去渲染第一个场景和物体

<template>
  <div class="container" ref="container"></div>
</template>

<script setup>
import {
    ref, onMounted } from 'vue';
import * as THREE from "three";
// 导入轨道控制器
import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建相机
// 2. 创建相机
const camere = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 3. 改变相机的位置
camere.position.set(0, 0, 10);
// 4. 添加相机到场景中
scene.add(camere);
// 5. 添加物体（点、线、面），材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
    color: "red" }); // 不透光材质
// 6. 创建物体
const cube = new THREE.Mesh(geometry, material);
// 7. 添加物体到场景中
scene.add(cube);
// 8. 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 9. 设置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);

const render = () => {
   
  // 11. 使用渲染器将相机场景渲染出来
  renderer.render(scene, camere);
  requestAnimationFrame(render);
}

const container = ref(null);
onMounted(() => {
   
  // 初始化轨道控制器
  const controlls = new OrbitControls(camere, renderer.domElement);
  controlls.enableDamping = true;
  // 10. 将webgl渲染的canvas内容添加到dom节点中
  container.value