How to add a 3d model to the site?

Question

JavaScript

I'm trying to add a 3d planet to a website and rotate it.
I'm using Three.js and a couple of other libraries to download.
But for now, it turns out to run the model only drawn through the browser itself.
I use a local server through openServer.
Here is my HTML:

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

    <script src='https://unpkg.com/[email protected]/build/three.min.js'></script>
    <script src='https://unpkg.com/[email protected]/examples/js/loaders/OBJLoader.js'></script>
    <script src='https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js'></script>

Here is my 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

You need to add a sphere, cover it with a planet map and add a normal map to make it
more realistic https://riptutorial.com/three-js/example/28900/cre...