Runtime error with basic three.js scene

Questions
#1

The following code causes the runtime error:

[TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’. at init (index.htm:93) at index.htm:85 init @ index.htm:93 (anonymous) @ index.htm:85]

var container,stats;

    var camera,scene, rederer;

    init();

    animate();

    function init(){//setup

        container=document.getElementById('container');

        scene =new THREE.Scene();

        rederer=new THREE.WebGLRenderer();

        rederer.setPixelRatio(window.devicePixelRatio);

        rederer.setSize(window.innerWidth,window.innerHeight);

        //problem strat here

        container.appendChild(rederer.domElemment);

    //            $.window('container').appendChild(rederer.domElemment);

        camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);

        var controls=new THREE.OrbitControl(camera,rederer.domElemment);

        controls.maxDistance=2000;

        controls.minDistance=20;

     // geometry

       var vector=new THREE.vector4();

       var instances=50000;

       var positions=[];

       var offset=[];

       var orienttationStart=[];

       var orientationEnd=[];

       positions.push(0.025,-0.025,0);

       positions.push(-0.025,0.025,0);

       positions.push(0,0,0.025);

       //instanced attributes

       for(var i=0;i<instances;i++){

           //offsets

           offsets.push(Math.random()-0.5,Math.random()-0.5,Math.random()-0.5);

           //colors

           colors.push(Math.random(),Math.random(),Math.random(),Math.random());

           //orientation start

           vector.set(Math.random()*2-1,Math.random()*2-1,Math.random()*2-1,Math.random()*2-1);

           vector.normalize();

           orienttationStart.push(vector.x,vector.y,vector.z,vector.w);

           //orientation end

           vector.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);

           vector.normalize();

           orienttationStart.push(vector.x, vector.y, vector.z, vector.w);

       }

       var geometry=new THREE.InstancedBufferGeometry();

       geometry.maxInstancedCount=instances;// set so its initialise for dat.GUT,will be set in first draw otherwise

       geometry.setAttribute('position',new THREE.Float32BufferAttribute(positions,3));

       geometry.setAttribute('offset',new THREE.InstancedBufferAttribute(new Float32Array(offsets),3));

       geometry.setAttribute('color',new THREE.InstancedBufferAttribute(new Float32Array(colors),4));

       geometry.setAttribute('orientationStart',new THREE.InstancedBufferAttribute(new Float32Array(orienttationStart),4));

       geometry.setAttribute('orentationEnd',new THREE.InstancedBufferAttribute(new Float32Array(orientationEnd),4));

// material

var material=new THREE.RawShaderMaterial({

    uniforms:{

        "time":{value:2.0},

        "sineTime":{value:1.0},

    },

    vertexShader:document.getElementById('vetrxShader').textContent,

    fragmentShader:document.getElementById('fragmentShader').textContent,

    side:THREE.DoubleSlide,

    transparent:true

       });

       //mesh

       var mesh=new THREE.Mesh(geometry,material);

       scene.add(mesh);

       //

       if(rederer.extensions.get('ANGLE_instanced_arrays')===null){

           document.getElementById('notSuported').style.display='';

           return;

       }

       //

       var gui =new GUI({

           width:350

       });

       gui.add(geometry,'maxInstancedCount',0,instances);

       //

       stats=new Stats();

       container.appendChild(stats.dom);

       //

       window.addEventListener('resize',onWindowResize,false);

    }

    function onWindowResize(){

        camera.aspect=window.innerWidth/window.innerHeight;

        camera.updateProjectionMatrix();

        rederer.setSize(window.innerWidth,window.innerHeight);

    }

    //

    function animate(){

        requestAnimationFrame(animate);

        render();

        stats.update();

    }

    function render(){

        var time=performance.now();

        var object=scene.children[0];

        object.rotation.y=time*0.0005;

        object.material.uniforms["time"].value=time*0.005;

         object.material.uniforms["sineTime"].value=Math.sin(object.material.uniforms["time"].value*0.05);

         rederer.render(scene,camera);

    }
#2

Unfortunately, there are a lot of typos in your code. Please ensure to work with a proper editor or IDE which performs language/spell checking. I’ve refactored the code a bit here:

https://jsfiddle.net/38oajzt6/

The particular error message was caused by this line:

container.appendChild(rederer.domElemment);

it should be

container.appendChild(rederer.domElement);

Also rederer is not written correctly. Better to call the variable renderer.

1 Like