javascript - 两个场景三个js : CubeGeometry and PointsGeometry - only one appears

Question

下面的代码应该生成一个立方体和一些点(属于圆环)。我只能看到立方体。我已经搜索了这些点几个小时，但一无所获。

 // just a cube
        cube = new THREE.Mesh(
            new THREE.CubeGeometry(50, 50, 50),
            new THREE.MeshNormalMaterial({ wireframe: true }));

// a mesh of the torus
        function TorusMesh(R, r, nx, ny) {
            var vertices = new Array(nx);
            var normals = new Array(nx);
            for (var i = 0; i < nx; i++) {
                vertices[i] = new Array(ny);
                normals[i] = new Array(ny);
                var u = i / nx * 2 * Math.PI;
                var cos_u = Math.cos(u);
                var sin_u = Math.sin(u);
                var cx = R * cos_u;
                var cy = R * sin_u;
                for (var j = 0; j < ny; j++) {
                    var v = j / ny * 2 * Math.PI;
                    var rcos_v = r * Math.cos(v);
                    var rsin_v = r * Math.sin(v);
                    vertices[i][j] = new THREE.Vector3(
                        cx + rcos_v * cos_u,
                        cy + rcos_v * sin_u,
                        rsin_v
                    );
                    normals[i][j] = new THREE.Vector3(
                        rcos_v * cos_u,
                        rcos_v * sin_u,
                        rsin_v
                    );
                }
            }

            var faces = Array(4);
            faces[0] = Array(2 * nx * ny);
            faces[1] = Array(2 * nx * ny);
            for (var i = 0; i < nx; i++) {
                var ip1 = (i == nx - 1 ? 0 : i + 1);
                for (var j = 0; j < ny; j++) {
                    var jp1 = (j == ny - 1 ? 0 : j + 1);
                    faces[0] = [
                        ip1 * ny + j,
                        i * ny + j,
                        i * ny + jp1,
                        [normals[ip1][j], normals[i][j], normals[i][jp1]]
                    ];
                    faces[1] = [
                        ip1 * ny + j,
                        i * ny + jp1,
                        ip1 * ny + jp1,
                        [normals[ip1][j], normals[i][jp1], normals[ip1][jp1]]
                    ];
                    var Pair = [faces[0], faces[1]];
                }
            }

            return {
                vertices: vertices,
                normals: normals
                //faces: TODO
            }
        }
 
 // the vertices as a cloud of dots
        var dotGeometry = new THREE.Geometry();
        var vertices = TorusMesh(10, 3, 16, 8).vertices;
        for (var j = 0; j < 8; j++) {
            for (var i = 0; i < 15; i++) {
                dotGeometry[j * 15 + i] = vertices[i][j]
            }
        }
        var dotMaterial =
            new THREE.PointsMaterial({
                size: 5,
                sizeAttenuation: false,
                color: 0x000000
            });
        cloud = new THREE.Points(dotGeometry, dotMaterial);
        console.log(cloud);

 // three js scene
        var aspect = window.innerWidth / window.innerHeight;
        var camera = new THREE.PerspectiveCamera(150, aspect, 1, 10000);
        var scene = new THREE.Scene();
        camera.position.set(0, 0, 20);
        scene.add(camera);

 // dat.gui controls -------------------------------------------------
        var dgcontrols = new function () {
            this.rotationSpeed = 0.001;
            this.zoom = 20;
        }
        var gui = new dat.GUI({ autoplace: false, width: 350 });
        gui.add(dgcontrols, 'rotationSpeed').min(0).max(0.005).name("Rotation speed");
        var controller_zoom = gui.add(dgcontrols, 'zoom').min(1).max(3000);
        controller_zoom.onFinishChange(function (value) {
            camera.position.z = value;
        });

        // the render() function
        var renderer = new THREE.WebGLRenderer();
        function render() {
            renderer.render(scene, camera);
            object.rotation.x += dgcontrols.rotationSpeed;
            object.rotation.y += dgcontrols.rotationSpeed;
            requestAnimFrame(render);
        }
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

        // add objects to the scene
        var object = new THREE.Object3D();
        scene.add(cloud);
        scene.add(cube);

        render()
        requestAnimFrame(render);
 

canvas {
            width: 100%;
            height: 100%
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.js"></script>

Answer 1

问题在于您已将顶点直接分配给几何对象，而不是 dotGeometry.vertices。如果随后将点的颜色更改为白色，您应该会看到正确渲染的点。

这是您更新后的代码的 fiddle :https://jsfiddle.net/f2Lommf5/15833/

 // just a cube
        cube = new THREE.Mesh(
            new THREE.CubeGeometry(50, 50, 50),
            new THREE.MeshNormalMaterial({ wireframe: true }));

// a mesh of the torus
        function TorusMesh(R, r, nx, ny) {
            var vertices = new Array(nx);
            var normals = new Array(nx);
            for (var i = 0; i < nx; i++) {
                vertices[i] = new Array(ny);
                normals[i] = new Array(ny);
                var u = i / nx * 2 * Math.PI;
                var cos_u = Math.cos(u);
                var sin_u = Math.sin(u);
                var cx = R * cos_u;
                var cy = R * sin_u;
                for (var j = 0; j < ny; j++) {
                    var v = j / ny * 2 * Math.PI;
                    var rcos_v = r * Math.cos(v);
                    var rsin_v = r * Math.sin(v);
                    vertices[i][j] = new THREE.Vector3(
                        cx + rcos_v * cos_u,
                        cy + rcos_v * sin_u,
                        rsin_v
                    );
                    normals[i][j] = new THREE.Vector3(
                        rcos_v * cos_u,
                        rcos_v * sin_u,
                        rsin_v
                    );
                }
            }

            var faces = Array(4);
            faces[0] = Array(2 * nx * ny);
            faces[1] = Array(2 * nx * ny);
            for (var i = 0; i < nx; i++) {
                var ip1 = (i == nx - 1 ? 0 : i + 1);
                for (var j = 0; j < ny; j++) {
                    var jp1 = (j == ny - 1 ? 0 : j + 1);
                    faces[0] = [
                        ip1 * ny + j,
                        i * ny + j,
                        i * ny + jp1,
                        [normals[ip1][j], normals[i][j], normals[i][jp1]]
                    ];
                    faces[1] = [
                        ip1 * ny + j,
                        i * ny + jp1,
                        ip1 * ny + jp1,
                        [normals[ip1][j], normals[i][jp1], normals[ip1][jp1]]
                    ];
                    var Pair = [faces[0], faces[1]];
                }
            }

            return {
                vertices: vertices,
                normals: normals
                //faces: TODO
            }
        }
 
 // the vertices as a cloud of dots
        var dotGeometry = new THREE.Geometry();
        var vertices = TorusMesh(10, 3, 16, 8).vertices;
        for (var j = 0; j < 8; j++) {
            for (var i = 0; i < 15; i++) {
                dotGeometry.vertices[j * 15 + i] = vertices[i][j]
            }
        }
        var dotMaterial =
            new THREE.PointsMaterial({
                size: 5,
                sizeAttenuation: false,
                color: 0xffffff
            });
        cloud = new THREE.Points(dotGeometry, dotMaterial);

 // three js scene
        var aspect = window.innerWidth / window.innerHeight;
        var camera = new THREE.PerspectiveCamera(150, aspect, 1, 10000);
        var scene = new THREE.Scene();
        camera.position.set(0, 0, 20);
        scene.add(camera);

 // dat.gui controls -------------------------------------------------
        var dgcontrols = new function () {
            this.rotationSpeed = 0.001;
            this.zoom = 20;
        }
        var gui = new dat.GUI({ autoplace: false, width: 350 });
        gui.add(dgcontrols, 'rotationSpeed').min(0).max(0.005).name("Rotation speed");
        var controller_zoom = gui.add(dgcontrols, 'zoom').min(1).max(3000);
        controller_zoom.onFinishChange(function (value) {
            camera.position.z = value;
        });

        // the render() function
        var renderer = new THREE.WebGLRenderer();
        function render() {
            renderer.render(scene, camera);
            object.rotation.x += dgcontrols.rotationSpeed;
            object.rotation.y += dgcontrols.rotationSpeed;
            requestAnimFrame(render);
        }
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

        // add objects to the scene
        var object = new THREE.Object3D();
        scene.add(cloud);
        scene.add(cube);

        render()
        requestAnimFrame(render);
 

canvas {
            width: 100%;
            height: 100%
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.js"></script>