import * as THREE from "https://ui-unicorn.co.uk/game-lesson-1/js/three.module.js";
            import TWEEN from "https://ui-unicorn.co.uk/game-lesson-1/js/tween.esm.js";
            import { RGBELoader } from "https://ui-unicorn.co.uk/game-lesson-1/js/RGBELoader.js";
            import { OrbitControls } from "https://ui-unicorn.co.uk/game-lesson-1/js/OrbitControls.js";
            import { GLTFLoader } from "https://ui-unicorn.co.uk/game-lesson-1/js/GLTFLoader.js";
            import { RoughnessMipmapper } from "https://ui-unicorn.co.uk/game-lesson-1/js/RoughnessMipmapper.js";
            import { CSS2DRenderer, CSS2DObject } from "https://ui-unicorn.co.uk/game-lesson-1/js/CSS2DRenderer.js";

            var container, controls;
            var camera, scene, renderer, loaderGL, time, mixer, mixer2, mixer3, mixer4, mixer6, mixer7, mixer8, mixer9, clock, labelRenderer;
            var raycaster, mouse, tween;
            var model, model2, model3, model4, model5, model6, model7, model8, model9;
            var cubefix, cube, cube2, cube3, cube4, cube5, character, Characterm, Monster0, score, gltfPlayer, gltfMonster, isZoomed, gltfC1, gltfC2, gltfC3, gltfC4, gltfC5;
            var action, action3, action0, action2, action4, action5, action6;
            var nearFog, farFog, densityFog, colorFog, colorFog2;
            var hotspotLabel1, hotspotLabel2, hotspotLabel3, hotspotLabel4;
            var materials = [],
                parameters;
            var mouseX = 0,
                mouseY = 0;
            var timerAnimate;
            var CH0, CH, CH3, CH4;
			 var game_loader_count = 0;
			 var observer, text, checkText, partcount, StartButton, ButtonStart;
			var fov, aspect, near, far;
			 var fraction, pointsPath, char, axis, up, newPosition, tangent, radians;

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

 	  fov = { value: 45};
     aspect = window.innerWidth / window.innerHeight;
     near = { value: 1};
     far = { value: 10000};
				   camera = new THREE.PerspectiveCamera(fov.value, aspect, near.value, far.value);
   camera.position.set(-8, 0, 0.1);

 


  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);

 
 
    fraction = 0;

    if (fraction > 1) {
      fraction = 0;
    }  
   up = new THREE.Vector3( 0, 1, 0 );
   axis = new THREE.Vector3( );


  pointsPath = new THREE.CurvePath();


  const bezierLine = new THREE.CubicBezierCurve3(
	new THREE.Vector3( -1, 0, 4 ),
	new THREE.Vector3( -0.5, 0, 4 ),
	new THREE.Vector3( 2.0, 0, 4 ),
	new THREE.Vector3( -1, 0, 9 ),
    	new THREE.Vector3( -1, 0, 17 ),
	new THREE.Vector3( -0.5, 0, 10 ),
	new THREE.Vector3( 2.0, 0, 6 ),
	new THREE.Vector3( -1, 0, 4),
    

    	
);
  

  
  
    pointsPath.add(bezierLine);
  
 
 const material = new THREE.MeshNormalMaterial();
  const coneGeom = new THREE.ConeGeometry(1, 2, 10);
  coneGeom.translate(0, 2.5, 0);
  
  
  const cone = new THREE.Mesh(coneGeom, material);
  const cylinder = new THREE.CylinderGeometry(0.4, 0.6, 3, 10);
  
  cylinder.merge(cone.geometry, cone.matrix);
  cylinder.scale(0.5, 0.5, 0.5);
  
  char = new THREE.Mesh(cylinder, material);
 scene.add(char);


     
             
             
             

   
   
   
  






  
    const material2 = new THREE.LineBasicMaterial({
	color: 0x9132a8
});
    const points = pointsPath.curves.reduce((p, d)=> [...p, ...d.getPoints(20)], []);
  
    const geometry2 = new THREE.BufferGeometry().setFromPoints( points );
  

    var liner = new THREE.Line( geometry2, material2 );
     scene.add(liner);
    
    

  
 


 
        
  const axesHelper = new THREE.AxesHelper( 0.5 );
  axesHelper.translateX(1);
  scene.add( axesHelper );
  

  controls = new OrbitControls(camera, renderer.domElement);

                controls.enableKeys = false;
                controls.enableZoom = false;
                controls.enableDamping = true;
                controls.maxPolarAngle = 1.4;
                controls.minPolarAngle = 1.2;
                controls.dampingFactor = 0.04;
                controls.autoRotate = false;
                controls.rotateSpeed = 0.015;
                controls.minDistance = 2;
                controls.maxDistance = 10;
				controls.enabled = false;

            }


function animate() {
    fraction +=0.001;
  
    newPosition = pointsPath.getPoint(fraction);
    tangent = pointsPath.getTangent(fraction);
    char.position.copy(newPosition);
    axis.crossVectors( up, tangent ).normalize();
    
     radians = Math.acos( up.dot( tangent ) );
    
    char.quaternion.setFromAxisAngle( axis, radians );
    
     controls.update();
                requestAnimationFrame(animate);
   renderer.render(scene, camera);
  
};
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.