threejs5plane纹理涉及+平铺偏移流动

Posted 2021-11-07 Jessica巨人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了threejs5plane纹理涉及+平铺偏移流动相关的知识，希望对你有一定的参考价值。

import {WebGLRenderer, PerspectiveCamera, Scene, Mesh, SphereGeometry, MeshPhongMaterial, DoubleSide, Vector3, HemisphereLight, 
    AxesHelper, ObjectLoader, Vector2, DirectionalLight, PlaneGeometry, MirroredRepeatWrapping, RepeatWrapping, 
    ClampToEdgeWrapping, MeshBasicMaterial, Group, CylinderBufferGeometry, FrontSide, BackSide,TextureLoader}from "three"

import{OrbitControls}from "three/examples/jsm/controls/OrbitControls"
import{MTLLoader}from "three/examples/jsm/loaders/MTLLoader"
import{OBJLoader}from"three/examples/jsm/loaders/OBJLoader"
import{FBXLoader}from "three/examples/jsm/loaders/FBXLoader"
import{EffectComposer}from "three/examples/jsm/postprocessing/EffectComposer"
import{RenderPass}from "three/examples/jsm/postprocessing/RenderPass"
import{UnrealBloomPass}from "three/examples/jsm/postprocessing/UnrealBloomPass"
import{GUI}from "three/examples/jsm/libs/dat.gui.module"

var renedrer,camera,control,scene;
var effectComposer,renderPass,bloomPass;

var params = {
    exposure: 1,
    bloomStrength: 1.7,
    bloomThreshold: 0.01,
    bloomRadius: 0.4
};
var gui;

function init() 
{
    renedrer=new WebGLRenderer({});
    document.body.appendChild(renedrer.domElement);
    renedrer.setSize(window.innerWidth,window .innerHeight);

    camera=new PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,10000);
    camera.position.y=1000;
    camera.position.z=500;
    


    var light=new HemisphereLight(0xfffff,0x444444);
    var dirlight=new DirectionalLight(0xfffff);

    control=new OrbitControls(camera,renedrer.domElement);

    scene =new Scene();


    //scene.add(new Mesh(new SphereGeometry(2,30,30),new MeshPhongMaterial({color:0xff0000,side:DoubleSide})));
    scene.add(light);
    scene.add(dirlight);
    scene.add(new AxesHelper(10000));

    window.addEventListener('resize',()=>{
        renedrer.setSize(window.innerWidth,window .innerHeight);
        camera.aspect=window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
        effectComposer.setSize(window.innerWidth,window.innerHeight);
    })

    loadModel();
    initEffectComposer();
    initGUI();
}


function loadModel(params) {
    var fbxLoader=new FBXLoader();
    var mtlLoader=new MTLLoader();
    var objLoader=new OBJLoader();
    for (let i = 1; i < 8; i++) {
        mtlLoader.load("../assets/model/city/ny"+i+".mtl",function (preMaterial) {
        
            preMaterial.preload();
            objLoader.setMaterials(preMaterial).load("../assets/model/city/ny"+i+".obj",function(obj){
                obj.position.set(6001,604,2151);
                scene.add(obj);
            })
        })
        
    }
    // mtlLoader.load("../assets/model/city/ny9.mtl",function (preMaterial) {
        
    //     preMaterial.preload();
    //     objLoader.setMaterials(preMaterial).load("../assets/model/city/ny9.obj",function(obj){
    //         // obj.position.set(6001,604,2151);
    //         obj.position.set(300,300,300)
    //         scene.add(obj);
    //     })
    // })

    var textureLoader =new TextureLoader();
    var texture=textureLoader.load("./assets/xiaomogu.jpg");
    // texture.offset.set(0,0.5)

    var plane=new Mesh(new PlaneGeometry(20,20),new MeshPhongMaterial({
         map:texture
    }));
    scene.add(plane);    
}

function initEffectComposer(params) {
    effectComposer=new EffectComposer(renedrer);
    effectComposer.setSize(window.innerWidth,window.innerHeight);

    renderPass=new RenderPass(scene,camera);
    effectComposer.addPass(renderPass);

    bloomPass=new UnrealBloomPass(new Vector2(window.innerWidth,window.innerHeight),
    1.7,//srength 发光强度，越大越亮
    0.4,//radius发光扩散半径，值越大越扩展，值越小越集中
    0.1,//threshold 阈值 大于阈值才发光，越大放光越强烈
    )
    effectComposer.addPass(bloomPass);
}


function initGUI() {
    gui = new GUI();
    gui.add(params, 'exposure', 0.1, 2).onChange(function(value) {
        // renderer.toneMappingExposure
        renderer.toneMappingExposure = Math.pow(value,4.0); //调节整个场景亮度，默认值是1

    });

    gui.add(params, 'bloomThreshold', 0.0, 1.0).step(0.01).onChange(function(value) {

        bloomPass.threshold = Number(value);

    });

    gui.add(params, 'bloomStrength', 0.0, 3.0).step(0.01).onChange(function(value) {

        bloomPass.strength = Number(value);

    });

    gui.add(params, 'bloomRadius', 0.0, 1.0).step(0.01).onChange(function(value) {

        bloomPass.radius = Number(value);

    });
}
 

function render() {

    renedrer.render(scene,camera);
    // effectComposer.render(scene,camera);
    requestAnimationFrame(render);
}
init();
render();

效果图：

 var textureLoader =new TextureLoader();
    var texture=textureLoader.load("./assets/xiaomogu.jpg");
     texture.offset.set(0,0.5)

纹理平铺+纹理向左走动

局部修改代码

var textureTest;
function loadModel(params) {
    var textureLoader =new TextureLoader();
    textureTest=textureLoader.load("./assets/xiaomogu.jpg");
    //  texture.offset.set(0,0.5)
    textureTest.repeat.set(100,1)
    textureTest.wrapS=RepeatWrapping;//MirroredRepeatWrapping镜像平铺 RepeatWrapping重复平铺

    var plane=new Mesh(new PlaneGeometry(2000,20),new MeshPhongMaterial({
         map:textureTest
    }));
    scene.add(plane);    
}
function render() {

    renedrer.render(scene,camera);
    textureTest.offset.x+=0.01;
}

全部代码

import {WebGLRenderer, PerspectiveCamera, Scene, Mesh, SphereGeometry, MeshPhongMaterial, DoubleSide, Vector3, HemisphereLight, 
    AxesHelper, ObjectLoader, Vector2, DirectionalLight, PlaneGeometry, MirroredRepeatWrapping, RepeatWrapping, 
    ClampToEdgeWrapping, MeshBasicMaterial, Group, CylinderBufferGeometry, FrontSide, BackSide,TextureLoader}from "three"

import{OrbitControls}from "three/examples/jsm/controls/OrbitControls"
import{MTLLoader}from "three/examples/jsm/loaders/MTLLoader"
import{OBJLoader}from"three/examples/jsm/loaders/OBJLoader"
import{FBXLoader}from "three/examples/jsm/loaders/FBXLoader"
import{EffectComposer}from "three/examples/jsm/postprocessing/EffectComposer"
import{RenderPass}from "three/examples/jsm/postprocessing/RenderPass"
import{UnrealBloomPass}from "three/examples/jsm/postprocessing/UnrealBloomPass"
import{GUI}from "three/examples/jsm/libs/dat.gui.module"

var renedrer,camera,control,scene;
var effectComposer,renderPass,bloomPass;

var params = {
    exposure: 1,
    bloomStrength: 1.7,
    bloomThreshold: 0.01,
    bloomRadius: 0.4
};
var gui;
var textureTest;

function init() 
{
    renedrer=new WebGLRenderer({});
    document.body.appendChild(renedrer.domElement);
    renedrer.setSize(window.innerWidth,window .innerHeight);

    camera=new PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,10000);
    camera.position.y=1000;
    camera.position.z=500;
    


    var light=new HemisphereLight(0xfffff,0x444444);
    var dirlight=new DirectionalLight(0xfffff);

    control=new OrbitControls(camera,renedrer.domElement);

    scene =new Scene();


    //scene.add(new Mesh(new SphereGeometry(2,30,30),new MeshPhongMaterial({color:0xff0000,side:DoubleSide})));
    scene.add(light);
    scene.add(dirlight);
    scene.add(new AxesHelper(10000));

    window.addEventListener('resize',()=>{
        renedrer.setSize(window.innerWidth,window .innerHeight);
        camera.aspect=window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
        effectComposer.setSize(window.innerWidth,window.innerHeight);
    })

    loadModel();
    initEffectComposer();
    initGUI();
}


function loadModel(params) {
    var fbxLoader=new FBXLoader();
    var mtlLoader=new MTLLoader();
    var objLoader=new OBJLoader();
    for (let i = 1; i < 8; i++) {
        mtlLoader.load("../assets/model/city/ny"+i+".mtl",function (preMaterial) {
        
            preMaterial.preload();
            objLoader.setMaterials(preMaterial).load("../assets/model/city/ny"+i+".obj",function(obj){
                obj.position.set(6001,604,2151);
                scene.add(obj);
            })
        })
        
    }
    // mtlLoader.load("../assets/model/city/ny9.mtl",function (preMaterial) {
        
    //     preMaterial.preload();
    //     objLoader.setMaterials(preMaterial).load("../assets/model/city/ny9.obj",function(obj){
    //         // obj.position.set(6001,604,2151);
    //         obj.position.set(300,300,300)
    //         scene.add(obj);
    //     })
    // })

    var textureLoader =new TextureLoader();
    textureTest=textureLoader.load("./assets/xiaomogu.jpg");
    //  texture.offset.set(0,0.5)
    textureTest.repeat.set(100,1)
    textureTest.wrapS=RepeatWrapping;//MirroredRepeatWrapping镜像平铺RepeatWrapping重复平铺

    var plane=new Mesh(new PlaneGeometry(2000,20),new MeshPhongMaterial({
         map:textureTest
    }));
    scene.add(plane);    
}

function initEffectComposer(params) {
    effectComposer=new EffectComposer(renedrer);
    effectComposer.setSize(window.innerWidth,window.innerHeight);

    renderPass=new RenderPass(scene,camera);
    effectComposer.addPass(renderPass);

    bloomPass=new UnrealBloomPass(new Vector2(window.innerWidth,window.innerHeight),
    1.7,//srength 发光强度，越大越亮
    0.4,//radius发光扩散半径，值越大越扩展，值越小越集中
    0.1,//threshold 阈值 大于阈值才发光，越大放光越强烈
    )
    effectComposer.addPass(bloomPass);
}


function initGUI() {
    gui = new GUI();
    gui.add(params, 'exposure', 0.1, 2).onChange(function(value) {
        // renderer.toneMappingExposure
        renderer.toneMappingExposure = Math.pow(value,4.0); //调节整个场景亮度，默认值是1

    });

    gui.add(params, 'bloomThreshold', 0.0, 1.0).step(0.01).onChange(function(value) {

        bloomPass.threshold = Number(value);

    });

    gui.add(params, 'bloomStrength', 0.0, 3.0).step(0.01).onChange(function(value) {

        bloomPass.strength = Number(value);

    });

    gui.add(params, 'bloomRadius', 0.0, 1.0).step(0.01).onChange(function(value) {

        bloomPass.radius = Number(value);

    });
}
 

function render() {

    renedrer.render(scene,camera);
    textureTest.offset.x+=0.01;
    // effectComposer.render(scene,camera);
    requestAnimationFrame(render);
}
init();
render();

以上是关于threejs5plane纹理涉及+平铺偏移流动的主要内容，如果未能解决你的问题，请参考以下文章

在OpenGL中将纹理bmp文件作为纹理平铺到矩形上？

Threejs—BIM管道流向动态效果

如何平铺 Sprite 节点的纹理？

使用vue学习three.js之加载和使用纹理- 通过设置纹理的wrapSwrapTrepeat属性实现纹理的重复平铺，纹理的重复映射

偏移图像框内的平铺形状

OpenGL将图像平铺到纹理中并耗尽内存