Uncaught TypeError: THREE.PointsMaterial is not a constructor


#1

Got an error can u help me?

my JS

$(document).ready(function(){
    var core, renderer, colors=[], scene, camera, composer, circle, skelet, materials = [];
    (function($) {

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        init({
            start_index: 3,
            small_stars: 10000,
            medium_stars: 500,
            large_stars: 100
        });

    }(jQuery));

    function init(params) {

        var container = document.getElementById('canvas');
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 50;

        scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0x000000, 0.0009);


        core = new THREE.Object3D();
        var core_geometry = new THREE.IcosahedronGeometry(0.2, 1);
        var core_material = new THREE.MeshPhongMaterial({
            color: 0xAFE2E9,
            shading: THREE.FlatShading
        });
        var core_planet = new THREE.Mesh(core_geometry, core_material);
        core_planet.scale.x = core_planet.scale.y = core_planet.scale.z = 7;
        core.add(core_planet);
        scene.add(core);

        skelet = new THREE.Object3D();
        var skelet_geometry = new THREE.IcosahedronGeometry(0.3, 1);
        var skelet_material = new THREE.MeshPhongMaterial({
            color: 0xffffff,
            wireframe: true,
            side: THREE.DoubleSide
        });
        var skelet_planet = new THREE.Mesh(skelet_geometry, skelet_material);
        skelet_planet.scale.x = skelet_planet.scale.y = skelet_planet.scale.z = 15;
        skelet.add(skelet_planet);
        scene.add(skelet);

        var geometry = new THREE.Geometry();
        for (var i = 0; i < 5000; i ++ ) {
            var vertex = new THREE.Vector3();
            vertex.x = 2000 * Math.random() - 100;
            vertex.y = 2000 * Math.random() - 100;
            vertex.z = 2000 * Math.random() - 100;
            geometry.vertices.push( vertex );
            colors[ i ] = new THREE.Color( 0xffffff );
            colors[ i ].setHSL( ( vertex.x + 100 ) / 200, 1, 0.5 );
        }
        geometry.colors = colors;

        var material = new THREE.PointsMaterial({ size: 85 });
        material.color.setHSL( 1.0, 0.2, 0.7 );
        particles = new THREE.Points( geometry, material );
        scene.add( particles );

        var ambientLight = new THREE.AmbientLight(0xffffff);
        scene.add(ambientLight);;

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        animate();
    }

    function animate() {
        // core.rotation.x -= 0.0010;
        // core.rotation.y -= 0.0010;
        skelet.rotation.x -= 0.0010;
        skelet.rotation.y += 0.0010;
        renderer.clear();
        camera.lookAt( scene.position );
        renderer.render( scene, camera );
        requestAnimationFrame(function(){animate();});
    }

    function getRandomArbitrary(min, max) {
        return Math.random() * (max - min) + min;
    }

});

My HTML:

<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <link rel="stylesheet" href="css/main.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Last Word</title>
  </head>
  <body>

    <div id="canvas"></div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
    <script src="scripts/main.js"></script>

    <script src="scripts/libs/Detector.js"></script>
    <script src="scripts/libs/stats.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  </body>
</html>

Error:

Uncaught TypeError: THREE.PointsMaterial is not a constructor

#2

r67?
It was created at the beginning of anno domini. I mean it’s outdated for years.
THREE.PointCloudMaterial() became THREE.PointsMaterial() at about revision 72.


#3

How i can use 72 version? i download 89 from git but in console log i see 67…


#4

Ehm… Maybe because you’re using r67?


#5

so Thank You!