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

最新推荐文章于 2024-08-29 16:08:22 发布
最新推荐文章于 2024-08-29 16:08:22 发布
阅读量368 收藏 14
点赞数 12
分类专栏： three.js基础学习 文章标签： 学习 three.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41722662/article/details/141669584
版权

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

前言

课程回顾：

    模型的加载

    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制作环境地图等

蚕食我的耐心
关注
  • 12
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three 之 three.js （webgl）基础 第一个入门 Web 3D 场景
仙魁XAN
04-28 2337
Three 之 three.js （webgl）基础 第一个入门 Web 3D 场景 目录 Three 之 three.js （webgl）基础 第一个入门 Web 3D 场景 一、简单介绍 二、Three 中构建场景主要的三要素 三、场景（Scene） 四、摄像机（Camera） 五、WebGLRenderer 六、第一个入门 Web 3D 场景 一、简单介绍 Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍， three.js （w
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图)
仙魁XAN
04-25 9964
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质有效果图) 目录 Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图) 一、简单介绍 二、各种材质说明 1、MeshBasicMaterial 基础网格材质 2、MeshDepthMaterial 深度网格材质 3、MeshDistanceMaterial 距离网格材质 4、MeshLambertMaterial Lambert网格材质 5、MeshMatcapMat
前端开发three.js入门超详细学习，一起来学习3D吧
前端开发工程师
11-20 4904
Three.js 是一个用于在 Web 浏览器中创建和渲染 3D 图形的 JavaScript 库。它提供了一系列强大的功能和工具，使开发者能够轻松地在网页中创建交互式的 3D 场景和动画。
Three.js学习8：基础贴图
九天翔龙的技术博客
02-08 2294
贴图，就是把图片贴在 3D 物体材质的表面，让它具有一定的纹理，来为 3D 物体添加细节的一种方法。这使我们能够添加表面细节，而无需将这些细节建模到我们的3D对象中，从而大大精简3D模型的多边形边数，提高模型渲染性能。
ThreeJS – 如何提升three.js的渲染效果
奇点的博客
09-02 3041
对象的参数设置非常影响渲染效果要想获得比较好的渲染效果，对可进行以下参数设置。上述设置中，将antialias设置为true表示开启抗锯齿。表示将启用正确的物理灯光。表示使用2倍设备像素点采样，这有利于消除锯齿获得更加高质量的效果。设置这个属性主要是为了在普通计算机显示器或者移动设备屏幕等低动态范围介质上，模拟、逼近高动态范围（HDR）效果。这个属性如果要生效就是需要将hdr贴图作为场景的环境贴图，获取IBL的光照效果。使用hdr贴图作为场景的环境贴图也将大幅度提升场景或者模型的渲染效果。其中。
three.js学习笔记(三)——material材质
hongsir的博客
11-29 5874
什么是材质Material 材质用于在几何体的每个可见像素上添加颜色 创建材质 初始化基础网格材质MeshBasicMaterial const material = new THREE.MeshBasicMaterial() 接下来我们往场景中添加三个网格物体 //球形缓冲几何体 const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(0.5,16,16),material) //平面缓冲几何体 const plane = new THR
使用three.js制作的折射球.zip
01-06
Three.js是一个流行的JavaScript库，它为Web浏览器提供了强大的3D图形渲染能力。通过这个项目，我们可以深入理解three.js的基本用法以及如何实现复杂的视觉效果。 首先，three.js的核心是场景（Scene）、相机...
使用three.js制作的海洋特效.zip
01-06
three.js是一个基于WebGL的JavaScript 3D库，它使得在浏览器中创建复杂的3D场景变得简单。海洋特效通常涉及到水波纹的模拟、光照反射与折射以及深度感的呈现，对于增强虚拟环境的真实感至关重要。 首先，我们需要...
元宇宙基础-Three.js | 大帅老猿threejs特训营
qq_37787249的博客
12-17 560
本文是前端大牛 大帅老猿three.js的3天特训营作用，通过3天学习，入门元宇宙，包括three,blender基本案例，持续更新
前端开发学习Docker记录02容器操作
第⑦个前端
08-29 137
使用docker ps 可以看到有哪些镜像在运行。
MySQL基础学习
eugene03的博客
08-29 927
事务是一组操作的集合，它是一个不可分割的工作单位，事务会把所有操作作为一个整体一起向系统提交或者撤掉操作请求，那么这些操作要么同时成功，要么同时失败。笛卡尔积：两个集合 A集合和B集合的所有组合情况（在多表查询时，需要消除无效的笛卡尔积）对于union 查询，就是把多次查询的结果合并起来，行程一个新的查询结果集。相当于查询表1（左表）的所有数据包含表1和表2交集部分的数据。相当于查询表2（右表）的所有数据包含表1和表2交集部分的数据。自连接查询，可以是内连接查询，也可以是外连接查询。
【AI学习】在魔塔社区玩Ollama：部署GLM4和CodeGeeX4
bylander的博客
08-27 702
尝试了一下CodeGeeX4-ALL-9B 的Ollama部署。GPU要明显快很多，CPU的速度，也还凑合吧
ArkTS基础快速入门学习
最新发布
weixin_49898946的博客
08-29 280
ArkTS语言在TS语言基础上扩展了声明式UI，组件化，状态管理等功能。官方推荐两种开发模式开发鸿蒙，一种是基于js扩展的类web范式，另一种是基于TS扩展的声明式UI范式（也就是使用ArkTS开发）。主要介绍harmonyos的页面布局和组件的基础使用
html+css+js网页设计 个人博客模版 我的学习经历7个页面
qq_42431718的博客
08-28 349
html+css+js网页设计 个人博客模版 我的学习经历7个页面 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
Golang学习笔记-Golang中的锁
qq_24428851的博客
08-25 1456
Go标准库的中的sync.Cond是一个条件变量，它可以让一系列的goroutine都在满足特定条件下时候被唤醒，每一个 sync.Cond 结构体在初始化时都需要传入一个互斥锁，我们可以通过下面的例子了解它的使用方法。因为请求的哈希在业务上一般表示相同的请求，所以上述代码使用它作为请求的键。这个是Go语言的扩展包中提供的另外一个信号量，它能够在一个服务中抑制对下游的多次重复请求，比如在redis的缓存雪崩中，能够限制对同一个 Key 的多次重复请求，减少对下游的瞬时流量。上述两个加起来，只占用8个字节。
快速学习“堆“排序（C语言数据结构）
m0_75235246的博客
08-26 732
堆的实现其实并不难，难的是要用堆实现排序，也就是堆的运用。下面需要探究一下堆的排序是怎样的。如何利用堆进行升序或者降序的排序。
先从路径优化开始学习FastPlanner之B样条曲线平滑路径（一）：从拉格朗日插值到B样条曲线
qq_51013517的博客
08-25 1094
B样条学习整理，易错点和关键点。我会列出学习他人的博客，但我不涉及具体推导，原理讲解，旨在于理解必须概念后写代码出效果和使用。
Python 爬虫爬取豆瓣电影列表信息，爬虫的原理，应用领域介绍学习
m0_50641264的博客
08-26 1872
Python 爬虫爬取豆瓣电影列表信息，爬虫的原理，应用领域介绍学习
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值