threejs — 16 鬼屋实现

TaiXinF

已于 2022-10-15 17:24:30 修改

阅读量226

点赞数

分类专栏： webgl threejs 文章标签：前端 html javascript

于 2022-10-15 17:23:18 首次发布

本文链接：https://blog.csdn.net/Tx457973/article/details/127337878

版权

本文详细介绍了如何使用Three.js库创建一个有趣的鬼屋3D场景。通过JavaScript和HTML，结合Three.js的强大功能，实现了光影效果、模型加载和交互元素，为读者展示了一段生动的前端3D动画体验。

摘要由CSDN通过智能技术生成

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";

/**
 * Base
 */
// Debug
const gui = new dat.GUI();

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();

/**
 * Textures
 */
const textureLoader = new THREE.TextureLoader();

const doorColorTexture = textureLoader.load(
  "../static/textures/door/color.jpg"
);
const doorAlphaTexture = textureLoader.load(
  "../static/textures/door/alpha.jpg"
);
const doorAmbientOcclusionTexture = textureLoader.load(
  "../static/textures/door/ambientOcclusion.jpg"
);
const doorHeightTexture = textureLoader.load(
  "../static/textures/door/height.jpg"
);
const doorNormalTexture = textureLoader.load(
  "../static/textures/door/normal.jpg"
);
const doorMetalnessTexture = textureLoader.load(
  "../static/textures/door/metalness.jpg"
);
const doorRoughnessTexture = textureLoader.load(
  "../static/textures/door/roughness.jpg"
);

const bricksColorTexture = textureLoader.load(
  "../static/textures/bricks/color.jpg"
);
const bricksAmbientOcclusionTexture = textureLoader.load(
  "../static/textures/bricks/ambientOcclusion.jpg"
);
const bricksNormalTexture = textureLoader.load(
  "../static/textures/bricks/normal.jpg"
);
const bricksRoughnessTexture = textureLoader.load(
  "../static/textures/bricks/roughness.jpg"
);

const grassColorTexture = textureLoader.load(
  "../static/textures/grass/color.jpg"
);
const grassAmbientOcclusionTexture = textureLoader.load(
  "../static/textures/grass/ambientOcclusion.jpg"
);
const grassNormalTexture = textureLoader.load(
  "../static/textu