<!DOCTYPE html>
<html lang="en" class="noScroll">
<body class="loading demo-1">
<style>
body,html {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
}
canvas {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
outline: none;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
</style>
<script src="https://ui-unicorn.co.uk/game-lesson-1/js/jquery-3.4.1.min.js"></script>
</body>
</html> 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";
import { gsap } from "https://ui-unicorn.co.uk/game-lesson-1/esm/gsap-core.js";
var container, stats, controls;
var camera, scene, renderer, model, plane;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xe9425f );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
camera.position.set( - 1.8, 0.9, 2.7 );
var ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 );
scene.add( ambientLight );
var spotLight = new THREE.SpotLight( 0xffffff, 3);
spotLight.position.set( 500, 400, 200 );
spotLight.angle = 0.4;
spotLight.penumbra = 0.05;
spotLight.decay = 1;
spotLight.distance = 2000;
spotLight.castShadow = true;
scene.add( spotLight );
spotLight.target.position.set( 3, 0, - 3 );
scene.add( spotLight.target );
var lightHelper = new THREE.SpotLightHelper( spotLight );
// scene.add( lightHelper );
// model
var loader = new GLTFLoader();
loader.load( 'https://ui-unicorn.co.uk/killacarb00000.glb', function ( gltf ) {
model = gltf.scene;
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
}
} );
// automatically center model and adjust camera
const box = new THREE.Box3().setFromObject( gltf.scene );
const size = box.getSize( new THREE.Vector3() ).length();
const center = box.getCenter( new THREE.Vector3() );
gltf.scene.scale.set(1.2, 1.2, 1.2);
gltf.scene.position.x += ( gltf.scene.position.x - center.x );
gltf.scene.position.y += ( gltf.scene.position.y - center.y );
gltf.scene.position.z += ( gltf.scene.position.z - center.z );
camera.near = size / 100;
camera.far = size * 100;
camera.updateProjectionMatrix();
camera.position.copy( center );
camera.position.x += size / 2.0;
camera.position.y += size / 5.0;
camera.position.z += size / 2.0;
camera.lookAt( center );
console.log( camera.position );
controls.maxDistance = size * 10;
controls.update();
scene.add( gltf.scene );
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.GammaEncoding
renderer.gammaFactor = 2.2;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
const planeGeometry = new THREE.PlaneGeometry( 55, 55, 57, 57 );
const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xe9425f } )
plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.rotation.set(-1.5708,0,0);
plane.position.y = -2.9526;
plane.receiveShadow = true;
scene.add( plane );
window.addEventListener( 'resize', onWindowResize, false );
controls = new OrbitControls(camera, renderer.domElement);
controls.enableKeys = false;
controls.enableZoom = false;
controls.enableDamping = true;
controls.maxPolarAngle = 1.55;
controls.minPolarAngle = 1.55;
controls.dampingFactor = 0.04;
controls.autoRotate = false;
controls.rotateSpeed = 0.015;
controls.minDistance = 2;
controls.maxDistance = 2;
controls.enabled = true;
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
controls.update();
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
$(document).on("click touchstart tap", "body", function () {
gsap.to(camera.position, {
duration: 3,
x: 2.8,
z:12,
onUpdate: function () {
gsap.to(camera, {
duration: 2,
zoom: 2.2,
onUpdate: function () {
camera.updateProjectionMatrix();
controls.enabled = true;
},
});
camera.updateProjectionMatrix();
controls.enabled = true;
},
});
gsap.to(model.position, {
duration: 3,
x: 0,
onUpdate: function () {
camera.updateProjectionMatrix();
controls.enabled = true;
},
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.