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

最新推荐文章于 2024-04-27 08:29:03 发布

VIP文章绿色气球

最新推荐文章于 2024-04-27 08:29:03 发布

阅读量201

点赞数 1

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

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

版权

第一次成功载入gld模型

水天一色小海岛

gld模型与gltf模型导入多了解压这一步骤，因此不仅需要GLTFLoader载入库还需要DRACOLoader载入库。
代码里前5步都是常规操作，重点在后面的创建环境纹理、创建水平海面和添加gld小岛模型。

//水天一色小海岛


import * as THREE from "three";
import {
    TextureLoader } from "three";

//导入轨道控制器
import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls"
//导入水面
import {
    Water } from "three/examples/jsm/objects/Water2"

//导入gltf载入库
import {
    GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
//导入解压库
import {
    DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
//导入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.innerHeight, 0.1, 5000);
camera.position.set(-80, 60, 130) //相机放置位置
    //更新摄像头宽高比
camera.aspect = window.innerWidth / window.innerHeight;
//更新摄像头投影矩阵
camera.updateProjectionMatrix();
scene.add(camera);

//3.初始化渲染器