mulderu/threejs-image-cube-list.html

## threejs-image-cube-list.html
<!DOCTYPE html>
<html>
  <head>
    <title>learningthree.js boiler plate for three.js</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />

    <script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <!-- three.js container -->
    <div id="container"></div>

    <script type="text/javascript">
      let camera, scene, renderer, controls;

      const objects = [];

      init();
      animate();

      function init() {
        camera = new THREE.PerspectiveCamera(
          70,
          window.innerWidth / window.innerHeight,
          0.01,
          20
        );
        camera.position.set(1, 1, 7);

        scene = new THREE.Scene();
        camera.lookAt(scene.position);

        const geometry = new THREE.BoxBufferGeometry(0.01, 2, 2);
        const material = new THREE.MeshNormalMaterial();

        const count = 5;

        const loader = new THREE.TextureLoader();
        const basicMap = "images/Series_4_7.png";
        // const basicMap =
        //   "http://13.124.188.167:8088/wholebody/wbimgx/DG560890838594100532MD4s/Series_4_7";

        for (let i = 0; i < count; i++) {
          let basicTextureMaterial = [0].map(
            d => new THREE.MeshBasicMaterial({ map: loader.load(basicMap) })
          );
          /// const mesh = new THREE.Mesh(geometry, material, texture);
          const mesh = new THREE.Mesh(geometry, basicTextureMaterial);

          const t = (i / count) * 2 * Math.PI;

          mesh.position.x = i * 1;
          // mesh.position.z = Math.sin(t) * 4;
          scene.add(mesh);
          objects.push(mesh);
        }

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.rotateSpeed = 0.5;
        controls.autoRotate = false;
        controls.autoRotateSpeed = 0.2;
      }

      function animate() {
        requestAnimationFrame(animate);

        // for (let object of objects) {
        //   object.rotation.z += 0.005;
        //   object.rotation.x += 0.002;
        // }

        controls.update();

        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>learningthree.js boiler plate for three.js</title>
	<meta charset="utf-8" />
	<meta
	name="viewport"
	content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
	/>

	<script src="https://threejs.org/build/three.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
	<style>
	body {
	margin: 0;
	}
	</style>
	</head>
	<body>
	<!-- three.js container -->
	<div id="container"></div>

	<script type="text/javascript">
	let camera, scene, renderer, controls;

	const objects = [];

	init();
	animate();

	function init() {
	camera = new THREE.PerspectiveCamera(
	70,
	window.innerWidth / window.innerHeight,
	0.01,
	20
	);
	camera.position.set(1, 1, 7);

	scene = new THREE.Scene();
	camera.lookAt(scene.position);

	const geometry = new THREE.BoxBufferGeometry(0.01, 2, 2);
	const material = new THREE.MeshNormalMaterial();

	const count = 5;

	const loader = new THREE.TextureLoader();
	const basicMap = "images/Series_4_7.png";
	// const basicMap =
	// "http://13.124.188.167:8088/wholebody/wbimgx/DG560890838594100532MD4s/Series_4_7";

	for (let i = 0; i < count; i++) {
	let basicTextureMaterial = [0].map(
	d => new THREE.MeshBasicMaterial({ map: loader.load(basicMap) })
	);
	/// const mesh = new THREE.Mesh(geometry, material, texture);
	const mesh = new THREE.Mesh(geometry, basicTextureMaterial);

	const t = (i / count) * 2 * Math.PI;

	mesh.position.x = i * 1;
	// mesh.position.z = Math.sin(t) * 4;
	scene.add(mesh);
	objects.push(mesh);
	}

	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.enableDamping = true;
	controls.rotateSpeed = 0.5;
	controls.autoRotate = false;
	controls.autoRotateSpeed = 0.2;
	}

	function animate() {
	requestAnimationFrame(animate);

	// for (let object of objects) {
	// object.rotation.z += 0.005;
	// object.rotation.x += 0.002;
	// }

	controls.update();

	renderer.render(scene, camera);
	}
	</script>
	</body>
	</html>