Witajcie,
rzeźbie sobie i rzeźbie, ale może tym razem się uda.
Próbuje wczytać image.obj w Three.js, ale wyrzuca dwa błędy:
three.js:6215 THREE.Object3D.add: object not an instance of THREE.Object3D. OBJLoader
image.obj:1 Failed to load resource: net::ERR_CACHE_READ_FAILURE
main.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera (64, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const colorYellow = new THREE.Color("hsl(40, 100%, 60%)");
const colorPink = new THREE.Color("hsl(306, 100%, 60%)");
const loader = new THREE.OBJLoader();
loader.load('image.obj');
const light = new THREE.PointLight(colorPink, 2);
const light2 = new THREE.PointLight(colorYellow, .5);
light.position.z = 20;
light.position.y = -20;
light.position.x = -40;
light2.position.z = 10;
light2.position.y = 20;
light2.position.x = 40;
scene.add(light);
scene.add(light2);
scene.add(loader);
camera.position.z = 55;
renderer.render (scene, camera);
oraz index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/OBJLoader.js"></script>
<script src="main.js"></script>
</body>
</html>