# Mein Programmiertes mag nicht



## Blueflashed (6. Dez 2016)

Hallo liebe Community, schön dass ich auf euch gestoßen bin  Ich bin die Sarah und dies ist mein erster Post hier 

Ich befasse mich seit einigen Wochen mit meinem Vorhaben, wo ich nicht voran komme und verzweifle da ich jedes findbare und passende Tutorial schon x Mal durchgemacht habe - ohne Erfolg. Es gibt viele und darunter sehr gute Anbieter die das alles vereinfachen (Account erstellen und Model uploaden), aber das Ergebnis ist dann mit Branding oder Social Media Buttons versehen...


*Ziel:* Ein interaktiver (simple Bewegungsnavigation mit der Mouse) 3D Modelbetrachter auf der Homepage.

*Wie ich vorging:* 3D Model als .json exportiert und dann anhand der Tutorials das HTML und die js programmiert mit der Einbindung des 3D Modelles im .json Format. Alle Dateien habe ich im "www" Ordner des "Wamp64" Berzeichnisses "WebGL".

Hier ist mein letzter Skript, den ich versucht habe. Könnt Ihr mir sagen was ich zur Hölle falsch mache oder es richtig geht?!


(im Root Ordner habe ich einen "JS" Ordner mit den 3 js. Dateien drin und einen "Models" Ordner mit dem 3D Model "maschine" drin).


```
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Model Viewer </title>
    <script src="js/Three_min.js"> </script>
<script src="js/TrackballControls.js"> </script>
<script src="js/JSONLoader.js"> </script>
<script type="text/javascript">
    function onLoad(){
      initScene();
      function initScene()
  var container = document.getElementById("container");
  
  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild( renderer.domElement );
}
    }

    scene = new THREE.Scene();
   
    camera = new THREE.PerspectiveCamera( 75, container.offsetWidth / container.offsetHeight, 1, 1000 );
camera.position.z = 10;
scene.add( camera );
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
controls.minDistance = 1.1;
controls.maxDistance = 100;
controls.keys = [ 16, 17, 18 ]; // [ rotateKey, zoomKey, panKey ]

var dirLight = new THREE.DirectionalLight(0xffffff, 0.95);
dirLight.position.set(-3, 3, 7);
dirLight.position.normalize();
scene.add(dirLight);
var pointLight = new THREE.PointLight(0xFFFFFF, 5, 50);
pointLight.position.set(10, 20, -10);
scene.add(pointLight);

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/maschine.js", function( geometry ) {
      var maschine = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
      scene.add(maschine);
} );

   
animate();

function animate() {
  requestAnimationFrame( animate );
  render();
}

function render() {
  renderer.render( scene, camera );
}

function render() {
  controls.update(); //for cameras
  renderer.render( scene, camera );
}

</script>
      </head>
  <body onLoad="onLoad();">
  <div id='container'>
    </div>
</body>
</html>
```


Zur Technik:
Windows 7 64bit
Notepad++
Mozilla Firefox
Wamp64 (grünes Symbol leuchtet)
diverse 3D Modelling/ Render Software

Ich hoffe sehr, es kann mir wirklich jemand mal helfen 

Liebe Grüße
Sarah


----------



## Flown (6. Dez 2016)

Herzlich Willkommen im Java-Forum. Ich möchte dir nur ungern sagen, aber JAVA != JAVASCRIPT.

Ich habe deinen Beitrag mal ins richtige Unterforum verschoben und vielleicht kann dir trotzdem einer helfen.


----------



## InfectedBytes (6. Dez 2016)

Als erstes solltest du dir klar machen, das JavaScript NICHT Java ist 
Vielleicht kann dir hier trotzdem jemand helfen, aber allgemein wäre es vermutlich sinnvoller in einem JavaScript Forum zu fragen.

edit: Da war ich wohl mit meiner Antwort zu spät


----------



## Blueflashed (6. Dez 2016)

UPS, da bröselt sovieles auf mich ein, dass ich glatt schon solche Fehler einbringe 

Danke euch Beiden


----------



## Thallius (6. Dez 2016)

Tut mir leid wenn ich dich enttäuschen muss aber das was du da vorhast ist nun einmal nicht trivial. Und durch das zusammen kopieren von Tutorials ohne die Grundlagen von JS zu kennen und dazu gehört auch das man erstmal weiß wie man Webseiten debugged, wird dir das auch nicht gelingen.

Du solltest dir also erstmal ein Buch über HTML und JS besorgen und von ganz vorne anfangen und erst einmal kleine Projekte machen. Aber dafür braucht es viel Zeit....

Claus


----------



## thecain (6. Dez 2016)

Die Fehlermeldung wäre noch interessant, der Code an sich, sieht ja nicht so kompliziert aus, wenn das Model auch wirklich mit ThreeJS kompatibel ist.


----------



## Blueflashed (7. Dez 2016)

Eben @thecain, es gibt diverse tutorials, alle unterschiedlich aber überwiegend mit three.js. Das Model wurde aus Blender ins .json Format exportiert.
Die Fehler die ich erhalte sind ein weißen Browserfenster und folgende Meldungen in der Konsole

ReferenceError: THREE is not defined[Weitere Informationen]  TrackballControls.js:8:1
   <anonym> file:///C:/Users/Maurizio/Desktop/Neuer%20Ordner/js/TrackballControls.js:8:1
SyntaxError: import declarations may only appear at top level of a module  JSONLoader.js:1
SyntaxError: expected expression, got keyword 'var'[Weitere Informationen]  index.html:13:2
ReferenceError: onLoad is not defined[Weitere Informationen]  index.html:1:1
   onload

Hier noch der Link zum Tut, aus dem ich diesen Script habe (die anderen Tuts waren wie gesagt teilweise anders, teilweise ähnlich aufgebaut aber mit three.js)
http://www.semayjohnston.com/example.html#


----------



## thecain (7. Dez 2016)

Blueflashed hat gesagt.:


> function initScene()


Da fehlt auf jeden Fall eine öffnende klammer (Auch im Tutorial Code)


----------

