Threejs 3D模型入门小项目

先看效果：

对threejs还不熟悉的小伙伴可以先这篇文章：Threejs入门教程_程序猿青石的博客-CSDN博客

1.基本设置

1.初始化场景，相机

import * as THREE from "three";
// 初始化场景
const scene = new THREE.Scene();

// 初始化相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  2000
);

// // 设置相机位置
camera.position.set(-50, 50, 130);
scene.add(camera);

2.初始化渲染器

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器宽高
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到页面
document.body.appendChild(renderer.domElement);

// 实例化控制器
const controls = new OrbitControls(camera, renderer.domElement);

3.添加轨道控制器并循环渲染图画

// 导入控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 实例化控制器
const controls = new OrbitControls(camera, renderer.domElement);

function render() {
  // 渲染场景
  renderer.render(scene, camera);
  // 引擎自动更新渲染器
  requestAnimationFrame(render);
}
render();

4.监听窗口并实现画布自适应

// 监听屏幕的大小改变，修改渲染器的宽高，相机的比例
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  // 修改属性后需要刷新来使改变生效
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

2.要点步骤

1.为场景添加平行光

平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。

构造函数：

DirectionalLight( color : Integer, intensity : Float )

color - (可选参数) 16进制表示光的颜色。缺省值为 0xffffff (白色)。
intensity - (可选参数) 光照的强度。缺省值为1。

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-100, 100, 10);
scene.add(light);

2.为背景添加天空球体

TextureLoader

加载texture的一个类。内部使用ImageLoader来加载文件。

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : Texture

url — 文件的URL或者路径，也可以为 Data URI.
onLoad — 加载完成时将调用。回调参数为将要加载的texture.
onProgress — 将在加载过程中进行调用。参数为XMLHttpRequest实例，实例包含total和loaded字节。
onError — 在加载错误时被调用。

注意：此处的url的默认目录当前目录是项目打包生成的dist文件夹，所有资源文件均需放置到此文件夹下方可访问

.map : Texture

颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。

.scale ( x : Float, y : Float, z : Float ) : this

缩放几何体。该操作一般在一次处理中完成，不会循环处理。典型的用法是通过调用 Object3D.scale 实时旋转几何体。

// 创建一个巨大的天空球体
let texture = new THREE.TextureLoader().load("./textures/water/sky.jpg");
const skyGeometry = new THREE.SphereGeometry(1000, 60, 60);
const skyMaterial = new THREE.MeshBasicMaterial({
  map: texture,
});
skyGeometry.scale(1, 1, -1);
const sky = new THREE.Mesh(skyGeometry, skyMaterial);

scene.add(sky);

3.添加视频纹理

VideoTexture

创建一个使用视频来作为贴图的纹理对象。
它和其基类Texture几乎是相同的，除了它总是将needsUpdate设置为true，以便使得贴图能够在视频播放时进行更新。自动创建mipmaps也会被禁用。

// 视频纹理
const video = document.createElement("video");
video.src = "./textures/sky.mp4";
video.loop = true;

window.addEventListener("click", (e) => {
  // 当鼠标移动的时候播放视频
  //   判断视频是否处于播放状态
  if (video.paused) {
    video.play();
    let texture = new THREE.VideoTexture(video);
    skyMaterial.map = texture;
    skyMaterial.map.needsUpdate = true;
  }
});

4.创建水面

CircleGeometry是欧式几何的一个简单形状，它由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。同时它也可以用于创建规则多边形，其分段数量取决于该规则多边形的边数。

CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)

radius — 圆形的半径，默认值为1
segments — 分段（三角面）的数量，最小值为3，默认值为8。
thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）
thetaLength — 圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆。

// 导入水面
import { Water } from "three/examples/jsm/objects/Water2";

// 创建水面
const waterGeometry = new THREE.CircleBufferGeometry(300, 64);
const water = new Water(waterGeometry);
water.position.y = -80;
// 水面旋转至水平
water.rotation.x = -Math.PI / 2;
scene.add(water);

5.导入实例模型

draco

draco是谷歌出的一款模型压缩工具,可将gltf格式的模型进行进一步压缩提高页面加载速的一种方法

github官网：https://github.com/google/draco

下载后将javascript文件夹复制到本项目dist目录下

sketchfab（3d模型网站）

Explore 3D Models - Sketchfab

同样下载的模型也需要放置到dist目录下，我的模型在model文件夹下

// 导入gltf载入库
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";


// 添加小狗模型
// 实例化gltf载入库
const loader = new GLTFLoader();
// 实例化draco载入库
const dracoLoader = new DRACOLoader();
// 添加draco载入库
dracoLoader.setDecoderPath("./javascript/");
// 添加draco载入库
loader.setDRACOLoader(dracoLoader);


loader.load("./model/shiba.glb", (gltf) => {
  gltf.scene.scale.set(100,100,100)
  scene.add(gltf.scene);
});

package.json

{
  "name": "ch02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.4.1"
  },
  "dependencies": {
    "dat.gui": "^0.7.9",
    "gsap": "^3.10.3",
    "three": "^0.139.2"
  }
}

参考视频：手把手教你用three.js开发水天一色小岛_哔哩哔哩_bilibili