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);
AI 代码解读
2.初始化渲染器
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器宽高
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到页面
document.body.appendChild(renderer.domElement);
// 实例化控制器
const controls = new OrbitControls(camera, renderer.domElement);
AI 代码解读
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();
AI 代码解读
4.监听窗口并实现画布自适应
// 监听屏幕的大小改变，修改渲染器的宽高，相机的比例
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
// 修改属性后需要刷新来使改变生效
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
AI 代码解读
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);
AI 代码解读
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);
AI 代码解读
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;
}
});
AI 代码解读
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);
AI 代码解读
5.导入实例模型
draco
draco是谷歌出的一款模型压缩工具,可将gltf格式的模型进行进一步压缩提高页面加载速的一种方法
github官网：https://github.com/google/draco
下载后将javascript文件夹复制到本项目dist目录下
sketchfab（3d模型网站）
同样下载的模型也需要放置到dist目录下，我的模型在model文件夹下
// 导入gltf载入库
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
AI 代码解读
// 添加小狗模型
// 实例化gltf载入库
const loader = new GLTFLoader();
// 实例化draco载入库
const dracoLoader = new DRACOLoader();
// 添加draco载入库
dracoLoader.setDecoderPath("./javascript/");
// 添加draco载入库
loader.setDRACOLoader(dracoLoader);
AI 代码解读
loader.load("./model/shiba.glb", (gltf) => {
gltf.scene.scale.set(100,100,100)
scene.add(gltf.scene);
});
AI 代码解读
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"
}
}
AI 代码解读
