threejs教程-纹理贴图与环境贴图

简介

本系列教程需要具备threejs的基础入门知识,了场景、几何体、相机等基础概念。

学习本教程之前,建议学习笔者【基础网络材质】的基础知识

根据threejs前置知识,我们对如下的基础网络材质的一些属性已经有所了解物

现在,我们试着给图中的蓝色物体进行纹理贴图环境贴图

纹理贴图map

map属性是一个Texture纹理对象,这意味着想要给材质进行贴图,就必须使用TextureLoader先创建一个纹理贴图。TextureLoader我们并不陌生,它也可以给场景添加背景图片。

js 复制代码
scene.background = new THREE.TextureLoader().load("/sky.png");

API地址:threejs.org/docs/?q=Tex...

TextureLoader是加载texture的一个类。 内部使用ImageLoader来加载文件。

TextureLoader语法回顾

语法结构:

js 复制代码
new THREE.TextureLoader().load(url,onLoad,onProgress, onError);

.load ( url : String, onLoad : Function, onProgress : Function, onError : Function )

  • url --- 文件的URL或者路径,也可以为 Data URI.。vite项目中,public就是根目录。
  • onLoad --- 加载完成时将调用。回调参数为将要加载的texture.
  • onProgress --- 将在加载过程中进行调用。参数为XMLHttpRequest实例,实例包含total和loaded字节。
  • onError --- 在加载错误时被调用。

纹理贴图代码示例

首先,我们准备一张照片放在vite的pubilc根目录。

js 复制代码
// 创建纹理
const texture = new THREE.TextureLoader().load("/sky.png");
const material = new THREE.MeshBasicMaterial({
  // color: "blue",
  map: texture,
});

环境贴图envMap

环境贴图是环境对物体表面的影响,比如一个金属球表面可以看到周围的环境。

我们的场景已经有了6张图片的立方体背景:

js 复制代码
// 1、创建3D场景对象Scene
const scene = new THREE.Scene();
// 添加背景颜色
const cubeTexture = new THREE.CubeTextureLoader()
  .setPath("/sky/")
  .load(["posx.jpg", "negx.jpg", "posy.jpg", "negy.jpg", "posz.jpg", "negz.jpg"]);
scene.background = cubeTexture;

现在,我们只要让我们的物体反射这个环境背景即可。为了好看一些,我们将立方体改成球体。

js 复制代码
// 2、创建球体模型
const sphere = new THREE.SphereGeometry(20);

const material = new THREE.MeshBasicMaterial({
  envMap: cubeTexture,
});
const mesh = new THREE.Mesh(sphere, material);

效果展示:

完核心代码:

js 复制代码
<template>
  <div class="wrap" ref="threeContainer"></div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted, ref } from "vue";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const threeContainer = ref(null);

// 1、创建3D场景对象Scene
const scene = new THREE.Scene();
// 添加背景颜色
const cubeTexture = new THREE.CubeTextureLoader().setPath("/sky/").load(["posx.jpg", "negx.jpg", "posy.jpg", "negy.jpg", "posz.jpg", "negz.jpg"]);
scene.background = cubeTexture;

// ....

// 2、创建球体模型
const sphere = new THREE.SphereGeometry(20);

const material = new THREE.MeshBasicMaterial({
  envMap: cubeTexture,
});
const mesh = new THREE.Mesh(sphere, material);
// 设置模型mesh的xyz坐标
mesh.position.set(0, 40, 0);
scene.add(mesh);

// 3、使用虚拟相机观察模型
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 50, 200);
camera.lookAt(0, 0, 20); //坐标原点

// 4、渲染3D场景到DOM上
const renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 500); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera);

onMounted(() => {
  threeContainer.value.appendChild(renderer.domElement);
});
</script>

<style scoped></style>
相关推荐
王哈哈^_^41 分钟前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json