Hallo Leute,
ich versuche mich gerade das erste mal an WebGL und Three.js und scheitere leider beim laden eines Models.
Hier mein Code:
und die Fehlermeldung:
THREE:ObjectLoader: Can't parse candyCane.obj.JSON.parse: unexpected character at line 1 column 1 of the JSON data
Kann mir da einer sagen was ich falsch mache?
ich versuche mich gerade das erste mal an WebGL und Three.js und scheitere leider beim laden eines Models.
Hier mein Code:
Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
<script src="build/three.min.js"></script>
<script type="module" src="src/loaders/MaterialLoader.js"></script>
<script type="module" src="src/loaders/ObjectLoader.js"></script>
<script>
var scene, camera, renderer, mesh;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(90, 1280 / 720, 0.1, 1000);
//Objekte
mesh = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshPhongMaterial({color: 0xff9999, wireframe: false})
);
scene.add(mesh);
//Licht
ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);
light = new THREE.PointLight();
light.position.set(-3,6,-3);
light.castShadow = true;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 25;
scene.add(light);
//Add Object
var objLoader = new THREE.ObjectLoader();
objLoader.load('candyCane.obj', function(mesh){
scene.add(mesh);
});
//Kamera
camera.position.set(0, 0, -2);
camera.lookAt(new THREE.Vector3(0, 0, 0));
renderer = new THREE.WebGLRenderer();
renderer.setSize(1280, 720);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
document.body.appendChild(renderer.domElement);
animate();
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
window.onload = init;
</script>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
und die Fehlermeldung:
THREE:ObjectLoader: Can't parse candyCane.obj.JSON.parse: unexpected character at line 1 column 1 of the JSON data
Kann mir da einer sagen was ich falsch mache?