Как добавить 3д модель на сайт?

Question

[DonTraffic]

Я пытаюсь добавить 3д планету на сайт и вращать её.
Использую Three.js и ещё пару библиотек для загрузки.
Но пока выходит запустить модель только нарисованную через сам браузер.
Пользуюсь я локальным сервером, через openServer.
Вот мой HTML:

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

    <script src='https://unpkg.com/three@0.99.0/build/three.min.js'></script>
    <script src='https://unpkg.com/three@0.99.0/examples/js/loaders/OBJLoader.js'></script>
    <script src='https://unpkg.com/three@0.99.0/examples/js/controls/OrbitControls.js'></script>

Вот мой JS:

window.onload = function () {
    var width = window.innerWidth;
    var height = window.innerHeight;

    var canvas = document.getElementById('canvas');
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);

    var renderer = new THREE.WebGLRenderer({canvas: canvas, alpha: true, antialias: true});
    renderer.setClearColor(0x000000, 0);

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
    camera.position.set(0, 0, 1000);

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

var OBJECT;
var OBJ_LOADER;

    OBJ_LOADER.load('model.obj', (object) => {
        object.scale.x = 0.3;
        object.scale.y = 0.3;
        object.scale.z = 0.3;
        object.rotation.x = -Math.PI / 2;
        object.position.y = -30;
    
        OBJECT = object;
        scene.add(OBJECT);
    });

    function loop() {
        mesh.rotation.y += Math.PI/900;

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

    loop();

}

Answer 1

[Владимир]

Тебе нужно добавить сферу, обтянуть ее картой планеты и для пущего реализма добавить карту нормалей, чтобы сделать рельеф
https://riptutorial.com/three-js/example/28900/cre...