在THREE.js平面上添加图像

Question

我试图将.png img放到飞机上，但是当我尝试加载它时，它消失了。

可能不是THREE.js不是为Vue.js设计的，是否还有其他3D库支持Vue.js？

我也想添加一个SVG，三个都有一个SVGLoader，我还没有弄清楚它是如何工作的。

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

<script>
import * as THREE from 'three'
//import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js';
export default {
  name: 'Three',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      shape: null,
      geomarty: null,
      stats: null,
      gui: null,
      guiData: null,
      texture: null
    }
  },
  methods: {
    init(){
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( this.renderer.domElement );
        this.geometry = new THREE.PlaneGeometry( 5, 5, 5 );
        this.texture = new THREE.TextureLoader().load('../img/shark.png')
        this.material = new THREE.MeshLambertMaterial({map: this.texture})
        this.mesh = new THREE.Mesh( this.geometry, this.material );
        this.scene.add( this.mesh );
        this.camera.position.z = 5;
    },
    animate() {
    requestAnimationFrame( this.animate );
    this.renderer.render( this.scene, this.camera );
    }
  },
  mounted() {
      this.init();
      this.animate();
      //this.svgLoad();
  }
}
</script>

Answer 1

您的动画功能可能正在失去上下文。通过requestAnimationFrame调用时，this变为window。当我想避免这种情况时，我通常将bind动画功能设置为所需的上下文。

我对Vue不十分熟悉，但是请尝试一下...

bind

在

<script>
import * as THREE from 'three'
let boundAnimation = null
export default {
  //...
  methods:
    // ...
    animate() {
      requestAnimationFrame( boundAnimation );
      this.renderer.render( this.scene, this.camera );
    }
  },
  mounted() {
      this.init();
      boundAnimation = this.animate.bind(this);
      boundAnimation();
  }
}
</script>

内，mounted应该代表导出对象的当前实现。通过以这种方式分配this，对boundAnimation的所有调用将在上下文中使用与绑定函数时相同的boundAnmation。在this中使用绑定函数可确保该函数触发时仍将使用所需的requestAnimationFrame上下文。