【Three.js基础学习】20.Environment map

news2024/11/15 6:46:27

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

课程回顾：

    模型的加载

    GLTFLoader

    环境贴图实现；

    CubeTextureLoader

    LDR:低动态范围

    backgroundBlurriness：设置背景模糊 (不生效 为什么?)

    backgroundIntensity: 设置背景强度，设置的是背景亮度 (不生效 为什么?)

    HDRI :  等距矩形环境贴图

    如何加载使用HDRI文件?

    RGBE ：红色 ，绿色 ，蓝色 ，指数：存储的是亮度 (重点)

    我们需要使用RGBELoader。"RGBE"代表"红绿蓝指数"，指数存储亮度

    这是“HDR”格式的编码。

    THREE.EquirectangularReflectionMapping // 等距型反射

    THREE.EquirectangularRefractionMapping // 折射透明

    HDRI 缺点

        文件加载渲染较大

    建议只对光照使用HDRI

    ?上面实现中有一个问题，如何解决环境贴图对模型的影响

    1.blender如何生成环境地图?

    在blender制作

    2.使用NVIDA Canvas生成环境地图

    https://www.nvidia.cn/studio/canvas/

        类型：exr后缀

        扩展名是.exr，而不是.hdr。我们导出的文件也是存储的颜色范围的“HDR”图像，但编码不同

        EXR还可以存储层，并具有alpha通道

   

    3. 环境贴图 (收费)

        https://skybox.blockadelabs.com/

   

    时间环境地图

    真实的光 ： 如何让甜甜圈模型 产生光?

        需要创建自己的立方体纹理，更textureLoad差不多，在每一帧中做处理；因此使用webgl立方体渲染器目标

   

    这个时候模型还是黑色

    需要一个特殊的相机。 如果想要渲染就需要一个相机进行拍摄

    WebGLCubeRenderTarget

    分成解决相机渲染，决定显示什么

    object.layers.enable(..)将添加一个图层

    object.layers.disable(...)将移除一个图层

    object.layers.set(...)将自动启用一个图层并禁用所有其他图层

一、代码

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import GUI from 'lil-gui'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
import { Mapping, Mesh } from 'three'


/* 
* Loaders
*/
const gltfLoader = new GLTFLoader()
const cubeTextrueLoader = new THREE.CubeTextureLoader()
const rgbeLoader = new RGBELoader()
const exrLoader = new EXRLoader()
const textureLoader = new THREE.TextureLoader()

/**
 * gui
 */
 const gui = new GUI()
 const global = {
 }

// Canvas
const canvas = document.querySelector('canvas.webgl')

/**
 * scene
 */
const scene = new THREE.Scene()
/*
    Updata all materials
*/
const updateAllMaterials = () => {
    scene.traverse((child)=>{ //  遍历
        if(child.isMesh && child.material.isMeshStandardMaterial){
            child.material.envMapIntensity = global.envMapIntensity
        }
    })
}

/* 
    environmentMap 环境贴图
*/
scene.backgroundBlurriness = 0
scene.backgroundIntensity = 1
// global intensity 
global.envMapIntensity = 1 // 环境贴图强度
gui
    .add(global,'envMapIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    .onChange(updateAllMaterials)
gui
    .add(scene, 'backgroundBlurriness')
    .min(0)
    .max(1)
    .step(0.001)
gui
    .add(scene, 'backgroundIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    

// LDR cube texture  环境贴图的实现
// const environmentMap = cubeTextrueLoader.load([
//     '/environmentMaps/2/px.png',
//     '/environmentMaps/2/nx.png',
//     '/environmentMaps/2/py.png',
//     '/environmentMaps/2/ny.png',
//     '/environmentMaps/2/pz.png',
//     '/environmentMaps/2/nz.png',
// ])
// scene.environment = environmentMap  // 可以实现场景中每一个网格材质对于场景起到作用
// scene.background = environmentMap // 将环境贴图应用到场景中


// HDR (RGBA) equirectangular
// rgbeLoader.load(
//     '/environmentMaps/测试hdr生成全景3.hdr',
//     (environmentMap)=>{
//         environmentMap.mapping = THREE.EquirectangularReflectionMapping
//         scene.background = environmentMap
//         scene.environment = environmentMap
//     }
// )

// HDR (EXR) equirectangular
// exrLoader.load('/environmentMaps/nvidiaCanvas-4k.exr',(environmentMap)=>{
//     environmentMap.mapping = THREE.EquirectangularReflectionMapping
//     scene.background = environmentMap
//     scene.environment = environmentMap
// })

// LDR equirectangular
// const environmentMap = textureLoader.load('') //没资源
// environmentMap.mapping = THREE.EquirectangularReflectionMapping
// environmentMap.colorSpace = THREE.SRGBColorSpace
// scene.background = environmentMap
// scene.environment = environmentMap

// Ground projected skybox
// rgbeLoader.load('/environmentMaps/1/little_paris_eiffel_tower_8k.hdr',(environmentMap)=>{
//     environmentMap.mapping = THREE.EquirectangularReflectionMapping
//     scene.environment = environmentMap
//     scene.background = environmentMap
// })

/* 
    Real time environment map
*/
const environmentMap = textureLoader.load('/environmentMaps/blockadesLabsSkybox/interior_views_cozy_wood_cabin_with_cauldron_and_p.jpg')
environmentMap.mapping = THREE.EquirectangularReflectionMapping
environmentMap.colorSpace = THREE.SRGBColorSpace

scene.background = environmentMap

/* 
    holyDount
*/
const holyDonut = new THREE.Mesh(
    new THREE.TorusGeometry(8,0.5),
    new THREE.MeshBasicMaterial({color:new THREE.Color(10, 4, 2)})
)
holyDonut.layers.enable(1) // 分层启用
holyDonut.position.y = 3.5
scene.add(holyDonut)

/* 
    cube render target
*/
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(
    256, // 分辨率
    { // 渲染目标的选项
        type:THREE.FloatType  // 类型
    }
)

scene.environment = cubeRenderTarget.texture // 使用自己的纹理

// Cube Camera
const cubeCamera = new THREE.CubeCamera(0.1,100,cubeRenderTarget) // 要每一帧渲染
cubeCamera.layers.set(1) // 设置相机分成

/**
 * torus knot
 */
const torusKnot = new THREE.Mesh(
    new THREE.TorusKnotGeometry(1, 0.4, 100, 16),
    new THREE.MeshStandardMaterial({
        roughness: 0,
        metalness: 1,
        color: 0xaaaaaa
    })
)
torusKnot.position.x = -4
torusKnot.position.y = 4
scene.add(torusKnot)

/* 
* Models
*/
gltfLoader.load(
    '/models/FlightHelmet/glTF/FlightHelmet.gltf',
    (gltf)=>{
        gltf.scene.scale.set(10,10,10)
        scene.add(gltf.scene)
        updateAllMaterials()
    }
)


/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () => {
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * camera
 */
 const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
 camera.position.set(- 8, 4, 8)
 scene.add(camera)

/**
 * renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
// renderer.shadowMap.enabled = true
// renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))


/**
 * control
 */
const controls = new OrbitControls(camera, canvas)
controls.target.y = 3.5
controls.enableDamping = true

/**
 * tick
 */
const clock = new THREE.Clock()
const tick = () => {
    // Time
    const elapsedTime = clock.getElapsedTime()

    if(holyDonut){
        holyDonut.rotation.x = Math.sin(elapsedTime) * 2
        cubeCamera.update(renderer, scene)
    }

    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()

二、知识点

1.LDR

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import GUI from 'lil-gui'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
import { Mapping, Mesh } from 'three'


/* 
* Loaders
*/
const gltfLoader = new GLTFLoader()
const cubeTextrueLoader = new THREE.CubeTextureLoader()
const rgbeLoader = new RGBELoader()
const exrLoader = new EXRLoader()
const textureLoader = new THREE.TextureLoader()

/**
 * gui
 */
 const gui = new GUI()
 const global = {
 }

// Canvas
const canvas = document.querySelector('canvas.webgl')

/**
 * scene
 */
const scene = new THREE.Scene()
/*
    Updata all materials
*/
const updateAllMaterials = () => {
    scene.traverse((child)=>{ //  遍历
        if(child.isMesh && child.material.isMeshStandardMaterial){
            child.material.envMapIntensity = global.envMapIntensity
        }
    })
}

/* 
    environmentMap 环境贴图
*/
scene.backgroundBlurriness = 0
scene.backgroundIntensity = 1
// global intensity 
global.envMapIntensity = 1 // 环境贴图强度
gui
    .add(global,'envMapIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    .onChange(updateAllMaterials)
gui
    .add(scene, 'backgroundBlurriness')
    .min(0)
    .max(1)
    .step(0.001)
gui
    .add(scene, 'backgroundIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    

// LDR cube texture  环境贴图的实现
const environmentMap = cubeTextrueLoader.load([
    '/environmentMaps/2/px.png',
    '/environmentMaps/2/nx.png',
    '/environmentMaps/2/py.png',
    '/environmentMaps/2/ny.png',
    '/environmentMaps/2/pz.png',
    '/environmentMaps/2/nz.png',
])
scene.environment = environmentMap  // 可以实现场景中每一个网格材质对于场景起到作用
scene.background = environmentMap // 将环境贴图应用到场景中


/**
 * torus knot
 */
const torusKnot = new THREE.Mesh(
    new THREE.TorusKnotGeometry(1, 0.4, 100, 16),
    new THREE.MeshStandardMaterial({
        roughness: 0,
        metalness: 1,
        color: 0xaaaaaa
    })
)
torusKnot.position.x = -4
torusKnot.position.y = 4
scene.add(torusKnot)

/* 
* Models
*/
gltfLoader.load(
    '/models/FlightHelmet/glTF/FlightHelmet.gltf',
    (gltf)=>{
        gltf.scene.scale.set(10,10,10)
        scene.add(gltf.scene)
        updateAllMaterials()
    }
)


/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () => {
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * camera
 */
 const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
 camera.position.set(- 8, 4, 8)
 scene.add(camera)

/**
 * renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
// renderer.shadowMap.enabled = true
// renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))


/**
 * control
 */
const controls = new OrbitControls(camera, canvas)
controls.target.y = 3.5
controls.enableDamping = true

/**
 * tick
 */
const clock = new THREE.Clock()
const tick = () => {
    // Time
    const elapsedTime = clock.getElapsedTime()


    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()

2.HDR （RGBA）

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import GUI from 'lil-gui'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
import { Mapping, Mesh } from 'three'

/* 
* Loaders
*/
const gltfLoader = new GLTFLoader()
const cubeTextrueLoader = new THREE.CubeTextureLoader()
const rgbeLoader = new RGBELoader()
const exrLoader = new EXRLoader()
const textureLoader = new THREE.TextureLoader()

/**
 * gui
 */
 const gui = new GUI()
 const global = {
 }

// Canvas
const canvas = document.querySelector('canvas.webgl')

/**
 * scene
 */
const scene = new THREE.Scene()
/*
    Updata all materials
*/
const updateAllMaterials = () => {
    scene.traverse((child)=>{ //  遍历
        if(child.isMesh && child.material.isMeshStandardMaterial){
            child.material.envMapIntensity = global.envMapIntensity
        }
    })
}

/* 
    environmentMap 环境贴图
*/
scene.backgroundBlurriness = 0
scene.backgroundIntensity = 1
// global intensity 
global.envMapIntensity = 1 // 环境贴图强度
gui
    .add(global,'envMapIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    .onChange(updateAllMaterials)
gui
    .add(scene, 'backgroundBlurriness')
    .min(0)
    .max(1)
    .step(0.001)
gui
    .add(scene, 'backgroundIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    


// HDR (RGBA) equirectangular
rgbeLoader.load(
    '/environmentMaps/测试hdr生成全景3.hdr',
    (environmentMap)=>{
        environmentMap.mapping = THREE.EquirectangularReflectionMapping
        scene.background = environmentMap
        scene.environment = environmentMap
    }
)


/**
 * torus knot
 */
const torusKnot = new THREE.Mesh(
    new THREE.TorusKnotGeometry(1, 0.4, 100, 16),
    new THREE.MeshStandardMaterial({
        roughness: 0,
        metalness: 1,
        color: 0xaaaaaa
    })
)
torusKnot.position.x = -4
torusKnot.position.y = 4
scene.add(torusKnot)

/* 
* Models
*/
gltfLoader.load(
    '/models/FlightHelmet/glTF/FlightHelmet.gltf',
    (gltf)=>{
        gltf.scene.scale.set(10,10,10)
        scene.add(gltf.scene)
        updateAllMaterials()
    }
)


/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () => {
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * camera
 */
 const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
 camera.position.set(- 8, 4, 8)
 scene.add(camera)

/**
 * renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
// renderer.shadowMap.enabled = true
// renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))


/**
 * control
 */
const controls = new OrbitControls(camera, canvas)
controls.target.y = 3.5
controls.enableDamping = true

/**
 * tick
 */
const clock = new THREE.Clock()
const tick = () => {
    // Time
    const elapsedTime = clock.getElapsedTime()



    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()

3.HDR （EXR）

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import GUI from 'lil-gui'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
import { Mapping, Mesh } from 'three'

/* 
* Loaders
*/
const gltfLoader = new GLTFLoader()
const cubeTextrueLoader = new THREE.CubeTextureLoader()
const rgbeLoader = new RGBELoader()
const exrLoader = new EXRLoader()
const textureLoader = new THREE.TextureLoader()

/**
 * gui
 */
 const gui = new GUI()
 const global = {
 }

// Canvas
const canvas = document.querySelector('canvas.webgl')

/**
 * scene
 */
const scene = new THREE.Scene()
/*
    Updata all materials
*/
const updateAllMaterials = () => {
    scene.traverse((child)=>{ //  遍历
        if(child.isMesh && child.material.isMeshStandardMaterial){
            child.material.envMapIntensity = global.envMapIntensity
        }
    })
}

/* 
    environmentMap 环境贴图
*/
scene.backgroundBlurriness = 0
scene.backgroundIntensity = 1
// global intensity 
global.envMapIntensity = 1 // 环境贴图强度
gui
    .add(global,'envMapIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    .onChange(updateAllMaterials)
gui
    .add(scene, 'backgroundBlurriness')
    .min(0)
    .max(1)
    .step(0.001)
gui
    .add(scene, 'backgroundIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    


// HDR (EXR) equirectangular
exrLoader.load('/environmentMaps/nvidiaCanvas-4k.exr',(environmentMap)=>{
    environmentMap.mapping = THREE.EquirectangularReflectionMapping
    scene.background = environmentMap
    scene.environment = environmentMap
})

/**
 * torus knot
 */
const torusKnot = new THREE.Mesh(
    new THREE.TorusKnotGeometry(1, 0.4, 100, 16),
    new THREE.MeshStandardMaterial({
        roughness: 0,
        metalness: 1,
        color: 0xaaaaaa
    })
)
torusKnot.position.x = -4
torusKnot.position.y = 4
scene.add(torusKnot)

/* 
* Models
*/
gltfLoader.load(
    '/models/FlightHelmet/glTF/FlightHelmet.gltf',
    (gltf)=>{
        gltf.scene.scale.set(10,10,10)
        scene.add(gltf.scene)
        updateAllMaterials()
    }
)


/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () => {
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * camera
 */
 const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
 camera.position.set(- 8, 4, 8)
 scene.add(camera)

/**
 * renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
// renderer.shadowMap.enabled = true
// renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))


/**
 * control
 */
const controls = new OrbitControls(camera, canvas)
controls.target.y = 3.5
controls.enableDamping = true

/**
 * tick
 */
const clock = new THREE.Clock()
const tick = () => {
    // Time
    const elapsedTime = clock.getElapsedTime()

    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()

4.时间环境地图

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import GUI from 'lil-gui'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js'
import {EXRLoader} from 'three/examples/jsm/loaders/EXRLoader.js'
import { Mapping, Mesh } from 'three'


/* 
* Loaders
*/
const gltfLoader = new GLTFLoader()
const cubeTextrueLoader = new THREE.CubeTextureLoader()
const rgbeLoader = new RGBELoader()
const exrLoader = new EXRLoader()
const textureLoader = new THREE.TextureLoader()

/**
 * gui
 */
 const gui = new GUI()
 const global = {
 }

// Canvas
const canvas = document.querySelector('canvas.webgl')

/**
 * scene
 */
const scene = new THREE.Scene()
/*
    Updata all materials
*/
const updateAllMaterials = () => {
    scene.traverse((child)=>{ //  遍历
        if(child.isMesh && child.material.isMeshStandardMaterial){
            child.material.envMapIntensity = global.envMapIntensity
        }
    })
}

/* 
    environmentMap 环境贴图
*/
scene.backgroundBlurriness = 0
scene.backgroundIntensity = 1
// global intensity 
global.envMapIntensity = 1 // 环境贴图强度
gui
    .add(global,'envMapIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    .onChange(updateAllMaterials)
gui
    .add(scene, 'backgroundBlurriness')
    .min(0)
    .max(1)
    .step(0.001)
gui
    .add(scene, 'backgroundIntensity')
    .min(0)
    .max(10)
    .step(0.001)
    

/* 
    Real time environment map
*/
const environmentMap = textureLoader.load('/environmentMaps/blockadesLabsSkybox/interior_views_cozy_wood_cabin_with_cauldron_and_p.jpg')
environmentMap.mapping = THREE.EquirectangularReflectionMapping
environmentMap.colorSpace = THREE.SRGBColorSpace

scene.background = environmentMap

/* 
    holyDount
*/
const holyDonut = new THREE.Mesh(
    new THREE.TorusGeometry(8,0.5),
    new THREE.MeshBasicMaterial({color:new THREE.Color(10, 4, 2)})
)
holyDonut.layers.enable(1) // 分层启用
holyDonut.position.y = 3.5
scene.add(holyDonut)

/* 
    cube render target
*/
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(
    256, // 分辨率
    { // 渲染目标的选项
        type:THREE.FloatType  // 类型
    }
)

scene.environment = cubeRenderTarget.texture // 使用自己的纹理

// Cube Camera
const cubeCamera = new THREE.CubeCamera(0.1,100,cubeRenderTarget) // 要每一帧渲染
cubeCamera.layers.set(1) // 设置相机分成

/**
 * torus knot
 */
const torusKnot = new THREE.Mesh(
    new THREE.TorusKnotGeometry(1, 0.4, 100, 16),
    new THREE.MeshStandardMaterial({
        roughness: 0,
        metalness: 1,
        color: 0xaaaaaa
    })
)
torusKnot.position.x = -4
torusKnot.position.y = 4
scene.add(torusKnot)

/* 
* Models
*/
gltfLoader.load(
    '/models/FlightHelmet/glTF/FlightHelmet.gltf',
    (gltf)=>{
        gltf.scene.scale.set(10,10,10)
        scene.add(gltf.scene)
        updateAllMaterials()
    }
)


/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () => {
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * camera
 */
 const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
 camera.position.set(- 8, 4, 8)
 scene.add(camera)

/**
 * renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
// renderer.shadowMap.enabled = true
// renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))


/**
 * control
 */
const controls = new OrbitControls(camera, canvas)
controls.target.y = 3.5
controls.enableDamping = true

/**
 * tick
 */
const clock = new THREE.Clock()
const tick = () => {
    // Time
    const elapsedTime = clock.getElapsedTime()

    if(holyDonut){
        holyDonut.rotation.x = Math.sin(elapsedTime) * 2
        cubeCamera.update(renderer, scene)
    }

    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()

真实时间环境地图

总结

环境地图多种加载方式，以及用法。还有关于环境地图资源如何寻找，怎么自己在blender制作环境地图等

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2085298.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CSND文章质量分批量查询

CSND文章质量分批量查询

简介 CSDN 质量分是一项公开的 CSDN 博文内容质量分析服务，其综合分析了内容的标题、段落结构、正文长度、代码格式及复杂度、链接和超文本内容比例及质量等因素，为 IT 技术文章提供客观公共的质量分析结果 用途 可用与对文章质量做评估可申请创作者 …
阅读更多...
更新RK3588开发板的rknn_server和librknnrt.so【这篇文章是RKNPU2从入门到实践 --- 【5】的配套文章】

更新RK3588开发板的rknn_server和librknnrt.so【这篇文章是RKNPU2从入门到实践 --- 【5】的配套文章】

作者使用的平台有： 一台装有Windows系统的宿主机，在该宿主机上装有Ubuntu 20.04虚拟系统； 瑞芯微RK3588开发板，开发板上的系统为Ubuntu22.04系统； 更新板子的 rknn_server 和 librknnrt.so，rknn_server 和…
阅读更多...
Facebook AI的应用前景：如何利用人工智能提升平台功能

Facebook AI的应用前景：如何利用人工智能提升平台功能

人工智能（AI）正迅速改变我们与社交网络互动的方式。作为全球领先的社交媒体平台之一，Facebook（现Meta）正通过多种AI技术提升其平台功能。本文将探讨Facebook AI的应用前景，展示如何利用这些技术优化用户体验…
阅读更多...
OHIF Viewers 项目介绍

OHIF Viewers 项目介绍

项目结构 项目架构 │ ├── extensions │ ├── default # 默认功能 │ ├── cornerstone # 使用 Cornerstonejs 处理 2D/3D 图像 │ ├── cornerstone-dicom-sr # 结构化报告 (DICOM SR) │ ├── measurement-tracking # 测量追…
阅读更多...
备战秋招60天算法挑战，Day28

备战秋招60天算法挑战，Day28

题目链接： https://leetcode.cn/problems/climbing-stairs/ 视频题解： https://www.bilibili.com/video/BV1h1421t7W3/ LeetCode 70.爬楼梯 题目描述 假设你正在爬楼梯。需要n阶你才能到达楼顶。 每次你可以爬1或2个台阶。你有多少种不同的方法可以爬到…
阅读更多...
Nacos2.4.0兼容达梦数据库

Nacos2.4.0兼容达梦数据库

这段时间公司在搞国产化，发现当前的nacos版本只支持MySQL和derby数据库，后来翻看官方文档以后，官方文档说2.2以后支持达梦数据库了，但是需要插件。 按照他的思路再结合其他资料，我们开始搞起来！ 一、下载…
阅读更多...
【SpringCloud应用框架】GateWay异步非阻塞模型

【SpringCloud应用框架】GateWay异步非阻塞模型

Spring Cloud Alibaba 之 GateWay工作流程GateWay搭建 文章目录 一、GateWay工作流程工作流程的核心点总结 二、GateWay搭建 一、GateWay工作流程 流程图如下： 核心概念： 客户端向 Spring Cloud Gateway 发出请求。如果Gateway Handler Mapping确定请…
阅读更多...
2024年世界机器人大会精彩回顾-人形机器人的天下

2024年世界机器人大会精彩回顾-人形机器人的天下

8 月 25 日， 2024 世界机器人大会在北京北人亦创国际会展中心闭幕。本次大会以“共育新质生产力 共享智能新未来”为主题，同期举办论坛、博览会、大赛及配套活动，机器人创新新品、应用新场景纷纷亮相。 2024 世界机器人大会分为论坛、博览会、…
阅读更多...
qml formLayout实现方式

qml formLayout实现方式

一、背景 我们制作界面时，通常有表单界面需要制作，如下图： 但是Qt5 是没有 formLayout 的，直到Qt6才有，所以现在 qml 使用 TableView 来实现这个样式 二、实现 enum ComponentType {TitleText,Text,Button,Image} …
阅读更多...
开放式耳机漏音有多大？解密最值得购买的五大品牌！

开放式耳机漏音有多大？解密最值得购买的五大品牌！

​现在的很多开放式耳机漏音情况已经得到很好的控制了，特别是大品牌的耳机。现在耳机市场上，开放式耳机因为外观时尚、戴着舒服，成了大家日常爱用的热门货。但是，市面上的开放式耳机品牌多得眼花缭乱，质量也是高低不一…
阅读更多...
如何使用ssm实现基于JAVA的中小型企业财务管理

如何使用ssm实现基于JAVA的中小型企业财务管理

TOC ssm364基于JAVA的中小型企业财务管理jsp 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大，随着当前时代的信息化，科学化发展，让社会各行业领域都争相使用新的信息技术，对行业内的各种相关数据进行科学化，…
阅读更多...
debian12 - openssh-9.6.P1的编译安装(真机 - 联想G480)

debian12 - openssh-9.6.P1的编译安装(真机 - 联想G480)

文章目录 debian12 - openssh-9.6.P1的编译安装(真机 - 联想G480)概述笔记G480上安装debian12配置debian12现在用WindTerm_2.6.0按照telnet方式去连接试试配置debian12中的telnet安装telnet服务查看所有服务当前ssh, telnet状态准备更新openssl3.2和openssh在真机上更新openssl…
阅读更多...
Andon安灯系统在汽车零部件工厂起到什么作用？

Andon安灯系统在汽车零部件工厂起到什么作用？

在当今竞争激烈的汽车市场中，汽车零部件工厂的高效运作和高质量生产至关重要。而 Andon 安灯系统作为一种先进的生产管理工具，在汽车零部件工厂中发挥着举足轻重的作用。 一、Andon安灯系统实时监控生产状态 汽车零部件工厂的生产线通常较为复杂&#x…
阅读更多...
Quartz定时任务框架——若依

Quartz定时任务框架——若依

文章目录 定时任务的执行新增定时任务订单任务状态修改quartz的集群模式 定时任务的执行 新增定时任务 订单任务状态修改 quartz的集群模式 把若依项目中的quartz数据库导入到数据库中然后打开ScheduleConfig配置类复制项目启动（记得修改端口）&#xff0…
阅读更多...
给自己复盘用的tjxt笔记day11第二部分

给自己复盘用的tjxt笔记day11第二部分

异步领券 优化方案分析 对于高并发问题，优化的思路有异步写和合并写。 其中，合并写请求比较适合应用在写频率较高，写数据比较简单的场景。而异步写则更适合应用在业务比较复杂，业务链较长的场景。 显然，领券业务更…
阅读更多...
【功能自动化】使用测试套件运行测试函数

【功能自动化】使用测试套件运行测试函数

1.创建registers.py 将registers.py放在文件夹下 registers.py 代码实现 # 导入包 from selenium import webdriver from selenium.webdriver.support.select import Select from time import sleep import unittest import parameterizeddriver None file open(r"us…
阅读更多...
ImportError：DLL load failed while importing cv2：找不到指定的模块

ImportError：DLL load failed while importing cv2：找不到指定的模块

用pyinsatller打包好脚本执行后，出现上面的错误，这个错误很明显就是缺少了必需的dll文件，这个网上的资料也比较少，我搜了很久也没找出能解决的方法。 方法1 看官网：https://pypi.org/project/opencv-python/ 拉倒下…
阅读更多...
MDS100-16-16-ASEMI三相整流模块MDS100-16

MDS100-16-16-ASEMI三相整流模块MDS100-16

编辑：ll MDS100-16-16-ASEMI三相整流模块MDS100-16 型号：MDS100-16 品牌：ASEMI 封装：M18 批号：2024 类型：整流模块 电流：100A 电压：1600V 安装方式：直插式封装 …
阅读更多...
IDEA没有SQL语句提示

IDEA没有SQL语句提示

解决已经在IDEA连接数据库，但是写SQL语句不会提示列名、属性之类的 Mapper 映射没有 SQL 提示 设置中搜索，把方言改成 MySQL SQL Dialects
阅读更多...
Requestium - 将Requests和Selenium合并在一起的自动化测试工具

Requestium - 将Requests和Selenium合并在一起的自动化测试工具

Requests 是 Python 的第三方库，主要用于发送 http 请求，常用于接口自动化测试等。 Selenium 是一个用于 Web 应用程序的自动化测试工具。Selenium 测试直接运行在浏览器中，就像真正的用户在操作一样。 本篇介绍一款将 Requests 和 Seleniu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023