快捷導(dǎo)航

threejs使用JSON格式保存和加載整個(gè)場(chǎng)景分析

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

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

一、??前言

本文詳細(xì)介紹如何基于threejs在三維場(chǎng)景中使用JSON格式保存和加載整個(gè)場(chǎng)景，親測(cè)可用。希望能幫助到您。一起學(xué)習(xí)，加油！加油！

1.1 ??THREE toJSON()方法

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

二、??使用JSON格式保存和加載整個(gè)場(chǎng)景

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

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

2. ??代碼樣例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn41(使用JSON格式保存和加載整個(gè)場(chǎng)景)</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()
    //將設(shè)置屬性添加到gui當(dāng)中，gui.add(對(duì)象，屬性，最小值，最大值）
    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>

效果如下：

到此這篇關(guān)于學(xué)習(xí)threejs，使用JSON格式保存和加載整個(gè)場(chǎng)景的文章就介紹到這了,更多相關(guān)threejs使用JSON加載場(chǎng)景內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: