three.js为正方体6个面加载不同纹理（and天空图的制作）

最新推荐文章于 2023-01-18 09:08:21 发布
最新推荐文章于 2023-01-18 09:08:21 发布
阅读量2.2k 收藏 3
点赞数 2
分类专栏： three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45702700/article/details/101806217
版权

实现功能

1.加载天空图。
2.OrbitControls视角控制器。
3.正方体6个面加载不同纹理。

实现效果

一个天空图中有着6个面加载了不同纹理的正方体
完整代码请看最底下，接下来进行分段功能介绍

功能代码解释

1.加载天空图
第一步：创建天空图纹理。先将全景图的6个面文件路径加载到一个数组，然后调用loadTextureCube（不是loadTexture）方法加载纹理组合。

    function createCubeMap() {

        var path = "../assets/textures/cubemap/parliament/";
        var format = '.jpg';
        var urls = [
            path + 'posx' + format, path + 'negx' + format,
            path + 'posy' + format, path + 'negy' + format,
            path + 'posz' + format, path + 'negz' + format
        ];//加载6张图

        var textureCube = THREE.ImageUtils.loadTextureCube(urls);//加载纹理
        return textureCube;//函数返回此纹理
    }

第二步：创建天空背景图。

       var textureCube = createCubeMap();//调用函数创建纹理
        scene.background = textureCube ;//将场景的背景设置为天空图纹理
        textureCube.format = THREE.RGBFormat;

        var shader = THREE.ShaderLib["cube"];//自定义着色器
        shader.uniforms["tCube"].value = textureCube;

        var material = new THREE.ShaderMaterial({

            fragmentShader: shader.fragmentShader,
            vertexShader: shader.vertexShader,
            uniforms: shader.uniforms,
            depthWrite: false,
            side: THREE.DoubleSide   //要能看到天空盒内部

        });

        //创建天空盒网格
        var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);

2.OrbitControls视角控制器。
这个设置比较简单，只要几步就能完成。
首先加载js代码包；

    <script src="../libs/OrbitControls.js"></script>

然后然后将相机添加到OrbitControls视角控制器；

orbit = new THREE.OrbitControls(camera);

最后再渲染循环时更新视角控制器的视角控制。

orbit.update();

3.正方体6个面加载不同纹理。
先解释以下下面展示代码的原理，一开始我也不理解，后来我打开开发者模式我 们查看网格的属性可以看到，其实每一个网格的gemotry属性中的faces属性中的12个面中，每一个面都有一个材质索引(materialIndex)，该索引可以将我们所加载的6个纹理分别赋值给单个索引。我们分别查看每一个面的材质索引(materialIndex)可以发现一个索引对应两个面，所以6个纹理正好赋值给了正方体6个面的每一个面。
在这里插入图片描述
具体操作代码中有注释进行解释。

    //调用setMech方法创建一个长宽高各为6的正方体
    var cube = setMesh(new THREE.BoxGeometry(6, 6, 6));
    //此方法可以加载6种不同纹理赋值给材质并且根据传入集合体创建网格。
    function setMesh(cubeG) {
        //加载6种纹理
        var texture1 = THREE.ImageUtils.loadTexture("../assets/textures/general/bathroom.jpg");
        var texture2 = THREE.ImageUtils.loadTexture("../assets/textures/general/weave.jpg");
        var texture3 = THREE.ImageUtils.loadTexture("../assets/textures/general/plaster.jpg");
        var texture4 = THREE.ImageUtils.loadTexture("../assets/textures/general/stone.jpg");
        var texture5 = THREE.ImageUtils.loadTexture("../assets/textures/general/brick-wall.jpg");
        var texture6 = THREE.ImageUtils.loadTexture("../assets/textures/general/metal-rust.jpg");
        //创建纹理数组
        var mats = [];
        mats.push(new THREE.MeshBasicMaterial({map: texture1}));
        mats.push(new THREE.MeshBasicMaterial({map: texture2}));
        mats.push(new THREE.MeshBasicMaterial({map: texture3}));
        mats.push(new THREE.MeshBasicMaterial({map: texture4}));
        mats.push(new THREE.MeshBasicMaterial({map: texture5}));
        mats.push(new THREE.MeshBasicMaterial({map: texture6}));
        //MeshFaceMaterial这种材质能接收纹理组合
        var cubeM = new THREE.MeshFaceMaterial(mats);
        return  cube = new THREE.Mesh(cubeG, cubeM);
    }

**4.**另外还设置了gui进行控制，本文就不加以介绍，有新手不懂的可以跟我留言交流。

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TextureTest</title>
    <script src="../libs/three.js"></script>
    <script src="../libs/dat.gui.js"></script>
    <script src="../libs/OrbitControls.js"></script>

    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="WebGL-output"></div>
<script>

    function init() {

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        orbit = new THREE.OrbitControls(camera);

        camera.position.x = 0;
        camera.position.y = -10;
        camera.position.z = -100;
        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        var textureCube = createCubeMap();
        scene.background = textureCube ;
        textureCube.format = THREE.RGBFormat;

        var shader = THREE.ShaderLib["cube"];
        shader.uniforms["tCube"].value = textureCube;

        var material = new THREE.ShaderMaterial({

            fragmentShader: shader.fragmentShader,
            vertexShader: shader.vertexShader,
            uniforms: shader.uniforms,
            depthWrite: false,
            side: THREE.DoubleSide

        });

        var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
        scene.add(skybox);

        var cube = setMesh(new THREE.BoxGeometry(6, 6, 6));
        scene.add(cube);

        document.getElementById("WebGL-output").appendChild(renderer.domElement);


        var controls = new function () {

            this.positionX = 0;
            this.positionY = 0;
            this.positionZ = 0;

            this.rotationSpeed = 0.01;
            this.rotation = true ;

            this.visible = true;

        };

        var gui = new dat.GUI();

        guiPosition = gui.addFolder('position');
        guiPosition.add(controls, 'positionX', -10, 10).onChange(function (value) {
            cube.position.x = controls.positionX;
        });
        guiPosition.add(controls, 'positionY', -10, 10).onChange(function (value) {
            cube.position.y = controls.positionY;
        });
        guiPosition.add(controls, 'positionZ', -10, 10).onChange(function (value) {
            cube.position.z = controls.positionZ;
        });

        gui.add(controls,'rotation');
        gui.add(controls,'rotationSpeed',0.001,0.5);
        gui.add(controls, 'visible');

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        render();
        function render() {
            orbit.update();

            cube.visible = controls.visible;

           if (controls.rotation){
               cube.rotation.x += controls.rotationSpeed;
               cube.rotation.y += controls.rotationSpeed;
               cube.rotation.z += controls.rotationSpeed;
           }
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }
    }

    function setMesh(cubeG) {
        var texture1 = THREE.ImageUtils.loadTexture("../assets/textures/general/bathroom.jpg");
        var texture2 = THREE.ImageUtils.loadTexture("../assets/textures/general/weave.jpg");
        var texture3 = THREE.ImageUtils.loadTexture("../assets/textures/general/plaster.jpg");
        var texture4 = THREE.ImageUtils.loadTexture("../assets/textures/general/stone.jpg");
        var texture5 = THREE.ImageUtils.loadTexture("../assets/textures/general/brick-wall.jpg");
        var texture6 = THREE.ImageUtils.loadTexture("../assets/textures/general/metal-rust.jpg");
        var mats = [];
        mats.push(new THREE.MeshBasicMaterial({map: texture1}));
        mats.push(new THREE.MeshBasicMaterial({map: texture2}));
        mats.push(new THREE.MeshBasicMaterial({map: texture3}));
        mats.push(new THREE.MeshBasicMaterial({map: texture4}));
        mats.push(new THREE.MeshBasicMaterial({map: texture5}));
        mats.push(new THREE.MeshBasicMaterial({map: texture6}));
        var cubeM = new THREE.MeshFaceMaterial(mats);
        return  cube = new THREE.Mesh(cubeG, cubeM);
    }

    function createCubeMap() {

        var path = "../assets/textures/cubemap/parliament/";
        var format = '.jpg';
        var urls = [
            path + 'posx' + format, path + 'negx' + format,
            path + 'posy' + format, path + 'negy' + format,
            path + 'posz' + format, path + 'negz' + format
        ];

        var textureCube = THREE.ImageUtils.loadTextureCube(urls);
        return textureCube;
    }

    window.onload = init;

</script>
</body>
</html>

欢迎大家留言一起交流互相学习呀！

no see me
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
three.js创建及使用纹理贴图；给立方体六个面设置不同的纹理贴图
weixin_40856652的博客
06-16 4842
three.js创建及使用纹理贴图；给立方体六个面设置不同的纹理贴图
在Three.js中玩纹理投影
culiao9310的博客
09-28 960
three.js加载纹理View demo 查看演示Download Source 下载源Texture projection is a way of mapping a texture onto a 3D object and making it look like it was projected from a single point. Think o...
threeJS创建六面不同图片的正方形(纹理贴图)
qq_42683219的博客
04-24 3354
效果图 总体步骤 ① 创建场景 ② 创建相机 ③ 创建物体 ④创建渲染器 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ...
three.js立方体六面贴图做法解析
weixin_41993525的博客
03-29 1621
three.js立方体六面图片贴图 // 案例1 var path = "resources/textures/cube/pisa/"; var format = '.png'; var urls = [ path + 'px' + format, path + 'nx' + format, path + 'py' + format, path + 'ny' + format, path + 'pz' + format, path + 'nz' + format ]; let geometry = n
THREE.js为正方体的6个面贴上图片
热门推荐
kingov
08-15 1万+
效果图 代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co
three.js加载json三维模型.zip
11-14
在三维Web开发领域，Three.js是一个非常流行的JavaScript库，它为浏览器提供了强大的3D图形渲染功能。本主题将深入探讨如何使用Three.js加载JSON格式的三维模型，以及与BIM（建筑信息模型）相关的应用。 一、Three....
three.js加载gltf模型
09-17
在本文中，我们将深入探讨如何使用three.js库加载GLTF（GL Transmission Format）模型，并结合Vue.js框架构建一个完整的Web应用程序。GLTF是一种开放标准的3D资产交换格式，广泛用于WebGL和WebVR场景，因为它能高效...
three.js 利用uv和ThreeBSP制作一个快递柜功能
10-14
Three.js是一个流行的JavaScript库，用于在Web浏览器中进行3D图形编程。UV映射是3D建模中的一种技术，用于将2D纹理贴合到3D模型的表面。ThreeBSP则是一个扩展库，它提供了基于布尔运算的3D几何体操作。 首先，快递...
three.js的室内地图展示
05-21
three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得更加简单。通过这个项目，我们可以学习到以下几个关键知识点： 1. **WebGL基础**：WebGL是一种在浏览器中渲染3D图形的标准，它是OpenGL的一...
three.js天空盒资源
01-12
3. **加载纹理**：利用`THREE.TextureLoader`加载天空盒的六个面的图像，然后创建`CubeTexture`对象，将加载的纹理传入。 4. **创建材质**：创建一个`MeshBasicMaterial`或`MeshCubeMaterial`，并设置其`map`属性为...
threejs-cubemap-exporter:将THREE.CubeCamera的立方体贴图环境导出到6个.PNG中
05-19
threejs-cubemap-exporter 将THREE.CubeCamera的立方体贴图环境导出到6个.PNG中 用法 执照 麻省理工学院，有关详细信息，请参阅 。
Three.js每个面设置不同的颜色、每个面设置不同的材质
niuge8905的博客
12-22 1万+
1.每个面设置不同的颜色 let geometry = new THREE.BoxGeometry( 1000, 1000, 1000); for(let i = 0;i&lt;geometry.faces.length;i++){ let hex = Math.random() * 0xffffff; ...
threejs中设置物体的贴图+场景的6面贴图 +创建空间
preserveXing的博客
05-31 890
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./lib/three.min.js"></script> <!-- //引入控制器--> <script src="./lib/OrbitControls.
threejs 之box贴图--6个 面集中在一个图片上
weixin_34112030的博客
05-17 2688
2019独角兽企业重金招聘Python工程师标准>>> ...
threejs 三面体_three.js的问题！怎么设置正方体的6面贴图各不一样，实现下图效果...
weixin_39838362的博客
12-20 1024
var texture = new THREE.TextureLoader().load("aa.jpg");var bricks = [new THREE.Vector2(0, .666), new THREE.Vector2(.5, .666), new THREE.Vector2(.5, 1), new THREE.Vector2(0, 1)];var clouds = [new THREE...
threejs 根据相机参数 将 3d 框映射到图片画一个平面6面体图形
weixin_35755640的博客
01-18 303
在 Three.js 中，可以使用 THREE.BoxHelper 来绘制 3D 框，并使用相机的 projectionMatrix 和 matrixWorldInverse 将其映射到图片上。首先，创建一个 THREE.BoxHelper 并将其加入场景中。然后，在渲染循环中，使用相机的投影矩阵和世界反矩阵将其映射到屏幕空间。最后，使用 canvas 或 WebGL 绘制这个平面六面体图形。 ...
threejs修改场景天空盒背景图
qq_23447231的博客
06-22 2909
先来看下效果图~ 原理 原理其实很简单，我就是设置了scene的background。一句话解释完了。下面看下代码： let cubeTextureLoader = new THREE.CubeTextureLoader(); cubeTextureLoader.setPath( '/skybox/' ); let cubeTexture = cubeTextureLoader.load( [ "px.png", "nx.png", "py.png", "ny.png", "pz
threejs基本知识5 （贴图）
sqbcsdn的博客
12-02 671
threejs
three.js cube六面贴图
weixin_30355437的博客
01-21 449
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>texture</title> 5 <script src="js/three.min.js"></script> 6 <style> 7 b...
three.js绘制正方体
最新发布
06-07
要使用three.js绘制正方体，你需要先创建一个场景（Scene）和一个相机（Camera）。然后，你需要创建一个立方体的几何体（BoxGeometry），并将其传递给一个网格（Mesh）。最后，将网格添加到场景中即可。 下面是一段示例代码： ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建几何体 var geometry = new THREE.BoxGeometry(1, 1, 1); // 创建材质 var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 创建网格 var cube = new THREE.Mesh(geometry, material); // 将网格添加到场景中 scene.add(cube); // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 渲染场景 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ``` 这段代码将会创建一个绿色的正方体，并在屏幕上旋转它。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值