DT走过的路

基础实现

<script setup lang="ts">
import * as THREE from 'three'
import { ref, onMounted } from 'vue'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
//初始化场景
const scene = new THREE.Scene();

//创建相机
const camera = new THREE.PerspectiveCamera(
  75, 
  window.innerWidth / window.innerHeight, 
  0.1, 
  1000
);

//设置相机位置
camera.position.z = 30;

// 创建几何体
const geometry = new THREE.BoxGeometry( 10, 10, 10 );
//创建材质
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
//创建网格
const cube  = new THREE.Mesh( geometry, material );
scene.add( cube );

//轨道控制器
let controls: OrbitControls;

//创建渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const container = ref<HTMLDivElement | null>(null);

//添加坐标辅助器
const axesHelper = new THREE.AxesHelper( 20 );
scene.add( axesHelper );

const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

onMounted(() => {
  if (container.value) {
    //添加轨道控制器
    controls = new OrbitControls( camera, renderer.domElement );
    controls.enableDamping = true;
    controls.update();
    
    container.value.appendChild(renderer.domElement);
    render();
  }
});


</script>

<template>
  <div ref = "container" class="container">

  </div>
</template>
<style lang="scss">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100vh;
  height: 100vh;
}
</style>

轨道查看

https://threejs.org/docs/?q=bitCont#OrbitControls

坐标辅助器

https://threejs.org/docs/?q=AxesHelper#AxesHelper