threejs零基础搭建3D可视化汽车展厅

news2024/9/21 22:33:07

前置知识(最下面有完整代码)

每个代码都有注释,零基础也能看懂
中文官方文档教程

创建项目

创建空文件夹

执行如下命令初始化package.json文件

npm init -y

安装threejs包

yarn add three

安装tween.js动画库,用于做动画
tweenjs文档

yarn add @tweenjs/tween.js

安装gui调试工具

lil-gui官方文档

yarn add lil-gui

使用parcel工具打包执行项目

官方网站

yarn global add parcel-bundler

根目录下创建src/index.html

这个链接的资料,点击下载到scr文件夹内部,它是个public文件夹,将其下载下来放到scr文件夹内部

初始化html结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

在package.json里面配置启动命令（后面的是启动文件路径）

增加type:module

{
   
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
   
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   
    "three": "^0.166.1"
  }
}

src下新建app.js在index.html里面引入一下

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>My First Parcel App</title>
  <style>
    * {
   
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <script src="./app.js"></script>
</body>

</html>

使用yarn run dev启动项目

双击启动后的网址,查看页面

在这里插入图片描述

能访问到网页就说明配置正常

案例一(设置几何体及其材质)

案例代码

后续所有操作都在app.js内部写

一切物体都身处一个场景内,即使3D页面也是如此

// 引入three.js
import * as THREE from 'three'
// 引入轨道控制器
import {
    OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 引入材质纹理图片,用于设置正方体纹理
import pkq from './public/pkq1.jpg'
// 引入动画库插件
import TWEEN from '@tweenjs/tween.js'

// 全局变量
let scene, camera, renderer, controls, cube

// 初始化场景
function initScene () {
   
  // 创建场景
  scene = new THREE.Scene()
}

// 初始化相机
function initCamera () {
   
  // 参数一:夹角,参数二:宽高比,参数三:近裁剪面,参数四:远裁剪面
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
  // 设置相机位置(x,y,z)
  // camera.position.set(0, 0, 10);
  // 也可以
  // camera.position.z = 10
  // 设置相机方向(指向的场景)
  camera.lookAt(scene.position)
}

// 初始化渲染器
function initWebGL () {
   
  // 设置渲染器
  renderer = new THREE.WebGLRenderer()
  // 设置渲染器的尺寸
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 将渲染器添加到body
  document.body.appendChild(renderer.domElement)
}

// 添加坐标系
function initAxis () {
   
  // 参数一:场景,参数二:坐标系长度
  let axis = new THREE.AxesHelper(3)
  // 将坐标系添加到场景中
  scene.add(axis)
}

// 添加轨道控制器(可以滑动屏幕和缩放屏幕)
function initTrackballControls () {
   
  // 参数一:相机,参数二:渲染器
  let trackballControls = new OrbitControls(camera, renderer.domElement)
  // 添加控制器
  scene.add(trackballControls)
}

// 创建立方体
function initCube () {
   
  // 创建几何体形状
  let geometry = new THREE.BoxGeometry(1, 1, 1)
  // 设置图片纹理
  let texture = new THREE.TextureLoader().load(pkq)
  // 创建材质颜色
  let material = new THREE.MeshBasicMaterial({
   
    color: 'yellow',
    map: texture
  })
  // 创建网格
  cube = new THREE.Mesh(geometry, material)
  // 将网格添加到场景中
  scene.add(cube)
}

// 主函数
function main ()