"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 地图(01)创建基本场景
发表评论 取消回复