From 72b715e2eadafedad6408e6e1dcf0e1e7d3397af Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 19 四月 2024 10:19:09 +0800
Subject: [PATCH] #
---
public/models/tree/textures/twig_baseColor.png | 0
public/models/tree/textures/twig_normal.png | 0
src/components/tree.jsx | 33 ++++
src/components/tree-group.jsx | 34 ++++
public/models/tree/license.txt | 11 +
public/models/tree/scene.gltf | 305 ++++++++++++++++++++++++++++++++++++++
public/models/tree/scene.bin | 0
src/components/buidings.jsx | 36 ++++
src/pages/base.jsx | 4
public/models/tree/textures/Material.003_normal.png | 0
public/models/tree/textures/Material.003_baseColor.png | 0
public/models/tree/textures/Material.003_metallicRoughness.png | 0
12 files changed, 423 insertions(+), 0 deletions(-)
diff --git a/public/models/tree/license.txt b/public/models/tree/license.txt
new file mode 100644
index 0000000..385ca83
--- /dev/null
+++ b/public/models/tree/license.txt
@@ -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/)
\ No newline at end of file
diff --git a/public/models/tree/scene.bin b/public/models/tree/scene.bin
new file mode 100644
index 0000000..0ce0e2a
--- /dev/null
+++ b/public/models/tree/scene.bin
Binary files differ
diff --git a/public/models/tree/scene.gltf b/public/models/tree/scene.gltf
new file mode 100644
index 0000000..8fa2d8e
--- /dev/null
+++ b/public/models/tree/scene.gltf
@@ -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
+ }
+ ]
+}
diff --git a/public/models/tree/textures/Material.003_baseColor.png b/public/models/tree/textures/Material.003_baseColor.png
new file mode 100644
index 0000000..04407fc
--- /dev/null
+++ b/public/models/tree/textures/Material.003_baseColor.png
Binary files differ
diff --git a/public/models/tree/textures/Material.003_metallicRoughness.png b/public/models/tree/textures/Material.003_metallicRoughness.png
new file mode 100644
index 0000000..1c7e17f
--- /dev/null
+++ b/public/models/tree/textures/Material.003_metallicRoughness.png
Binary files differ
diff --git a/public/models/tree/textures/Material.003_normal.png b/public/models/tree/textures/Material.003_normal.png
new file mode 100644
index 0000000..2a04c62
--- /dev/null
+++ b/public/models/tree/textures/Material.003_normal.png
Binary files differ
diff --git a/public/models/tree/textures/twig_baseColor.png b/public/models/tree/textures/twig_baseColor.png
new file mode 100644
index 0000000..cee74ce
--- /dev/null
+++ b/public/models/tree/textures/twig_baseColor.png
Binary files differ
diff --git a/public/models/tree/textures/twig_normal.png b/public/models/tree/textures/twig_normal.png
new file mode 100644
index 0000000..b4398da
--- /dev/null
+++ b/public/models/tree/textures/twig_normal.png
Binary files differ
diff --git a/src/components/buidings.jsx b/src/components/buidings.jsx
new file mode 100644
index 0000000..87544dd
--- /dev/null
+++ b/src/components/buidings.jsx
@@ -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;
diff --git a/src/components/tree-group.jsx b/src/components/tree-group.jsx
new file mode 100644
index 0000000..058a342
--- /dev/null
+++ b/src/components/tree-group.jsx
@@ -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;
diff --git a/src/components/tree.jsx b/src/components/tree.jsx
new file mode 100644
index 0000000..f675592
--- /dev/null
+++ b/src/components/tree.jsx
@@ -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;
diff --git a/src/pages/base.jsx b/src/pages/base.jsx
index e59411c..c36017f 100644
--- a/src/pages/base.jsx
+++ b/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" />
--
Gitblit v1.9.1