Threejs 实现3D 地图(01)创建基本场景

复制代码
"d3": "^7.9.0",
"three": "^0.169.0",
"vue": "^3.5.10"

<script setup>
import { onMounted,ref } from 'vue'
import * as THREE from 'three'
import * as d3 from "d3";  //莫开托坐标 矫正地图坐标
import map from './constant/map.json'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 拿到页面的宽高
const width = window.innerWidth, height = window.innerHeight;

// 创建场景
const scene = new THREE.Scene();
// 将背景颜色设置为白色
scene.background = new THREE.Color("#000000");

// 创建相机
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10000);
// 设置相机位置
camera.position.z = 1000;

// // 辅助线 AxesHelper
const axesHelper = new THREE.AxesHelper( 500 );
scene.add( axesHelper );

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
//阻尼 更真实
controls.enableDamping = true

const initGeom = () => {
  // 添加一个物体(测试是否显示)
  const geometry = new THREE.BoxGeometry( 200, 200,200 );
  const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  const cube = new THREE.Mesh( geometry, material );
  scene.add( cube );
}

// 渲染页面
const render = () => {
  // 将场景(scene)和摄像机(camera 加入进来)
  renderer.render(scene, camera)
  // 渲染下一帧的时候会调用render函数
  requestAnimationFrame(render)
  controls.update()
}

const initLight = () => {
  // 基本光源
  const ambLight = new THREE.AmbientLight('#ffffff', 0.3)
  /**
   * 设置聚光灯相关的的属性
   */
  const spotLight = new THREE.SpotLight(0xFFFFFF); // 聚光灯
  spotLight.position.set(40, 200, 10);
  spotLight.castShadow = true; // 只有该属性为true时,该点光源允许产生阴影,并且下列属性可用
  scene.add(ambLight, spotLight); // 向场景中添加光源
}

onMounted(() => {
  // 添加物体到场景
  initGeom()
  // 渲染
  render()
  // 设置环境光
  initLight()
  // 将渲染加入到页面上
  document.body.appendChild(renderer.domElement);
})
</script>

<template>
  <div id="info"></div>
</template>

<style scoped>

</style>

下一篇:Threejs 实现3D 地图(02)创建3d 地图-CSDN博客

相关推荐
婉婉耶32 分钟前
VUE带你乘风破浪~
前端·vue.js
xhload3d34 分钟前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
小赖同学啊1 小时前
光伏园区3d系统管理
前端·javascript·3d
魂断蓝桥6661 小时前
使用three.js,实现微信3D小游戏系列教程,框架篇(一)
webgl·threejs·微信小游戏·3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
乌兰麦朵1 小时前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai1 小时前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
流星稍逝1 小时前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js
OEC小胖胖1 小时前
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
开发语言·前端·javascript·vue.js·web
拾光拾趣录2 小时前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
雲墨款哥2 小时前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js