<template>  <div ref="content"></div></template>
<script>// 引入threejsimport * as THREE from "../../public/build/three";//鼠标控制import { OrbitControls } from "../../public/example/jsm/controls/OrbitControls.js";
export default {  components: {},  data() {    return {      // 创建一个场景      scene: null,      // 创建一个相机      camera: null,      // 创建一个渲染器      renderer: null,      // 模型对象      mesh: null    };  },
  mounted() {    this.init();  },  methods: {    // 初始化    init() {      // 初始化容器      var content = this.$refs.content;
      // 创建一个场景      this.scene = new THREE.Scene();      this.scene.background = new THREE.Color("#000");
      // 创建几何体      var geometry = new THREE.BoxBufferGeometry(10, 10, 10);      // 几何体材质对象      var material = new THREE.MeshPhongMaterial({        color: "#FFF"      });
      // 创建网格模型对象      this.mesh = new THREE.Mesh(geometry, material);      this.scene.add(this.mesh);
      // 创建点光源      var point = new THREE.PointLight("#FFF");      point.position.set(40, 20, 30);      this.scene.add(point);
      const sphereSize = 10;      const pointLightHelper = new THREE.PointLightHelper(point, sphereSize);      this.scene.add(pointLightHelper);
      //创建环境光      var ambient = new THREE.AmbientLight(0x444444);      this.scene.add(ambient);
      // 创建一个相机      this.camera = new THREE.PerspectiveCamera(        70,        window.innerWidth / window.innerHeight,        1,        10000      );      this.camera.position.set(-50, 50, 50);      this.camera.lookAt(0, 0, 0);
      //坐标轴辅助器，X,Y,Z长度30      var axes = new THREE.AxesHelper(300);      this.scene.add(axes);      // 辅助网格      let gridHelper = new THREE.GridHelper(100, 100);      this.scene.add(gridHelper);
      // 创建渲染器      this.renderer = new THREE.WebGLRenderer();      this.renderer.setSize(window.innerWidth, window.innerHeight);      this.renderer.setClearColor(0xb9d3ff, 1);      //插入 dom 元素      content.appendChild(this.renderer.domElement);
      let controls = new OrbitControls(this.camera, this.renderer.domElement);      controls.addEventListener("resize", this.render(), false);    },
    render() {      this.renderer.render(this.scene, this.camera);      // 自动旋转动画      this.mesh.rotateY(0.01);      requestAnimationFrame(this.render);    }  }};</script>
<style lang="scss" scoped></style>