三.JS 面向对象的结构问题答案

【问题标题】：THREE.JS Object Oriented Structure Problems三.JS 面向对象的结构问题
【发布时间】：2015-04-17 04:10:29
【问题描述】：

我正在为我的一个班级制作一个 THREE.JS 游戏。我非常热衷于学习和理解 THREE.JS，所以我按照他们的一些教程学习了 Javascript。我更像是一个 C# 和 C++ 人，所以下面的问题可能只是我对 Javascript 缺乏了解的结果。

我为游戏编写了以下面向对象的结构。

ObjectEnum = {
            Cube: 0,
            Sphere: 1,
            Cylinder: 2
        }



        Transform = function () {
            var position, rotation, scale;
        }

        function TransformInit(position, rotation, scale) {
            var t = new Transform();
            t.position = position;
            t.rotation = rotation;
            t.scale = scale;
            return t;
        }

        GameObject = function () {
            var mesh, geometry, material, transform;
            var GameObject = this;
            this.init = function (ObjectEnumType, materialShader, transformVector3) {
                if (ObjectEnumType == 0) {
                    geometry = new THREE.BoxGeometry(transformVector3.scale);
                }
                transform = transformVector3;
                material = materialShader;
                mesh = new THREE.Mesh(geometry, material);
            }
            this.getMesh = function () {
                return mesh;
            }
        }

        var go = new GameObject();
        this.onload = function () {
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            var t = TransformInit(new THREE.Vector3(10, 0, 0), new THREE.Vector3(10, 0, 0), new THREE.Vector3(1, 1, 1));

            go.init(ObjectEnum.Cube, new THREE.MeshPhongMaterial({
                specular: '#a9fcff',
                color: '#00abb1',
                emissive: '#006063',
                shininess: 100
            }), t);
            var w = go.getMesh();
            scene.add(w);
            camera.position.z = 5;
            console.log(t);
            var render = function () {
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            };
            render();
        }

显然，它不会在屏幕上呈现任何内容。我使用了一个调试器，发现所有内容都具有非零值，没有控制台错误，所有 THREE.JS 脚本都在此之前加载，编辑器中一切正常，但屏幕上什么也没有。当我将其更改为简单的程序结构时，它就起作用了。我的代码有问题还是我在实现中缺少 JS 概念？

从这里跟随教程 http://threejs.org/docs/#Manual/Introduction/Creating_a_scene http://blog.teamtreehouse.com/the-beginners-guide-to-three-js

不适用于 IE11、Chrome、Firefox！

【问题讨论】：

有一句我觉得很奇怪，那就是：'var GameObject = this;'。那条线是做什么的？
无法判断，这个来源有什么问题。整个脚本的入口点是this.onload = function。但是我看不到它是从哪里调用的，我们也不能知道this 是什么。所以，请澄清你的问题。
最后一个函数中的“this”是什么？

标签： javascript three.js game-engine

【解决方案1】：

您向 BoxGeometry 传递了错误的参数。 transformVector3 是 Vector3 所以你应该写：

geometry = new THREE.BoxGeometry(transformVector3.scale.x, transformVector3.scale.y, transformVector3.scale.z);

位置未分配给您的网格：

            transform = transformVector3;
            material = materialShader;
            mesh = new THREE.Mesh(geometry, material);
            //here
            mesh.position.copy(transform.position);

【讨论】：