从零开始学习Web3D可视化技术—02

VIP文章绿色气球

已于 2023-03-01 15:58:52 修改

阅读量236

点赞数

分类专栏：笔记文章标签：前端 3d

于 2023-03-01 15:15:50 首次发布

本文链接：https://blog.csdn.net/wangyiebo/article/details/129280158

版权

记录第一次环境贴图成功

首先使用parcel搭建three.js开发环境，具体步骤看上一篇

hdr环境贴图

将hdr图片放入dist/textures/hdr的文件夹下
在js文件里写上相应代码，特别要注意hdr图片放至的位置，代码第5步放着hdr图片的位置和名称

import * as THREE from "three";
//导入轨道控制器
import {
    OrbitControls } from "three/examples/jsm/controls/orbitcontrols";
//导入hdr图
import {
    RGBELoader } from "three/examples/jsm/loaders/RGBELoader";


//1.初始化场景
const scene = new THREE.Scene();
//2.创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.inn