javascript - 在 three.js 中加载网格

Question

我正在尝试创建一个网格并将其添加到场景中，我将 fragmentShader 传递给材质，然后我启动网格我将它传递到场景但我得到一个空白页面，我的浏览器中没有任何反应，我有两个类场景和人物类。图形类在场景类中实例化，场景类在 Js 文件中实例化并启动，该文件在 html 中链接。

这是我的代码：

                export default class Figure {
                     constructor(scene, cb) {
                         this.$image = 
                             document.querySelector('.tile__image')
                         this.scene = scene
                         this.callback = cb

                         this.loader = new THREE.TextureLoader()

                         this.image = this.loader.load(this.$image.src, () 
                         => {
                         this.start()
                         })
                         this.hover = 
                         this.loader.load(this.$image.dataset.hover)
                         this.$image.style.opacity = 0
                         this.sizes = new THREE.Vector2(0, 0)
                         this.offset = new THREE.Vector2(0, 0)

                         this.mouse = new THREE.Vector2(0, 0)
                         window.addEventListener('mousemove', ev => {
                            this.onMouseMove(ev)
                         })
                       }

                      start() {
                        this.getSizes();
                        this.createMesh();
                        this.callback();
                      }

                      getSizes() {
                        const { width, height, top, left } = 
                        this.$image.getBoundingClientRect();

                        this.sizes.set(width, height);

                        this.offset.set(
                          left - window.innerWidth / 2 + width / 2,
                          -top + window.innerHeight / 2 - height / 2
                        );
                       }

                       createMesh() {
                          this.uniforms = {
                             u_image: { type: 't', value: this.image },
                             u_imagehover: { type: 't', value: this.hover 
                             },
                             u_mouse: { value: this.mouse },
                             u_time: { value: 0 },
                             u_res: {
                               value: new THREE.Vector2(window.innerWidth, 
                               window.innerHeight)
                             }
                           }

                           this.geometry = new 
                           THREE.PlaneBufferGeometry(1, 1, 1, 1)
                           this.material = new THREE.ShaderMaterial({
                              uniforms: this.uniforms,
                              vertexShader: vertexShader,
                              fragmentShader: waveShader,
                              defines: {
                                    PR: window.devicePixelRatio.toFixed(1)
                              }
                           })

                  this.mesh = new THREE.Mesh(this.geometry, this.material)

                   this.mesh.position.set(this.offset.x, this.offset.y, 0)
                   this.mesh.scale.set(this.sizes.x, this.sizes.y, 1)
                   this.scene.add(this.mesh)
                  }

                        onMouseMove(event) {
                          TweenMax.to(this.mouse, 0.5, {
                           x: (event.clientX / window.innerWidth) * 2 - 1,
                          y: -(event.clientY / window.innerHeight) * 2 + 1
                        })

                        TweenMax.to(this.mesh.rotation, 0.5, {
                           //console.log(this.mesh.rotation);
                           x: -this.mouse.y * 0.3,
                           y: this.mouse.x * (Math.PI / 6)
                         })
                       }

                       update() {
                         this.uniforms.u_time.value += 0.01
                       }
                      }

这是主要的js文件：

                       import * as THREE from 'three';
                       var $ = require('jquery');
                       import Figure from './Figure';


                       const perspective = 800; // to have a no so strong 
                       distortion as we rotate the plane.

                       export default class Scene {
                         constructor() {
                           this.container = 
                               document.getElementById('stage')

                               this.scene = new THREE.Scene()
                               this.renderer = new THREE.WebGLRenderer({
                                 canvas: this.container,
                                 alpha: true
                               })

                               this.renderer.setSize(window.innerWidth, 
                               window.innerHeight)
                               this.renderer.setPixelRatio
                               (window.devicePixelRatio)

                                this.initLights()
                                this.initCamera()

                                this.figure = new Figure(this.scene, () => 
                                  {
                                    this.update()
                                   })
                                 }

                                 initLights() {
                                   const ambientlight = new 
                                   THREE.AmbientLight(0xffffff, 2)
                                   this.scene.add(ambientlight)
                                  }

                           initCamera() {
                             const fov =
                               (180 * (2 * Math.atan(window.innerHeight / 
                                2 / perspective))) /
                                Math.PI

                                this.camera = new THREE.PerspectiveCamera(
                                  fov,
                                  window.innerWidth / window.innerHeight,
                                  1,
                                  1000
                                 )
                                 this.camera.position.set(0, 0, 
                                 perspective)
                                }

                               update() {
                                 if (this.renderer === undefined) return
                            requestAnimationFrame(this.update.bind(this))

                            this.figure.update()

                            this.renderer.render(this.scene, this.camera)
                            }
                           }

有人可以解释一下有什么问题吗？

标签： javascriptthree.jsglslshader