ThreeJS-环境贴图（十五）

素材：

使用球形几何体

const cubeGeometry = new THREE.SphereBufferGeometry(1, 100, 100);

使用立方体材质

let cubeTextureLoader = new THREE.CubeTextureLoader();

关键代码：

//添加物体

//创建一个半径为1，经纬度分段数位20的球

const cubeGeometry = new THREE.SphereBufferGeometry(1, 100, 100);

//纹理加载器

let cubeTextureLoader = new THREE.CubeTextureLoader();

cubeTextureLoader = cubeTextureLoader.setPath('three/').load([

'sphere.webp',

'sphere.webp',

'sphere.webp',

'sphere.webp',

'sphere.webp',

'sphere.webp'

]);

//纹理加载器加载图片

const cubeMaterial = new THREE.MeshStandardMaterial({

metalness: 0.7,

roughness: 0.1,

envMap: cubeTextureLoader//添加环境贴图

});

效果图：

添加场景背景

关键代码

scene.background = cubeTextureLoader;

完整代码;

<template>

<div id="three_div"></div>

</template>

<script>

import * as THREE from "three";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export default {

name: "HOME",

components: {

// vueQr,

// glHome,

},

data() {

return {};

},

mounted() {

//使用控制器控制3D拖动旋转OrbitControls

//控制3D物体移动

//1.创建场景

const scene = new THREE.Scene();

console.log(scene);

//2.创建相机

const camera = new THREE.PerspectiveCamera(

75,

window.innerWidth / window.innerHeight,

0.1,

1000

);

//设置相机位置

camera.position.set(0, 0, 10);

//将相机添加到场景

scene.add(camera);

//添加物体

//创建一个半径为1，经纬度分段数位20的球

const cubeGeometry = new THREE.SphereBufferGeometry(1, 100, 100);

//纹理加载器

let cubeTextureLoader = new THREE.CubeTextureLoader();

cubeTextureLoader = cubeTextureLoader.setPath('three/').load([

'sphere.webp',

'sphere.webp',

'sphere.webp',

'sphere.webp',

'sphere.webp',

'sphere.webp'

]);

//纹理加载器加载图片

const cubeMaterial = new THREE.MeshStandardMaterial({

metalness: 0.7,

roughness: 0.1,

envMap: cubeTextureLoader//添加环境贴图

});

//根据几何体和材质创建物体

const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);

//将物体加入到场景

scene.add(mesh);

scene.background = cubeTextureLoader;

//添加坐标轴辅助器

const axesHepler = new THREE.AxesHelper(5);

scene.add(axesHepler);

//标准材质需要借助灯光

//添加周围环境灯光（由物体发出的灯光）参数（灯色，强度0-1）

const light = new THREE.AmbientLight(0xFFFFFF, 1);

scene.add(light);

//直线光（由光源发出的灯光）

// const directionalLight = new THREE.DirectionalLight(0xffff00, 1);

// //设置灯光位置

// directionalLight.position.set(10, 10, 10);

// scene.add(directionalLight);

//添加平面

// const planeGeometry = new THREE.PlaneBufferGeometry(1, 1);

// const mesh2 = new THREE.Mesh(planeGeometry, cubeMaterial);

// mesh2.position.set(0, 0, 3);

// scene.add(mesh2);

//初始化渲染器

const render = new THREE.WebGLRenderer();

//设置渲染器的尺寸

render.setSize(window.innerWidth, window.innerHeight);

//使用渲染器，通过相机将场景渲染进来

//创建轨道控制器，可以拖动,控制的是摄像头

const controls = new OrbitControls(camera, render.domElement);

//设置控制阻尼，让控制器有更真实的效果

controls.enableDamping = true;

//将webgl渲染的canvas内容添加到body上

document.getElementById("three_div").appendChild(render.domElement);

//渲染下一帧的时候就会调用回调函数

let renderFun = () => {

//更新阻尼数据

controls.update();

//需要重新绘制canvas画布

render.render(scene, camera);

//监听屏幕刷新（60HZ,120HZ），每次刷新触发一次requestAnimationFrame回调函数

//但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果

window.requestAnimationFrame(renderFun);

};

// window.requestAnimationFrame(renderFun);

renderFun();

//画布全屏

window.addEventListener("dblclick", () => {

if (document.fullscreenElement) {

document.exitFullscreen();

} else {

//document.documentElement.requestFullscreen();

render.domElement.requestFullscreen();

}

});

//监听画面变化，更新渲染画面，（自适应的大小）

window.addEventListener("resize", () => {

//更新摄像机的宽高比

camera.aspect = window.innerWidth / window.innerHeight;

//更新摄像机的投影矩阵

camera.updateProjectionMatrix();

//更新渲染器宽度和高度

render.setSize(window.innerWidth, window.innerHeight);

//设置渲染器的像素比

render.setPixelRatio(window.devicePixelRatio);

console.log("画面变化了");

});

},

methods: {

paush(animate) {

animate.pause();

},

},

};

</script>

<style scoped lang="scss">

</style>

效果图：

设置物体默认环境贴图

此时我们先尝试将材质配置的换进该贴图注释掉

const cubeMaterial = new THREE.MeshStandardMaterial({

metalness: 1,

roughness: 0.1,

// envMap: cubeTextureLoader//添加环境贴图

});

效果图：

设置默认环境题图

//给场景所有的物体添加默认的环境贴图

scene.environment = cubeTextureLoader;

效果图：

ThreeJS-环境贴图（十五）相关推荐

Unix环境高级编程(十五)高级I/O
1.非阻塞I/O 对低速设备的I/O操作可能会使进程永久阻塞,这类系统调用主要有如下情况: (1)如果数据并不存在,则读文件可能会使调用者永远阻塞(例如读管道.终端设备和网络设备). (2)如果数据不 ...
Git之显示分支关系图(十五)
Git之显示分支关系图 1.显示当前分支从哪个分支拉出来的 # git log --graph --decorate --oneline --all //2.显示当前分支 # git symbolic ...
RobotFramework环境配置二十五：屏幕截图问题（滚动屏幕）
屏幕截图问题(滚动屏幕) 目的:Selenium2Library 屏幕截图无法保存全屏,需要让屏幕滚动到目标元素的位置. 实现:Execute Javascript 一.用例:选卡中心选择课程测试登 ...
八十五、Python | Leetcode数据结构之图和动态规划算法系列
@Author:Runsen @Date:2020/7/7 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
python数据挖掘学习】十五.Matplotlib调用imshow()函数绘制热图
python数据挖掘学习]十五.Matplotlib调用imshow()函数绘制热图 #2018-03-28 14:47:19 March Wednesday the 13 week, the 087 ...
阿里云centos环境之vsftpd安装(十五)
阿里云centos环境之vsftpd安装(十五) 文章目录前言安装检测安装配置文件路径启动服务器启动ftp命令: 其它相关命令停止ftp命令: 重启ftp命令: 设置开机自启动看是否 ...
PMP十五至尊图（第六版）
PMP(Project Management Professinoal)项目经理专业资格认证,由美国项目管理学会PMI(Project Management Institute)发起并组织的一种资格认 ...
读书笔记！《万历十五年》思维导图分享
冲着黄仁宇的"大历史观",可以去品读一番. 他透过六个"微"切面(万历皇帝.张居正.申时行.海瑞.戚继光.李贽),去发现在"大"的历史范围中 ...
[项目管理]十五至尊图
最近开始学习项目管理,然后有一个很重要的图叫十五至尊图,就是五大过程组+十个知识领域组成的一张图,最近刚刚背下来,所以记录一下我背这个图的小技巧. 先从网上找一个图放到这里.首先是五大过程组,这个其实 ...
PMP十五至尊图（PMBOK第六版）
PMP十五至尊图 (PMBOK第六版),五大过程组,十大知识领域 PMP十五至尊图,选自<PMP备考九阴真经>,参考:http://t.cn/A6vTZMXL

ThreeJS-环境贴图（十五）

ThreeJS-环境贴图（十五）相关推荐

最新文章

热门文章