Question

我正在为我的一个班级制作一个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！

Answer 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);

三个面向对象的结构问题

1 个答案: