前置知识(最下面有完整代码)
每个代码都有注释,零基础也能看懂
中文官方文档教程
创建项目
创建空文件夹
执行如下命令初始化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 () 
