three.js 环境贴图

效果：

环境贴图中用到了立方体纹理加载器，加载6张图片后（图片要长宽相等），得到一个立方体纹理对象，然后赋值给材质的 envMap 即可；

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>环境贴图</title><script src="../three.js"></script><script src="../OrbitControls.js"></script>
</head><body><!-- 如果模型定义了法线贴图，就没有必要在使用凹凸贴图。 --><script>// 1, 创建场景对象var scene = new THREE.Scene();// 2,定义模型var geometry = new THREE.BoxGeometry(100, 100,100);var texture = new THREE.CubeTextureLoader();texture.setPath('/纹理贴图/');var CubeTexture = texture.load(['right.jpg','left.jpg','top.jpg','bottom.jpg','back.jpg','front.jpg']);texture.minFilter = THREE.LinearFilter;var material = new THREE.MeshPhongMaterial({envMap: CubeTexture});var mesh = new THREE.Mesh(geometry, material);scene.add(mesh);// 3,创建光源对象--聚光源var spotLight = new THREE.SpotLight(0xAA7355, 0.9);spotLight.position.set(300, 200, 200);spotLight.angle = Math.PI / 2;var spotLight2 = new THREE.AmbientLight(0xffffff);// spotLight2.position.set(-300, 200, 200);// spotLight2.angle = Math.PI / 2;scene.add(spotLight,spotLight2);// 4,创建相机var width = window.innerWidth;var height = window.innerHeight;var k = width / height;var s = 200;var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -1000, 1000);camera.position.set(200, 300, 200);camera.lookAt(scene.position);// 5,创建渲染器对象var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);document.body.appendChild(renderer.domElement);function render() {renderer.render(scene, camera);requestAnimationFrame(render);}var axes = new THREE.AxesHelper(500);scene.add(axes);var controls = new THREE.OrbitControls(camera, renderer.domElement);// controls.addEventListener('change',render);render();</script>
</body></html>

three.js 环境贴图相关推荐

React Three.js 增加hdr环境贴图和背景图片的方法
React Three.js 增加hdr环境贴图和背景图片的方法: import React, { Suspense, useEffect } from 'react' import { Canvas ...
three.js入门篇6之环境贴图、经纬线映射贴图与高动态范围成像HDR
目录 013-1 环境贴图 013-2 经纬度映射贴图与HDR 013-1 环境贴图就是把周边的环境,贴在物体的表面之上注意:px:x轴正向,nx:x轴负向 import * as THREE f ...
Three.js开发：环境贴图效果
Three.js支持环境贴图效果,通过设置场景的背景(background),增强显示效果,环境贴图一般使用全景图,分成6张图片,以立体贴图(CubeTexture)的方式进行加载. 官网示例效果: ...
three.js通过CubeTexture加载环境贴图，和RGBELoader加载器加载hdr环境贴图
一.使用CubeTexture进行环境贴图 1.CubeTexture使用介绍 Three.js中可以通过使用CubeTexture进行环境贴图,CubeTexture需要将6张图片(正面.反面.上下 ...
three.js使用CubeCamera创建反光效果，动态环境贴图实现，立方体全景贴图(vue中使用three.js83)
使用CubeCamera创建反光效果 1.demo效果 2. 实现要点 2.1 创建立方体相机CubeCamera 2.2 使用动态环境贴图材质 2.3 render中更新立方体相机 2.4 创建场景 ...
paip.最好的脚本语言node js 环境搭建连接mysql
paip.最好的脚本语言node js 环境搭建连接mysql #====下载node...走十一个exe..容易的.. 1 #0----Hello world .js 2 #---------模 ...
Node.js环境搭建npm安装
Node.js环境搭建什么使Node.js呢?我们知道JavaScript开始作为客户端语言,但早已在浏览器端一统江湖,这时,野心越来越大,它就想向服务器端拓展了,于是Node.js就是这样的,我们 ...
three.js 纹理贴图的使用
刚刚入门的小伙伴请先查看 three.js 基础认识与简单应用本文章中的两个注意点,下面也有提到,分别是: 1. vue项目中使用的贴图路径-->需要把 static文件夹放到 publ ...
【明哥版】Auto.Js环境搭建如何与Android手机建立连接教程
前言为什么要写这篇文章呢?主要是翻阅Auto.js文档没有找到环境搭建这章节,而且在翻阅一些社区要看见一些Auto.js入门的新手不知道怎么操作,且博主本人在搭建开发环境时同样也遇见了一些问题,发现 ...

three.js 环境贴图

three.js 环境贴图相关推荐

最新文章

热门文章