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

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

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

创建项目

创建空文件夹

执行如下命令初始化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)// 将渲染器添加到bodydocument.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 ()