{"id":449,"date":"2022-08-26T17:48:58","date_gmt":"2022-08-26T09:48:58","guid":{"rendered":"http:\/\/gjweb.top\/?p=449"},"modified":"2022-08-26T17:52:02","modified_gmt":"2022-08-26T09:52:02","slug":"03-rgb%e6%9d%90%e8%b4%a8%e7%ba%b9%e7%90%86","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=449","title":{"rendered":"03.RGB\u6750\u8d28\u7eb9\u7406"},"content":{"rendered":"\n

1. \u57fa\u672c\u4f7f\u7528<\/h2>\n\n\n\n

\u4f7f\u7528 MeshStandardMaterial \u5b9e\u4f8b\u6e32\u67d3 RGB \u6750\u8d28<\/p>\n\n\n\n

\/\/ \u6dfb\u52a0\u73af\u5883\u5149
const light = new THREE.AmbientLight(\"#ffffff\")
scene.add(light)
\/\/ \u76f4\u7ebf\u5149
const directionalLinght = new THREE.DirectionalLight(\"#ffffff\",0.5)
directionalLinght.position.set(10,10,10)
scene.add(directionalLinght)
\/\/ \u7f6e\u6362\u8d34\u56fe
const doorHeightTexture = textureLoader.load(\"\/gltf\/Default_metalRoughness.jpg\")
      
\/\/\u7c97\u7cd9\u7a0b\u5ea6
const roughnessTexture = textureLoader.load(\"\/gltf\/Default_metalRoughness.jpg\")
\u200b
\/\/ \u91d1\u5c5e\u8d34\u56fe
const metalnessTexture = textureLoader.load(\"\/gltf\/Default_albedo.jpg\")
\u200b
\/\/ \u6cd5\u7ebf\u8d34\u56fe
const bumpMap = textureLoader.load(\"\/gltf\/Default_albedo.jpg\")
\/\/ \u521b\u5efa\u51e0\u4f55\u4f53
const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1,1)
\/\/ \u521b\u5efaRBG\u6750\u8d28
const standardMaterial = new THREE.MeshStandardMaterial({
        color:\"#ffff00\",
        map:doorColorTexture,
        displacementMap:doorHeightTexture, \/\/ \u8fd9\u662f\u7f6e\u6362\u56fe\u7247
        displacementScale:0.1, \/\/ \u8bbe\u7f6e\u7a81\u51fa\u7684\u7a0b\u5ea6
        roughness:0, \/\/ \u5149\u6ed1\u7a0b\u5ea6
        roughnessMap:roughnessTexture, \/\/ \u7c97\u7cd9\u7a0b\u5ea6
        metalness:0.5, \/\/ \u91d1\u5c5e\u76f8\u4f3c\u7a0b\u5ea6
        metalnessMap:metalnessTexture, \/\/ \u91d1\u5c5e\u8d34\u56fe
        bumpMap:bumpMap, \/\/ \u6cd5\u7ebf\u8d34\u56fe
\u200b
})
cube = new THREE.Mesh(cubeGeometry,standardMaterial);
scene.add(cube)<\/code><\/pre>\n\n\n\n
\n\n\n\n
2. \u7eb9\u7406\u52a0\u8f7d\u7ba1\u7406\u5668<\/h2>\n\n\n\n
      \/\/ \u8bbe\u7f6e\u7eb9\u7406\u52a0\u8f7d\u7ba1\u7406\u5668
      const loadingManager = new THREE.LoadingManager(
        ()=>{
          console.log(\"\u52a0\u8f7d\u5b8c\u6210\")
        },
        (url,num,total)=>{
          console.log(`\u5f53\u524d\u6b63\u5728\u52a0\u8f7d: ${url}; \u5f53\u524d\u52a0\u8f7d\u7b2c\u51e0\u4e2a: ${num} ; \u52a0\u8f7d\u7684\u603b\u6570: ${total}`)
          console.log(\"\u52a0\u8f7d\u603b\u8fdb\u5ea6:\",((num\/total)*100).toFixed(2)+\"%\")
        },
        ()=>{
          console.log(\"\u52a0\u8f7d\u62a5\u9519\")
        }
      )
      \/\/ \u5bfc\u5165\u7eb9\u7406
      const textureLoader = new THREE.TextureLoader(loadingManager);
      const doorColorTexture = textureLoader.load(\"\/gltf\/Default_albedo.jpg\")<\/code><\/pre>\n\n\n\n
\n\n\n\n
3. \u73af\u5883\u8d34\u56fe<\/h2>\n\n\n\n
\/\/ \u5bfc\u5165\u73af\u5883\u8d34\u56fe
const cubeTextureLoader = new THREE.CubeTextureLoader();  
const envMapTexture = cubeTextureLoader.load([
    \"\/vr\/px.jpg\",
    \"\/vr\/nx.jpg\",
    \"\/vr\/py.jpg\",
    \"\/vr\/ny.jpg\",
    \"\/vr\/pz.jpg\",
    \"\/vr\/nz.jpg\"
])
\/\/ \u521b\u5efa\u7403\u4f53
const geometry   = new THREE.SphereGeometry(1,20,20);
\/\/ \u8bbe\u7f6e\u6750\u8d28
const material = new THREE.MeshStandardMaterial({
   metalness:0.7,
   roughness:0.1,
   \/\/ envMap:envMapTexture
})
\/\/ \u8bbe\u7f6e\u573a\u666f\u7684\u80cc\u666f
scene.background = envMapTexture;
\/\/ \u7ed9\u6240\u6709\u7684\u7269\u4f53\u6dfb\u52a0\u9ed8\u8ba4\u7684\u73af\u5883\u8d34\u56fe
scene.environment = envMapTexture;
cube = new THREE.Mesh(geometry,material);
scene.add(cube)<\/code><\/pre>\n\n\n\n
\n\n\n\n
3. \u5bfc\u5165HBR\u8d34\u56fe<\/h2>\n\n\n\n
import {RGBELoader} from \"three\/examples\/jsm\/loaders\/RGBELoader\"
const rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync(\"\/equirectangular\/blouberg_sunrise_2_1k.hdr\").then((texture)=>{
    texture.mapping = THREE.EquirectangularReflectionMapping; \/\/ hdr\u8bbe\u7f6e\u80cc\u666f\u56fe\u4e3aVR\u5168\u666f\u6548\u679c
    scene.background = texture; \/\/ \u8bbe\u7f6e\u80cc\u666f\u989c\u8272
    scene.environment = texture; \/\/ \u8bbe\u7f6e\u5176\u4ed6\u7269\u4f53\u53cd\u5149\u4e3a\u73af\u5883\u6750\u8d28
})<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
1. \u57fa\u672c\u4f7f\u7528 \u4f7f\u7528 MeshStandardMaterial \u5b9e\u4f8b\u6e32\u67d3 RGB \u6750\u8d28 2. \u7eb9\u7406\u52a0\u8f7d\u7ba1\u7406\u5668  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53],"tags":[],"class_list":["post-449","post","type-post","status-publish","format-standard","hentry","category-three"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=449"}],"version-history":[{"count":2,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/449\/revisions"}],"predecessor-version":[{"id":453,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/449\/revisions\/453"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}