Vue threejs学习笔记 代码 创建场景、相机、渲染器、立方体、原型、聚光灯、阴影、控件。贴图、模型无法加载解决

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

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

export default {
  data() {
    return {
      camera: null, //相机
      scene: null, //场景
      renderer: null, //渲染器
      controls: null, //控件
      spotLight:null,//灯光
    };
  },

  methods: {
      init: function(){
          this.scene= new THREE.Scene() 
          //创建场景
          this.camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000)
          //创建相机                               角度，长宽比                            最近渲染距离 最远渲染距离
          this.renderer = new THREE.WebGLRenderer();
          //创建渲染器
          this.renderer.setClearColor(new THREE.Color(0xeeeeee))
          //设置渲染器背景色
          this.renderer.setSize(window.innerWidth,window.innerHeight)
          //设置canvas画面的大小
          this.renderer.shadowMap.enabled = true;
          //告诉渲染器我需要把阴影渲染出来
          var axes = new THREE.AxesHelper(20)
          //设置三维坐标系                 长度
          this.scene.add(axes)
          // 添加坐标到场景中
          var planeGeometry = new THREE.PlaneGeometry(60,20)
          //创建地面几何物体                            长，宽
          var planeMaterial = new THREE.MeshStandardMaterial({color:0xaaaaaa})
          //给地面物体上色
          var plane = new THREE.Mesh(planeGeometry,planeMaterial)
          //创建地面
          plane.rotation.x=-0.5 * Math.PI //0.5x3.14  沿x轴旋转90度 默认是立着的 改为横向
          plane.position.x=0;
          plane.position.y=0;
          plane.position.z=0;


          plane.receiveShadow = true;
          //让地板接受别人的阴影

          this.scene.add(plane)
          //将地面添加到场景中

          var cubeGeometry = new THREE.BoxGeometry(4,4,4)
          var cubeMaterial = new THREE.MeshLambertMaterial({color:0xfff0000})
          var cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
          cube.castShadow = true;
          //立方体对象是否渲染到阴影贴图中
          this.scene.add(cube)
          //立方体
          cube.position.x=0;
          cube.position.y=4;
          cube.position.z=2;
          //位移


          var sphereGeometry = new THREE.SphereGeometry(4,20,20)
          var sphereMaterial = new THREE.MeshLambertMaterial({color:0xfff0000})
          var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial)
          this.scene.add(sphere)
          sphere.position.x=10;
          sphere.position.y=4;
          sphere.position.z=0;
          sphere.castShadow = true;
          //球体


          this.spotLight = new THREE.SpotLight({color:0xFFFFFF})
          //添加一个聚光灯                          灯色
          this.spotLight.position.set(20,20,10)
          //设置聚光灯位置        x，y，z
          this.spotLight.castShadow = true;
          this.scene.add(this.spotLight)

          this.camera.position.x=30 //x轴视角向右
          this.camera.position.y=30 //y轴视角向上
          this.camera.position.z=40
          this.camera.lookAt(this.scene.position)
          //定位摄像机，并且指向场景中心



          document.getElementById("info").appendChild(this.renderer.domElement);
          this.renderer.render(this.scene,this.camera)
          //渲染
          this.controls = new OrbitControls(this.camera, this.renderer.domElement);
          //控件 可以控制镜头

      console.log(this.spotLight.position);
      },


  },
  mounted() {
      this.init()
  },
};
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

vue中凡是外部资源均放入public文件夹中  然后使用"/xxx.obj" 这种方式引入  "/"为publick默认路径