3D可视化集装箱货柜模型开发 --threejs

最新推荐文章于 2024-04-29 10:08:35 发布
最新推荐文章于 2024-04-29 10:08:35 发布
阅读量2.3k 收藏 8
点赞数 3
分类专栏： js threejs 文章标签： javascript 几何学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CPan_/article/details/128346850
版权

教程效果实现效果

 

 

集装箱模型

箱子模型

 

中文文档：three.js docs

1.安装并 引入threejs 创建

安装threejs依赖包

npm install threejs

在需要用的的代码文件里面引入threejs

import * as THREE from 'three'

2.实现3D模型最基础的渲染骨架部分

以下例子是在vue的项目里面实现一个简单的场景渲染，目前场景除了坐标轴并无其他物体
three 3D中，场景场景主要发：1.场景、2.摄像机、3.渲染器 3个主要模块，也就是每次在写3d模型的时候都需要在代码中出现这三部分的代码

<template>
  <div id="three"></div>
</template>
<script>
import * as THREE from 'three'
export default {
  name: 'fba3d',
  components: {},
  provide() {
    return {
      details: this
    }
  },
  mounted() {
    this.render3d()
  },
  methods: {
    render3d() {
      //1.场景
      var scene = new THREE.Scene()
      scene.background = new THREE.Color('#09152b')
      //2.摄像机
      var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        1000
      )
      camera.position.set(500, 500, 500)
      camera.lookAt(0, 0, 0) //相机观察目标指向点

      // 其他内容部分       ==========  start  ==========

      // 轴 rgb (r红色表示：x轴，g绿色表示y轴，b蓝色表示z轴)
      const axesHelper = new THREE.AxesHelper(200)
      scene.add(axesHelper)

      // 其他内容部分       ==========   end   ==========

      // 3.渲染器
      var renderer = new THREE.WebGLRenderer()
      renderer.setSize(window.innerWidth, window.innerHeight)
      renderer.render(scene, camera) //渲染
      document.querySelector('#three').appendChild(renderer.domElement)
    }
  }
}
</script>
<style scopted>
#three {
  width: 100%;
  height: 100vh;
  background: #ccc;
}
</style>

3.在内容部分实现一个平面图和场景光

下图中实现了一个简单的平面，平面的颜色为绿色，但是目前还看到的平面是黑色。如果需要看到场景中的物体真实颜色和才材质，必须在场景中使用光源。类似我们在房间中放了一个物体，如果房间内没有开灯没有外部的光，那么那个物体呈现出来的效果就是黑色，什么都看不见。

<template>
  <div id="three"></div>
</template>
<script>
import * as THREE from 'three'
export default {
  name: 'fba3d',
  components: {},
  provide() {
    return {
      details: this
    }
  },
  mounted() {
    this.render3d()
  },
  methods: {
    render3d() {
      //1.场景
      var scene = new THREE.Scene()
      scene.background = new THREE.Color('#ffffff')
      //2.摄像机
      var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        1000
      )
      camera.position.set(0, 0, 500)
      camera.lookAt(0, 0, 0) //相机观察目标指向点

      // 其他内容部分       ==========  start  ==========
      this.renderContent(scene)

      // 其他内容部分       ==========   end   ==========

      // 3.渲染器
      var renderer = new THREE.WebGLRenderer()
      renderer.setSize(window.innerWidth, window.innerHeight)
      renderer.render(scene, camera) //渲染
      document.querySelector('#three').appendChild(renderer.domElement)
    },
    renderContent(scene) {
      // 画坐标轴
      this.drawAxes(scene)
      // 画一个平面
      this.drawPlane(scene)
    },
    // 画坐标轴
    drawAxes(scene) {
      // 轴 rgb (r红色表示：x轴，g绿色表示y轴，b蓝色表示z轴)
      const axesHelper = new THREE.AxesHelper(200)
      scene.add(axesHelper)
    },

    drawPlane(scene) {
      const geometry = new THREE.PlaneGeometry(200, 150)
      let material = new THREE.MeshLambertMaterial({
        color: '#00ff00', //平面颜色 绿色
        opacity: 1
      })
      const plane = new THREE.Mesh(geometry, material)
      plane.position.set(0, 0, 0)
      scene.add(plane)
    }
  }
}
</script>
<style scopted>
#three {
  width: 100%;
  height: 100vh;
  background: #ccc;
}
</style>

添加光源效果

<template>
  <div id="three"></div>
</template>
<script>
import * as THREE from 'three'
export default {
  name: 'fba3d',
  components: {},
  provide() {
    return {
      details: this
    }
  },
  mounted() {
    this.render3d()
  },
  methods: {
    render3d() {
      //1.场景
      var scene = new THREE.Scene()
      scene.background = new THREE.Color('#ffffff')
      //2.摄像机
      var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        1000
      )
      camera.position.set(0, 0, 500)
      camera.lookAt(0, 0, 0) //相机观察目标指向点

      // 其他内容部分       ==========  start  ==========
      this.renderContent(scene)

      // 其他内容部分       ==========   end   ==========

      // 3.渲染器
      var renderer = new THREE.WebGLRenderer()
      renderer.setSize(window.innerWidth, window.innerHeight)
      renderer.render(scene, camera) //渲染
      document.querySelector('#three').appendChild(renderer.domElement)
    },
    renderContent(scene) {
      // 画坐标轴
      this.drawAxes(scene)
      // 添加光源
      this.renderLight(scene)
      // 画一个平面
      this.drawPlane(scene)
    },
    // 画坐标轴
    drawAxes(scene) {
      // 轴 rgb (r红色表示：x轴，g绿色表示y轴，b蓝色表示z轴)
      const axesHelper = new THREE.AxesHelper(200)
      scene.add(axesHelper)
    },
    renderLight(scene) {
      // 光源m
      const AmbientLight = new THREE.AmbientLight(0xffffff)
      scene.add(AmbientLight)
      // 点光
      var light = new THREE.PointLight(0x000011, 30, 1000)
      light.position.set(500, 400, 500) //default; light shining from top
      scene.add(light)
      // 平行光
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.2)
      scene.add(directionalLight)
    },
    drawPlane(scene) {
      const geometry = new THREE.PlaneGeometry(200, 150)
      let material = new THREE.MeshLambertMaterial({
        color: '#00ff00', //平面颜色 绿色
        opacity: 1
      })
      const plane = new THREE.Mesh(geometry, material)
      plane.position.set(0, 0, 0)
      scene.add(plane)
    }
  }
}
</script>
<style scopted>
#three {
  width: 100%;
  height: 100vh;
  background: #ccc;
}
</style>

4.实现基础3D模型 与箱子纹理效果

// 画单个箱子
    drawBox(scene, box, axes, info) {
      let { l, w, h } = box
      let { x, y, z } = axes
      let geometry = new THREE.BoxGeometry(l, w, h)
      let material = new THREE.MeshLambertMaterial({
        color: '#ce9e6a',
        opacity: 1
      })
      let cube = new THREE.Mesh(geometry, material)
      cube.position.set(x, y, z)

      cube.boxType = 'BOX'
      cube.boxInfo = JSON.stringify(info)
      scene.add(cube)
    },
    //  圆立体
    drawSphere(scene) {
      // 球体网格模型
      var geometry2 = new THREE.SphereGeometry(20, 20, 20)
      var material2 = new THREE.MeshLambertMaterial({
        color: 0xfdd500
      })
      var mesh2 = new THREE.Mesh(geometry2, material2) //网格模型对象Mesh
      // 设置 坐标
      mesh2.position.set(200, 100, 100)
      scene.add(mesh2)
    }

盒子添加纹理效果

 

// 引入纹理图片
import boxwl from './img/box.jpg'

// 画单个箱子
    drawBox(scene, box, axes, info) {
      let { l, w, h } = box
      let { x, y, z } = axes
      let geometry = new THREE.BoxGeometry(l, w, h)
      // 箱子图片纹理
      let textureLoader = new THREE.TextureLoader()
      let plasterTexture = textureLoader.load(boxwl)

      let material = new THREE.MeshLambertMaterial({
        color: '#ce9e6a',
        // wireframe: true,
        map: plasterTexture,
        opacity: 1
      })
      let cube = new THREE.Mesh(geometry, material)
      cube.position.set(x, y, z)

      cube.boxType = 'BOX'
      cube.boxInfo = JSON.stringify(info)
      scene.add(cube)
    },

画箱子标签和顶部封口

 

// 纹理图片
import boxwl from './img/box.jpg'
//标签
import tagwl from './img/tag.png'
//箱子顶部
import boxTopwl from './img/boxtop.jpg'

    
// 创建一个平面 标签
    drawTagPlane(scene, box, axes) {
      let { l, h, w } = box
      let { x, y, z } = axes
      const geometry = new THREE.PlaneGeometry(20, 15)
      let textureLoader = new THREE.TextureLoader()
      let plasterTexture = textureLoader.load(tagwl)
      let material = new THREE.MeshLambertMaterial({
        map: plasterTexture,
        opacity: 1
      })
      const plane = new THREE.Mesh(geometry, material)
      plane.position.set(
        x + (l / 2 - 20) + 1,
        y - w / 2 + 10 + 1,
        z + h / 2 + 1.01
        // 100 - this.cabinetSize.h / 2 + 1
      ) // 偏移设置立方体坐标
      scene.add(plane)
    },
    // 创建一个平面 顶部封口
    drawTopPlane(scene, box, axes) {
      let { l, w, h } = box
      let { x, y, z } = axes
      const geometry = new THREE.PlaneGeometry(l, w)
      let textureLoader = new THREE.TextureLoader()
      let plasterTexture = textureLoader.load(boxTopwl)
      let material = new THREE.MeshLambertMaterial({
        color: '#ce9e6a',
        map: plasterTexture,
        opacity: 1
      })
      const plane = new THREE.Mesh(geometry, material)
      plane.rotateX(-Math.PI / 2) //旋转网格模型
      plane.position.set(x + 1, y + h / 2 + 0.01, z / 2 + 1) // 偏移设置立方体坐标
      scene.add(plane)
    },

纹理图片

 

集装箱实现

// 画集装箱
    drawContainer(scene, box, axes = { x: 0, y: 0, z: 0 }) {
      let { l, w, h } = box
      let { x, y, z } = axes
      var JGeometry = new THREE.BoxGeometry(l, w, h)
      // 箱子图片纹理
      let textureLoader = new THREE.TextureLoader()
      let plasterTexture = textureLoader.load(jzxwl)
      var jMmaterial = new THREE.MeshLambertMaterial({
        color: '#00229',
        transparent: true,
        opacity: 1,//透明度
        map: plasterTexture
      })
      var cube = new THREE.Mesh(JGeometry, jMmaterial)
      cube.position.set(x, y, z) // 设置立方体坐标
      cube.custType = 'jzx'
      scene.add(cube)
    },

5.添加工具

给场景添加 控制器，能随意切换拖拽物体角度观看

给外面集装箱添加透明度，能透视看到具体柜子消息

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

sceneControls(scene, camera, renderer) {
      // 控制器渲染
      var controls = new OrbitControls(camera, renderer.domElement)
      controls.addEventListener('change', function() {
        // 直接渲染
        renderer.render(scene, camera) //渲染
      })
    }

全部实现代码

<template>
  <div id="three"></div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'


// 纹理图片
import boxwl from './img/box.jpg'
import tagwl from './img/tag.png'
import boxTopwl from './img/boxtop.jpg'
import jzxwl from './img/jzx.jpg'
export default {
  name: 'fba3d',
  components: {},
  provide() {
    return {
      details: this
    }
  },
  mounted() {
    this.render3d()
  },
  methods: {
    render3d() {
      //1.场景
      var scene = new THREE.Scene()
      scene.background = new THREE.Color('#ffffff')
      //2.摄像机
      var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        1000
      )
      // 摄像机摆放位置
      camera.position.set(500, 500, 500)
      camera.lookAt(0, 0, 0) //相机观察目标指向点


      // 其他内容部分       ==========  start  ==========
      this.renderContent(scene)


      // 其他内容部分       ==========   end   ==========


      // 3.渲染器
      var renderer = new THREE.WebGLRenderer()
      renderer.setSize(window.innerWidth, window.innerHeight)
      setTimeout(() => {
        renderer.render(scene, camera) //渲染
      }, 100)
      document.querySelector('#three').appendChild(renderer.domElement)


      // 控制器
      this.sceneControls(scene, camera, renderer)
    },
    renderContent(scene) {
      // 画坐标轴
      // this.drawAxes(scene)
      // 添加光源
      this.renderLight(scene)
      // 画一个平面
      // this.drawPlane(scene)
      // 画一个3D立体 正方形
      this.drawBox(
        scene,
        { l: 100, w: 100, h: 100 },
        { x: 0, y: 0, z: 0 },
        { id: '001' }
      )
      // 集装箱
      this.drawContainer(scene, { l: 450, w: 200, h: 200 })
      // this.drawSphere(scene)
    },
    // 画坐标轴
    drawAxes(scene) {
      // 轴 rgb (r红色表示：x轴，g绿色表示y轴，b蓝色表示z轴)
      const axesHelper = new THREE.AxesHelper(200)
      scene.add(axesHelper)
    },
    renderLight(scene) {
      // 光源m
      const AmbientLight = new THREE.AmbientLight(0xffffff)
      scene.add(AmbientLight)
      // 点光
      var light = new THREE.PointLight('#ffffff', 0, 1)
      light.position.set(200, 200, 200) //default; light shining from top
      scene.add(light)
      // 平行光
      // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.2)
      // scene.add(directionalLight)
    },
    drawPlane(scene) {
      const geometry = new THREE.PlaneGeometry(200, 150)
      let material = new THREE.MeshLambertMaterial({
        color: '#00ff00', //平面颜色 绿色
        opacity: 1
      })
      const plane = new THREE.Mesh(geometry, material)
      plane.position.set(0, 0, 0)
      scene.add(plane)
    },
    // 画单个箱子
    drawBox(scene, box, axes, info) {
      let { l, w, h } = box
      let { x, y, z } = axes
      let geometry = new THREE.BoxGeometry(l, w, h)
      // 箱子图片纹理
      let textureLoader = new THREE.TextureLoader()
      let plasterTexture = textureLoader.load(boxwl)


      let material = new THREE.MeshLambertMaterial({
        color: '#ce9e6a',
        // wireframe: true,
        map: plasterTexture,
        opacity: 1
      })


      // 根据箱子画出响应 标签
      this.drawTagPlane(scene, box, axes)
      // 箱子顶部封口
      this.drawTopPlane(scene, box, axes)
      let cube = new THREE.Mesh(geometry, material)
      cube.position.set(x, y, z)


      cube.boxType = 'BOX'
      cube.boxInfo = JSON.stringify(info)
      scene.add(cube)
    },
    // 画集装箱
    drawContainer(scene, box, axes = { x: 0, y: 0, z: 0 }) {
      let { l, w, h } = box
      let { x, y, z } = axes
      var JGeometry = new THREE.BoxGeometry(l, w, h)
      // 箱子图片纹理
      let textureLoader = new THREE.TextureLoader()
      let plasterTexture = textureLoader.load(jzxwl)
      var jMmaterial = new THREE.MeshLambertMaterial({
        color: '#00229',
        transparent: true,
        opacity: 0.6,
        map: plasterTexture
      })
      var cube = new THREE.Mesh(JGeometry, jMmaterial)
      cube.position.set(x, y, z) // 设置立方体坐标
      cube.custType = 'jzx'
      scene.add(cube)
    },
    // 创建一个平面 标签
    drawTagPlane(scene, box, axes) {
      let { l, h, w } = box
      let { x, y, z } = axes
      const geometry = new THREE.PlaneGeometry(20, 15)
      let textureLoader = new THREE.TextureLoader()
      let plasterTexture = textureLoader.load(tagwl)
      let material = new THREE.MeshLambertMaterial({
        map: plasterTexture,
        opacity: 1
      })
      const plane = new THREE.Mesh(geometry, material)
      plane.position.set(
        x + (l / 2 - 20) + 1,
        y - w / 2 + 10 + 1,
        z + h / 2 + 1.01
        // 100 - this.cabinetSize.h / 2 + 1
      ) // 偏移设置立方体坐标
      scene.add(plane)
    },
    // 创建一个平面 顶部封口
    drawTopPlane(scene, box, axes) {
      let { l, w, h } = box
      let { x, y, z } = axes
      const geometry = new THREE.PlaneGeometry(l, w)
      let textureLoader = new THREE.TextureLoader()
      let plasterTexture = textureLoader.load(boxTopwl)
      let material = new THREE.MeshLambertMaterial({
        color: '#ce9e6a',
        map: plasterTexture,
        opacity: 1
      })
      const plane = new THREE.Mesh(geometry, material)
      plane.rotateX(-Math.PI / 2) //旋转网格模型
      plane.position.set(x + 1, y + h / 2 + 0.01, z / 2 + 1) // 偏移设置立方体坐标
      scene.add(plane)
    },
    //  圆立体
    drawSphere(scene) {
      // 球体网格模型
      var geometry2 = new THREE.SphereGeometry(20, 20, 20)
      var material2 = new THREE.MeshLambertMaterial({
        color: 0xfdd500
      })
      var mesh2 = new THREE.Mesh(geometry2, material2) //网格模型对象Mesh
      // 设置 坐标
      mesh2.position.set(200, 100, 100)
      scene.add(mesh2)
    },
    sceneControls(scene, camera, renderer) {
      // 控制器渲染
      var controls = new OrbitControls(camera, renderer.domElement)
      controls.addEventListener('change', function() {
        // 直接渲染
        renderer.render(scene, camera) //渲染
      })
    }
  }
}
</script>
<style scopted>
#three {
  width: 100%;
  height: 100vh;
  background: #ccc;
}
</style>

6.监听点击效果

// 监听点击到的箱子
    listenerClickBox(scene, camera, renderer) {
      let that = this
      const raycaster = new THREE.Raycaster()
      const mouse = new THREE.Vector2()
      window.addEventListener('click', async event => {
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
        raycaster.setFromCamera(mouse, camera)
        let result = []
        let sceneChildren = scene.children


        // result是被点击到的所有 物体
        // 可以通过之前箱子标记的类型来判断点击到的物体
        result = raycaster.intersectObjects(sceneChildren)


        let curr = ''
        // 获取第一个被点击到的箱子
        for (let i = 0; i < result.length; i++) {
          if (result[i].object && result[i].object?.boxType == 'BOX') {
            if (curr == '') {
              curr = i
            }
          }
        }
      })
    }

CPan_
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Three.js-webgl物联网粮仓3D可视化
03-12
项目案例使用threejs+vue+js实现粮仓三维可视化管理，加载粮仓3d场景，实现粮仓信息查询，标注，粮仓剖切，天气模拟功能，免安装即可运行，代码结构清晰，根据需求下载
三像素化展示柜：使用Three.js制作的像素化+抖动着色器展示柜
02-06
三像素展示柜 该展示柜的目的是创建手绘样式的3d到2d像素艺术渲染管线。 我已经（或将要使用，因为尚未完成）遵循此展示中的技术。 通过低分辨率渲染进行像素化 调色板限制 基于深度纹理的1px轮廓在顶部 基于拜耳矩阵的有序抖动 使用创建的回购 执照 麻省理工学院 学分 我使用的模型/纹理 tomkranis的Pidgeon 3 Joao Paulo的石墙005 调色板纹理是从以下调色板生成的
Three.js杂记（十三）—— 包围盒
最新发布
苦作舟的空城机
04-29 834
ThreeJs包围盒Box按照字面理解就是包围一个物体的盒子，那就是一个长方形空间。可以用于碰撞检测、物体选择、可视化剔除等功能。
地图Web3D可视化-WebGL、Three.js
05-09
课程分享——地图Web3D可视化-WebGL、Three.js，附源码 课程概述 - 本课程讲解如何在web上实现地图3D可视化 - 学习本课程有前端基础即可，如果了解three.js更好 适用人群 有前端基础，想基于Web实现地图数据的3D可视化效果 课程目录： 章节1、学前内容 章节2、Three.js解析渲染GeoJSON数据 章节3、行政区射线拾取、信息标签和热点 章节4、行政区数据可视化 章节5、密集位置数据可视化 章节6、信息流数据可视化(飞线)
thee搭建3D仓库 添加货架货物增删改
Chou_Junn的博客
04-30 1332
因项目需求 需要自定义搭建3D库房，并配置货架和货物的位置等等。这里贴出部分关键代码 详细代码较多 可参见示例 @跃焱邵隼 下的简单案例 > 3d仓库 const warehouse = new YsWarehouse(app) // 添加地面 const floorTexture = textureLoader.load("../../images/ysThree/wareho...
大家暂停下单，threejs从基础到实践（创建3D立体仓库）
11-02
以项目为驱动，先去学习基础知识。然后接着去讲这块应用到项目上，每个基础知识不仅仅是简单的文字描述，也做了大量的例子就给大家看。始终相信通过例子去学习是最直观的，也是最快的。所以无论你是零基础还是已经学习了一段时间的threejs，这个课程都非常适合你，购买完这个课程之后，基础资料既可以当成电子书查阅，还会有整个课程的代码
使用ThreeJs从零开始构建3D智能仓库——第五章（添加货架、货物与侧边栏）
热门推荐
homula123的博客
10-21 1万+
使用ThreeJs从零开始构建3D智能仓库——第五章写在前面创建货架对象创建货架、货位类根据配置添加货架添加货物添加信息侧边栏HTML全部代码ThreeJs_Composer.js全部代码Modules.js全部代码结束语 写在前面 本章我们来讲解下如何添加货架货物和显示各类信息的侧边栏。效果如下图所示： 其中货架的层数和每层的货位数量是可以自定义的，比如我这边就是三层每层两个货位。方便起见我在...
3D库房搭建（附源码下载）如何用three.js搭建一个3D库房、3D密集架、3D档案室
一步一个脚印，踏实努力，向着目标前进
11-05 4595
本人是做信创档案的（就是国产电脑：统信，麒麟，中科方德系统可以使用的档案系统） 最近接到单位上的一个需求是要做3D库房，之前也没搞过，但是我知道有three.js可以实现，当时就直接答应下来了 具体需求有3D库房展示（需要和一楼的库房基本一致），温湿度控制，开架，合架，通风，休眠，解锁等。 废话不多说 先看个第一版的图片： 主要的代码 ```//创建地板 function createFloor(){ var loader = new THREE.TextureLoader()
Vue3 + Three.js 商城可视化实战
qq_37312180的博客
04-06 272
Vue3 + Three.js 商城可视化实战
VUE3+Cesium+Three项目源码
damadashen的博客
08-29 2979
Vue+Cesium+Three项目构建的详解及源码。
threejs_room_model:使用three.js进行库房建模，包含货柜，摄像头，灭火器等，其中点击摄像头可以播放视频
08-03
库房建模示例 技术交流群：1018373095 使用three.js进行库房建模，包含货柜，摄像头，灭火器等，其中点击摄像头可以播放视频。 直接下载运行即可，具体内容请看代码，都有详细注释，不明白的可以提issues。 开源不易，且行且珍惜，您的star:sparkles:是我继续完善的动力，谢谢!
three.js 利用uv和ThreeBSP制作一个快递柜功能
10-14
主要介绍了three.js 利用uv和ThreeBSP制作一个快递柜,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
threejs-example：3D可视化教程
02-05
threejs-示例 Blender工程项目在 。教程还在制作当中。这是3D可视化教程源码，教程内容在。 yarn # dev yarn run dev # build yarn run build
threejs-dem-visualizer:使用 THREE.js 可视化 ASTER 和 LANDSAT 卫星数据
08-04
Threejs-dem-visualizerMedium 上的详细解释： 特征 ： DEM（数字高程模型）和卫星图像数据从下载使用 ASTER 和 LANDSAT 卫星的数据。 使用 QGIS 生成的 Geotiff 文件安装 git clone git@github....
geo-three：基于Threejs的基于图块的地理世界地图可视化库
02-18
允许使用基于图块的块对地理数据进行全球范围的可视化。 可以使用软件生成的图块或GPU位移图根据地形高度数据为地形生成3D几何。 支持多个地图服务提供商（ ， ， ， ， ， ， ）。 这些地图提供者中的每一个都需要...
使用ThreeJs从零开始构建3D智能仓库——第四章（添加动画及库区）
homula123的博客
09-30 1万+
使用ThreeJs从零开始构建3D智能仓库——第四章写在前面使用TweenJS创建补间动画TweenJS简介开关门动画的实现添加库区与文字结束语 写在前面 本章我们来探索下如何添加补间动画以及添加库区。效果如下图所示： 因为上传GIF的大小限制为5M，所以只能截个开门的动画，关门的动画类似大家可以自行脑补。 添加库区后效果如下，库区的位置、长宽、字体的大小位置颜色都是可以根据自己的配置调整的，为...
Three.js 项目实战之在线3D纸箱包装DIY设计
Webglzhang
03-25 3393
这个项目是在大学的时候做的，做了没多久就移交给下届的同学继续做了，那我今天分享一下这个项目，主要是是给纸箱厂做一个3D在线包装设计，增加包装纸厂的客户流量，并且也能过让用户得到更好的体验，下面展示的是客户端，后台在我同学那边，我就展示一下客户端。 主界面： 登录和注册页面： 核心纸箱3D展示、编辑界面 1.纸箱纹理编辑 2.纸箱平面图展开与折叠 3.平面图展开...
threejs导入obj校园模型，实现3d可视化
03-30
1. 准备OBJ校园模型文件 首先，需要准备一个校园模型的OBJ文件，可以使用3D建模软件（如Blender）制作，也可以从网上找到已有的OBJ文件。 2. 引入three.js库文件 在HTML文件中引入three.js库文件，可以通过以下方式： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> ``` 3. 创建场景、相机和渲染器 ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 10); // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 4. 加载OBJ文件 使用THREE.OBJLoader()加载OBJ文件，并将其添加到场景中： ```javascript // 加载OBJ文件 var loader = new THREE.OBJLoader(); loader.load('path/to/campus.obj', function (object) { scene.add(object); }); ``` 5. 其他设置 可以设置一些其他的属性，如光照和控制器等： ```javascript // 添加光照 var light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(0, 0, 50); scene.add(light); // 添加控制器 var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.enableZoom = true; // 渲染场景 function render() { requestAnimationFrame(render); renderer.render(scene, camera); controls.update(); } render(); ``` 完成以上步骤，就可以在浏览器中看到导入的OBJ校园模型了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值