【three.js】

three.js场景三要素：场景，相机和渲染器

官方文档：
https://www.wenjiangs.com/wp-content/uploads/three.js/docs/index.html#manual/zh/introduction/Creating-a-scene

一个完整版的three.js的demo
https://blog.csdn.net/m0_55145031/article/details/120163574

camera要素介绍及其属性
https://www.fengjinwei.com/blog-1367564.html

代码就仅仅出来东西 ！！！

<template>
  <div>
    <div id="container" ref="container"></div>
  </div>
</template>

<script>
import * as Three from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export default {
  name: "threeJs",
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
    }
  },
  mounted() {
    this.init();
    this.animate();
  },
  methods: {

    init() {
      let container = document.getElementById("container");
      this.camera = new Three.PerspectiveCamera(
          70,
          container.clientWidth / container.clientHeight,
          0.01,
          1000
      );
      this.camera.position.z = 0.6;
      this.scene = new Three.Scene();
      let geometry = new Three.CylinderBufferGeometry(0.2, 0.2, 0.2);
      let material = new Three.MeshNormalMaterial();
      this.mesh = new Three.Mesh(geometry, material);
      this.scene.add(this.mesh);
      this.renderer = new Three.WebGLRenderer({antialias: true});
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(this.renderer.domElement);
      //添加控制器
      var col = new OrbitControls(this.camera,this.renderer.domElement)
      col.addEventListener('change',()=>{
        this.renderer.render(this.scene,this.camera)
      })
      col.enableRotate=true//启用旋转
      col.enablePan=true//启用平移
      col.enableZoom=true//启用缩放
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.02;
      this.renderer.render(this.scene, this.camera);
    },
  },
}
</script>

<style scoped>
#container{
  height: 400px;
}
</style>