#

luxiaotao1123

2024-04-19 72b715e2eadafedad6408e6e1dcf0e1e7d3397af

#

 public/models/tree/license.txt

New file
@@ -0,0 +1,11 @@
Model Information:
* title:    Tree For Games
* source:    https://sketchfab.com/3d-models/tree-for-games-f91d3c3c527d47fdb217c291e4c7df4b
* author:    Daniel Gryningstjerna (https://sketchfab.com/dangry)

Model License:
* license type:    CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
* requirements:    Author must be credited. Commercial use is allowed.

If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
This work is based on "Tree For Games" (https://sketchfab.com/3d-models/tree-for-games-f91d3c3c527d47fdb217c291e4c7df4b) by Daniel Gryningstjerna (https://sketchfab.com/dangry) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)

 public/models/tree/scene.bin

Binary files differ

 public/models/tree/scene.gltf

New file
@@ -0,0 +1,305 @@
{
  "accessors": [
    {
      "bufferView": 2,
      "componentType": 5126,
      "count": 24000,
      "max": [5.400895595550537, 7.487784385681152, 18.686132431030273],
      "min": [-9.135818481445313, -5.771036148071289, 2.366610050201416],
      "type": "VEC3"
    },
    {
      "bufferView": 2,
      "byteOffset": 288000,
      "componentType": 5126,
      "count": 24000,
      "max": [0.9998490214347839, 0.9998508095741272, 0.9999715685844421],
      "min": [-0.9998549222946167, -0.999925434589386, -0.7359607815742493],
      "type": "VEC3"
    },
    {
      "bufferView": 3,
      "componentType": 5126,
      "count": 24000,
      "max": [0.999908447265625, 0.9999664425849915, 0.9999536871910095, 1.0],
      "min": [-0.9999274611473083, -0.9999757409095764, -0.9997327923774719, 1.0],
      "type": "VEC4"
    },
    {
      "bufferView": 1,
      "componentType": 5126,
      "count": 24000,
      "max": [1.0, 1.0],
      "min": [0.08360499888658524, 0.0],
      "type": "VEC2"
    },
    {
      "bufferView": 0,
      "componentType": 5125,
      "count": 66000,
      "type": "SCALAR"
    },
    {
      "bufferView": 2,
      "byteOffset": 576000,
      "componentType": 5126,
      "count": 8183,
      "max": [3.571387767791748, 6.172538757324219, 17.16339683532715],
      "min": [-7.341711521148682, -4.2624993324279785, -0.06279468536376953],
      "type": "VEC3"
    },
    {
      "bufferView": 2,
      "byteOffset": 674196,
      "componentType": 5126,
      "count": 8183,
      "max": [0.9991750717163086, 0.9992162585258484, 0.9997866153717041],
      "min": [-0.9998805522918701, -0.9994327425956726, -0.9999834299087524],
      "type": "VEC3"
    },
    {
      "bufferView": 3,
      "byteOffset": 384000,
      "componentType": 5126,
      "count": 8183,
      "max": [0.9995247721672058, 0.9998559355735779, 0.9999619126319885, 1.0],
      "min": [-0.9989302754402161, -0.9997038841247559, -0.9998242259025574, -1.0],
      "type": "VEC4"
    },
    {
      "bufferView": 1,
      "byteOffset": 192000,
      "componentType": 5126,
      "count": 8183,
      "max": [1.0, 210.26849365234375],
      "min": [0.0, 0.0],
      "type": "VEC2"
    },
    {
      "bufferView": 1,
      "byteOffset": 257464,
      "componentType": 5126,
      "count": 8183,
      "max": [1.0, 210.26849365234375],
      "min": [0.0, 0.0],
      "type": "VEC2"
    },
    {
      "bufferView": 0,
      "byteOffset": 264000,
      "componentType": 5125,
      "count": 33486,
      "type": "SCALAR"
    }
  ],
  "asset": {
    "extras": {
      "author": "Daniel Gryningstjerna (https://sketchfab.com/dangry)",
      "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
      "source": "https://sketchfab.com/3d-models/tree-for-games-f91d3c3c527d47fdb217c291e4c7df4b",
      "title": "Tree For Games"
    },
    "generator": "Sketchfab-12.65.0",
    "version": "2.0"
  },
  "bufferViews": [
    {
      "buffer": 0,
      "byteLength": 397944,
      "name": "floatBufferViews",
      "target": 34963
    },
    {
      "buffer": 0,
      "byteLength": 322928,
      "byteOffset": 397944,
      "byteStride": 8,
      "name": "floatBufferViews",
      "target": 34962
    },
    {
      "buffer": 0,
      "byteLength": 772392,
      "byteOffset": 720872,
      "byteStride": 12,
      "name": "floatBufferViews",
      "target": 34962
    },
    {
      "buffer": 0,
      "byteLength": 514928,
      "byteOffset": 1493264,
      "byteStride": 16,
      "name": "floatBufferViews",
      "target": 34962
    }
  ],
  "buffers": [
    {
      "byteLength": 2008192,
      "uri": "scene.bin"
    }
  ],
  "images": [
    {
      "uri": "textures/Material.003_baseColor.png"
    },
    {
      "uri": "textures/Material.003_metallicRoughness.png"
    },
    {
      "uri": "textures/Material.003_normal.png"
    },
    {
      "uri": "textures/twig_baseColor.png"
    },
    {
      "uri": "textures/twig_normal.png"
    }
  ],
  "materials": [
    {
      "alphaCutoff": 0.513910061,
      "alphaMode": "MASK",
      "doubleSided": true,
      "name": "Material.003",
      "normalTexture": {
        "index": 2
      },
      "occlusionTexture": {
        "index": 1
      },
      "pbrMetallicRoughness": {
        "baseColorTexture": {
          "index": 0
        },
        "metallicFactor": 0.0,
        "metallicRoughnessTexture": {
          "index": 1
        }
      }
    },
    {
      "doubleSided": true,
      "name": "twig",
      "normalTexture": {
        "index": 4
      },
      "pbrMetallicRoughness": {
        "baseColorTexture": {
          "index": 3
        },
        "metallicFactor": 0.0,
        "roughnessFactor": 0.8614710366
      }
    }
  ],
  "meshes": [
    {
      "name": "Plane.197_Material.003_0",
      "primitives": [
        {
          "attributes": {
            "NORMAL": 1,
            "POSITION": 0,
            "TANGENT": 2,
            "TEXCOORD_0": 3
          },
          "indices": 4,
          "material": 0,
          "mode": 4
        }
      ]
    },
    {
      "name": "Plane.197_twig_0",
      "primitives": [
        {
          "attributes": {
            "NORMAL": 6,
            "POSITION": 5,
            "TANGENT": 7,
            "TEXCOORD_0": 8,
            "TEXCOORD_1": 9
          },
          "indices": 10,
          "material": 1,
          "mode": 4
        }
      ]
    }
  ],
  "nodes": [
    {
      "children": [1],
      "matrix": [
        1.0, 0.0, 0.0, 0.0, 0.0, 2.220446049250313e-16, -1.0, 0.0, 0.0, 1.0, 2.220446049250313e-16,
        0.0, 0.0, 0.0, 0.0, 1.0
      ],
      "name": "Sketchfab_model"
    },
    {
      "children": [2],
      "matrix": [1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, -1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0],
      "name": "306efb0fa3a749b9949c2d453c8b1996.fbx"
    },
    {
      "children": [3],
      "name": "RootNode"
    },
    {
      "children": [4, 5],
      "matrix": [
        107.69481487779977, -13.92748808083238, 24.568147443357724, 0.0, 26.623339536963893,
        17.75615160642657, -106.63795628231195, 0.0, 9.421586570876043, 109.02516209968464,
        20.50584502596355, 0.0, 0.0, 0.0, 5.9604644775390625e-6, 1.0
      ],
      "name": "Plane.197"
    },
    {
      "mesh": 0,
      "name": "Plane.197_Material.003_0"
    },
    {
      "mesh": 1,
      "name": "Plane.197_twig_0"
    }
  ],
  "samplers": [
    {
      "magFilter": 9729,
      "minFilter": 9987,
      "wrapS": 10497,
      "wrapT": 10497
    }
  ],
  "scene": 0,
  "scenes": [
    {
      "name": "Sketchfab_Scene",
      "nodes": [0]
    }
  ],
  "textures": [
    {
      "sampler": 0,
      "source": 0
    },
    {
      "sampler": 0,
      "source": 1
    },
    {
      "sampler": 0,
      "source": 2
    },
    {
      "sampler": 0,
      "source": 3
    },
    {
      "sampler": 0,
      "source": 4
    }
  ]
}

 public/models/tree/textures/Material.003_baseColor.png

 public/models/tree/textures/Material.003_metallicRoughness.png

 public/models/tree/textures/Material.003_normal.png

 public/models/tree/textures/twig_baseColor.png

 public/models/tree/textures/twig_normal.png

 src/components/buidings.jsx

New file
@@ -0,0 +1,36 @@
// 新建楼群
import React from 'react';
import { useThree } from '@react-three/fiber';
import * as THREE from 'three';

const Buildings = () => {
  const { scene } = useThree();
  const group = new THREE.Group();
  const geometry = new THREE.BoxGeometry(10, 10, 10);
  const material = new THREE.MeshStandardMaterial({ color: 0xeeeeee, flatShading: true });
  for (let i = 0; i < 300; i++) {
    const mesh = new THREE.Mesh(geometry, material);
    // 设置mesh透明度
    // mesh.material.opacity = 0.5;
    const randomValue = Math.random() < 0.5 ? -1 : 1;
    const randomValue1 = Math.random() < 0.5 ? -1 : 1;
    // mesh接收投影
    mesh.receiveShadow = true;
    mesh.position.x = Math.random() * 8000 * randomValue1 + randomValue1 * 2000;
    mesh.position.y = 0;
    mesh.position.z = Math.random() * 8000 * randomValue + randomValue * 2000;
    mesh.scale.x = 10;
    mesh.scale.y = Math.random() * 80 + 10;
    mesh.scale.z = 10;
    // 设置放大基点位置
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    group.add(mesh);
  }
  // group.add(cube);
  scene.add(group);
  // 雾添加模糊效果
  scene.fog = new THREE.FogExp2(0x000000, 0.000085);
  return <group>{/* <fog attach="fog" args={['#ff0000', 100, 10000]} /> */}</group>;
};
export default Buildings;

 src/components/tree-group.jsx

New file
@@ -0,0 +1,34 @@
import React from "react";
import * as THREE from "three";
import TreeModel from "./tree";

const trees = [
    {
        position: new THREE.Vector3(1600, 0, 0),
        scale: new THREE.Vector3(0.06, 0.06, 0.06)
    },
    {
        position: new THREE.Vector3(0, 0, 1500),
        scale: new THREE.Vector3(0.1, 0.1, 0.1)
    },
    {
        position: new THREE.Vector3(100, 0, 1500),
        scale: new THREE.Vector3(0.1, 0.1, 0.1)
    },
    {
        position: new THREE.Vector3(310, 0, 1500),
        scale: new THREE.Vector3(0.13, 0.13, 0.13)
    }
];

function TreeGroup() {
    return (
        <group>
            {trees.map((tree, index) => (
                <TreeModel key={index} position={tree.position} scale={tree.scale} />
            ))}
        </group>
    );
}

export default TreeGroup;

 src/components/tree.jsx

New file
@@ -0,0 +1,33 @@
import React, { useEffect, useRef } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { useLoader } from '@react-three/fiber';

const TreeModel = ({ position, scale }) => {
  const gltfRef = useRef(null);
  const gltf = useLoader(
    GLTFLoader,
    '/models/tree/scene.gltf'
  );

  const setShadow = (obj) => {
    if (obj.children) {
      obj.children.forEach((child) => {
        child.castShadow = true;
        child.receiveShadow = true;
        setShadow(child);
      });
    }
  };
  if (gltf.scene) {
    setShadow(gltf.scene);
    gltfRef.current = gltf.scene.clone();
  }

  return (
    <>
      <primitive position={position} object={gltfRef.current} castShadow scale={scale} />
    </>
  );
};

export default TreeModel;

 src/pages/base.jsx

@@ -5,6 +5,8 @@
import Help from '@/components/help'
import Lights from '@/components/light'
import Camera from '@/components/camera'
import Buildings from '@/components/buidings'
import TreeGroup from '../components/tree-group'

const Base = (props) => {
    return (
@@ -18,6 +20,8 @@
                <Lights />
                <Camera />
                <Sky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} />
                <Buildings />
                <TreeGroup />
                <Box position={[0, 0, 0]} />
                <OrbitControls />
                <Environment background preset="warehouse" />