threejs使用JSON格式保存和加載整個場景分析

更新時間：2024年11月09日 10:02:42 作者：gis分享者

本文介紹了如何使用Three.js將三維場景保存為JSON格式,并加載整個場景,通過調用各個對象的.toJSON()方法,可以保存和加載立方體、球體、obj、glb等三維模型的頂點和材質數(shù)據(jù),文章詳細講解了實現(xiàn)思路和代碼樣例,一起看看吧

一、??前言

本文詳細介紹如何基于threejs在三維場景中使用JSON格式保存和加載整個場景，親測可用。希望能幫助到您。一起學習，加油！加油！

1.1 ??THREE toJSON()方法

通過調用Three.js各個對象的.toJSON()方法可以保存這些對象為json格式，比如你通過Threejs開發(fā)一個三維模型編輯系統(tǒng)，想保存Threejs中創(chuàng)建的立方體、球體、obj、glb等三維模型的頂點、材質等數(shù)據(jù)，就可以通過.toJSON()方法實現(xiàn)。

二、??使用JSON格式保存和加載整個場景

1. ??實現(xiàn)思路

1、初始化renderer渲染器
2、初始化Scene三維場景
3、初始化camera相機，定義相機位置 camera.position.set，定義相機方向lookAt。
4、初始化THREE.AmbientLight環(huán)境光源，scene場景加入環(huán)境光源，初始化THREE.PointLight點光源，設置點光源位置，設置點光源投影，scene添加點光源。
5、加載幾何模型：創(chuàng)建THREE.AxesHelper坐標輔助工具、THREE.SphereGeometry球體幾何體、THREE.BoxGeometry立方體幾何體、THREE.PlaneGeometry平面幾何體以及THREE.Object3D對象group，group添加球體幾何體和立方體幾何體為組。scene場景加入THREE.AxesHelper坐標輔助工具、group組以及平面幾何體對象（實現(xiàn)細節(jié)具體看代碼樣例，有不懂的地方評論區(qū)探討）。
6、加入gui控制，定義保存場景方法exportScene、清理場景方法clearScene、導入場景方法importScene，實現(xiàn)細節(jié)具體看代碼樣例。加入controls，加入stats監(jiān)控器，監(jiān)控幀數(shù)信息。

2. ??代碼樣例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn41(使用JSON格式保存和加載整個場景)</title>
    <script src="lib/threejs/127/three.js-master/build/three.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/utils/SceneUtils.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>
    html, body {
        margin: 0;
        height: 100%;
    }
    canvas {
        display: block;
    }
</style>
<body onload="draw()">
</body>
<script>
  var renderer
  var initRender = () => {
    renderer = new THREE.WebGLRenderer({antialias: true})
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.shadowMap.enabled = true
    renderer.shadowMap.type = THREE.PCFSoftShadowMap
    document.body.appendChild(renderer.domElement)
  }
  var scene
  var initScene = () => {
    scene = new THREE.Scene()
  }
  var camera
  var initCamera = () => {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(0, 40, 50)
    camera.lookAt(new THREE.Vector3(0, 0, 0))
  }
  var light
  var initLight = () => {
    scene.add(new THREE.AmbientLight(0x444444))
    light = new THREE.PointLight(0xffffff)
    light.position.set(15, 50, 10)
    light.castShadow = true
    scene.add(light)
  }
  var sphere, cube, group
  var initModel = () => {
    group = new THREE.Object3D()
    scene.add(group)
    var shereGeometry = new THREE.SphereGeometry(5, 200, 200)
    var sphereMaterial = new THREE.MeshLambertMaterial({color:0xaaaaaa})
    sphere = new THREE.Mesh(shereGeometry, sphereMaterial)
    sphere.position.set(-5, 5, 0)
    sphere.castShadow = true
    group.add(sphere)
    var helper = new THREE.AxesHelper(50)
    scene.add(helper)
    var cubeGeometry = new THREE.BoxGeometry(10, 10, 8)
    var cubeMaterial = new THREE.MeshLambertMaterial({color:0x00ffff})
    cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
    cube.position.set(15, 5, -5)
    cube.castShadow = true
    group.add(cube)
    var planeGeometry = new THREE.PlaneGeometry(100, 100)
    var planeMaterial = new THREE.MeshStandardMaterial({color:0xaaaaaa})
    plane = new THREE.Mesh(planeGeometry, planeMaterial)
    plane.rotation.x = -0.5 * Math.PI
    plane.receiveShadow = true
    scene.add(plane)
  }
  var gui
  var initGui = () => {
    gui = {
      exportScene: () => {
        var sceneJson = JSON.stringify(scene.toJSON())
        localStorage.setItem('scene', sceneJson)
      },
      clearScene: () => {
        scene = new THREE.Scene()
      },
      importScene: () => {
        var json = localStorage.getItem('scene')
        if (json) {
          var loadedGeometry = JSON.parse(json)
          var loader = new THREE.ObjectLoader()
          scene = loader.parse(loadedGeometry)
        }
      }
    }
    var datGui = new dat.GUI()
    //將設置屬性添加到gui當中，gui.add(對象，屬性，最小值，最大值）
    datGui.add(gui, "exportScene")
    datGui.add(gui, "clearScene")
    datGui.add(gui, "importScene")
  }
  var stats
  var initStats = () => {
    stats = new Stats()
    document.body.appendChild(stats.dom)
  }
  var controls
  var initControls = () => {
    controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
  }
  var render = () => {
    renderer.render(scene, camera)
  }
  var onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    render()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  var animate = () => {
    render()
    stats.update()
    controls.update()
    requestAnimationFrame(animate)
  }
  var draw = () => {
    initRender()
    initScene()
    initCamera()
    initLight()
    initModel()
    initGui()
    initStats()
    initControls()
    animate()
    window.onresize = onWindowResize
  }
</script>
</html>

效果如下：