images

by minhnhutttt

HTML

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        </head>
        <style>
        </style>
        <body>

            <div id="container"></div>


            <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>

        </body>

    </html>

JavaScript

// Scene
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  var renderer = new THREE.WebGLRenderer({
    antialias: 1
  });

  renderer.setClearColor(0xff1100);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  scene.add( new THREE.AmbientLight( 0x404040 ) );

  const pointLight = new THREE.PointLight( 0xffffff, 1 );
  camera.add( pointLight );

  scene.fog = new THREE.Fog(0x355060, 8, 20);

  // Create vertex points
  var mesh = new THREE.IcosahedronGeometry(12, 10); // radius, detail
  var vertices = mesh.vertices;
  var positions = new Float32Array(vertices.length * 3);
  for (var i = 0, l = vertices.length; i < l; i++) {
    vertices[i].toArray(positions, i * 3);
  }
  const sprite = new THREE.TextureLoader().load( 'https://i.postimg.cc/52sGdj2k/disc.png' );
  var geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

  var material = new THREE.PointsMaterial({
    size: 0.4,
    map: sprite,
    depthTest:!1,
  });
  var points = new THREE.Points(geometry, material);

  var object = new THREE.Object3D();

  object.add(points);



  object.add(new THREE.Mesh(
    mesh,
    new THREE.MeshPhongMaterial({
      color: 0xFFFFFF,
      emissive: 0x355060,
      wireframe: true,
      transparent: true,
      side: THREE.BackSide
    })

  ));

  scene.add(object);
  scene.background = new THREE.Color( 'black' );

  camera.position.z = 20;

  var render = function() {
    requestAnimationFrame(render);

    object.rotation.x += 0.0001;
    object.rotation.y += 0.0001;

    renderer.render(scene, camera);
  };

  render();