carstenbund · June 4, 2021 06:03 · carstenbund · Apr 18, 2021 · carstenbund · Apr 18, 2021
diff --git a/index.html b/index.html
 <!-- Licensed under a BSD license. See license.html for license -->
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>title here</title>
    <meta property="og:image" content="thumbnail.jpg" />
    <link rel="stylesheet" type="text/css" href="style.css">
  
  </head>
  <body>
    <canvas id="three_canvas"></canvas>
    <script src="js/three.js"></script> 
   <script src="js/OrbitControls.js"></script>
   
 	<script>
 	
  // does not work with hicetnunc
 	//import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
 	//import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';
 	
 	
  
  function main() {
    const canvas = document.querySelector('#three_canvas');
    const renderer = new THREE.WebGLRenderer({canvas});
    
    const fov = 90;
    const aspect = 2;  // the canvas default
    const near = 0.1;
    const far = 100;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 3;
    
 	
 	
    const controls = new THREE.OrbitControls(camera, canvas);
    controls.target.set(0, 0, 0);
    controls.autoRotate = true;
    controls.update();
    
 	// stop autorotate after the first interaction
 	controls.addEventListener('start', function(){
 	  controls.autoRotate = false;
 	});
 	
 	// stop autorotate after the first interaction
 	controls.addEventListener('start', function(){
 	  clearTimeout(autorotateTimeout);
 	  controls.autoRotate = false;
 	});

 	// restart autorotate after the last interaction & an idle time has passed
 	controls.addEventListener('end', function(){
 	  autorotateTimeout = setTimeout(function(){
 	    controls.autoRotate = true;
 	  }, 3000);
 	});
 	
    const scene = new THREE.Scene();
    
    {
      const color = 0xFFFFFF;
      const intensity = 1;
      const light = new THREE.DirectionalLight(color, intensity);
      light.position.set(-1, 2, 4);
      scene.add(light);
    }
    
    const boxWidth = 1;
    const boxHeight = 1;
    const boxDepth = 1;
    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
    
    function makeInstance(geometry, color, x) {
      const material = new THREE.MeshPhongMaterial({color});
      
    }
    
    {
      const loader = new THREE.CubeTextureLoader();
      const texture = loader.load([
        '360-cube_r.jpg',  // right
        '360-cube_l.jpg',  // left
        '360-cube_u.jpg',  // up
        '360-cube_d.jpg',  // down
        '360-cube_f.jpg',  // front
        '360-cube_b.jpg'   // back
      ]);
      scene.background = texture;
    }
    
    function resizeRendererToDisplaySize(renderer) {
      const canvas = renderer.domElement;
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      const needResize = canvas.width !== width || canvas.height !== height;
      if (needResize) {
        renderer.setSize(width, height, false);
      }
      return needResize;
    }
    
    function render(time) {
      time *= 0.001;
      
      if (resizeRendererToDisplaySize(renderer)) {
        const canvas = renderer.domElement;
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
      }
      
      controls.update();
 	  
      renderer.render(scene, camera);
      
      requestAnimationFrame(render);
    }
    
    requestAnimationFrame(render);
  }
    
  main();

  </script>

    <script src="script.js"></script>
  
  </body>
 </html>
	<!-- Licensed under a BSD license. See license.html for license -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
	<title>title here</title>
	<meta property="og:image" content="thumbnail.jpg" />
	<link rel="stylesheet" type="text/css" href="style.css">

	</head>
	<body>
	<canvas id="three_canvas"></canvas>
	<script src="js/three.js"></script>
	<script src="js/OrbitControls.js"></script>

	<script>

	// does not work with hicetnunc
	//import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
	//import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';



	function main() {
	const canvas = document.querySelector('#three_canvas');
	const renderer = new THREE.WebGLRenderer({canvas});

	const fov = 90;
	const aspect = 2; // the canvas default
	const near = 0.1;
	const far = 100;
	const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
	camera.position.z = 3;



	const controls = new THREE.OrbitControls(camera, canvas);
	controls.target.set(0, 0, 0);
	controls.autoRotate = true;
	controls.update();

	// stop autorotate after the first interaction
	controls.addEventListener('start', function(){
	controls.autoRotate = false;
	});

	// stop autorotate after the first interaction
	controls.addEventListener('start', function(){
	clearTimeout(autorotateTimeout);
	controls.autoRotate = false;
	});

	// restart autorotate after the last interaction & an idle time has passed
	controls.addEventListener('end', function(){
	autorotateTimeout = setTimeout(function(){
	controls.autoRotate = true;
	}, 3000);
	});

	const scene = new THREE.Scene();

	{
	const color = 0xFFFFFF;
	const intensity = 1;
	const light = new THREE.DirectionalLight(color, intensity);
	light.position.set(-1, 2, 4);
	scene.add(light);
	}

	const boxWidth = 1;
	const boxHeight = 1;
	const boxDepth = 1;
	const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

	function makeInstance(geometry, color, x) {
	const material = new THREE.MeshPhongMaterial({color});

	}

	{
	const loader = new THREE.CubeTextureLoader();
	const texture = loader.load([
	'360-cube_r.jpg', // right
	'360-cube_l.jpg', // left
	'360-cube_u.jpg', // up
	'360-cube_d.jpg', // down
	'360-cube_f.jpg', // front
	'360-cube_b.jpg' // back
	]);
	scene.background = texture;
	}

	function resizeRendererToDisplaySize(renderer) {
	const canvas = renderer.domElement;
	const width = canvas.clientWidth;
	const height = canvas.clientHeight;
	const needResize = canvas.width !== width \|\| canvas.height !== height;
	if (needResize) {
	renderer.setSize(width, height, false);
	}
	return needResize;
	}

	function render(time) {
	time *= 0.001;

	if (resizeRendererToDisplaySize(renderer)) {
	const canvas = renderer.domElement;
	camera.aspect = canvas.clientWidth / canvas.clientHeight;
	camera.updateProjectionMatrix();
	}

	controls.update();

	renderer.render(scene, camera);

	requestAnimationFrame(render);
	}

	requestAnimationFrame(render);
	}

	main();

	</script>

	<script src="script.js"></script>

	</body>
	</html>