|
|
@@ -1,148 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
- <head>
|
|
|
- <title>three.js - skinning - simple</title>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
- <link type="text/css" rel="stylesheet" href="main.css">
|
|
|
- </head>
|
|
|
- <body>
|
|
|
-
|
|
|
- <div id="info">
|
|
|
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - simple skinning
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Import maps polyfill -->
|
|
|
- <!-- Remove this when import maps will be widely supported -->
|
|
|
- <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
|
|
|
-
|
|
|
- <script type="importmap">
|
|
|
- {
|
|
|
- "imports": {
|
|
|
- "three": "../build/three.module.js",
|
|
|
- "three/addons/": "./jsm/"
|
|
|
- }
|
|
|
- }
|
|
|
- </script>
|
|
|
-
|
|
|
- <script type="module">
|
|
|
-
|
|
|
- import * as THREE from 'three';
|
|
|
-
|
|
|
- import Stats from 'three/addons/libs/stats.module.js';
|
|
|
-
|
|
|
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
|
- import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
|
|
-
|
|
|
- THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
|
|
|
-
|
|
|
- let stats, mixer, camera, scene, renderer, clock;
|
|
|
-
|
|
|
- init();
|
|
|
- animate();
|
|
|
-
|
|
|
- function init() {
|
|
|
-
|
|
|
- const container = document.createElement( 'div' );
|
|
|
- document.body.appendChild( container );
|
|
|
-
|
|
|
- camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
- camera.position.set( 18, 6, 18 );
|
|
|
-
|
|
|
- scene = new THREE.Scene();
|
|
|
- scene.background = new THREE.Color( 0xa0a0a0 );
|
|
|
- scene.fog = new THREE.Fog( 0xa0a0a0, 70, 100 );
|
|
|
-
|
|
|
- clock = new THREE.Clock();
|
|
|
-
|
|
|
- // ground
|
|
|
-
|
|
|
- const geometry = new THREE.PlaneGeometry( 500, 500 );
|
|
|
- const material = new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } );
|
|
|
-
|
|
|
- const ground = new THREE.Mesh( geometry, material );
|
|
|
- ground.position.set( 0, - 5, 0 );
|
|
|
- ground.rotation.x = - Math.PI / 2;
|
|
|
- ground.receiveShadow = true;
|
|
|
- scene.add( ground );
|
|
|
-
|
|
|
- const grid = new THREE.GridHelper( 500, 100, 0x000000, 0x000000 );
|
|
|
- grid.position.y = - 5;
|
|
|
- grid.material.opacity = 0.2;
|
|
|
- grid.material.transparent = true;
|
|
|
- scene.add( grid );
|
|
|
-
|
|
|
- // lights
|
|
|
-
|
|
|
- const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.6 );
|
|
|
- hemiLight.position.set( 0, 200, 0 );
|
|
|
- scene.add( hemiLight );
|
|
|
-
|
|
|
- const dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
|
|
|
- dirLight.position.set( 0, 20, 10 );
|
|
|
- dirLight.castShadow = true;
|
|
|
- dirLight.shadow.camera.top = 18;
|
|
|
- dirLight.shadow.camera.bottom = - 10;
|
|
|
- dirLight.shadow.camera.left = - 12;
|
|
|
- dirLight.shadow.camera.right = 12;
|
|
|
- scene.add( dirLight );
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- const loader = new GLTFLoader();
|
|
|
- loader.load( './models/gltf/SimpleSkinning.gltf', function ( gltf ) {
|
|
|
-
|
|
|
- scene.add( gltf.scene );
|
|
|
-
|
|
|
- gltf.scene.traverse( function ( child ) {
|
|
|
-
|
|
|
- if ( child.isSkinnedMesh ) child.castShadow = true;
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- mixer = new THREE.AnimationMixer( gltf.scene );
|
|
|
- mixer.clipAction( gltf.animations[ 0 ] ).play();
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- renderer = new THREE.WebGLRenderer();
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
|
|
|
- renderer.shadowMap.enabled = true;
|
|
|
- container.appendChild( renderer.domElement );
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- stats = new Stats();
|
|
|
- container.appendChild( stats.dom );
|
|
|
-
|
|
|
- const controls = new OrbitControls( camera, renderer.domElement );
|
|
|
- controls.enablePan = false;
|
|
|
- controls.minDistance = 5;
|
|
|
- controls.maxDistance = 50;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function animate() {
|
|
|
-
|
|
|
- requestAnimationFrame( animate );
|
|
|
-
|
|
|
- if ( mixer ) mixer.update( clock.getDelta() );
|
|
|
-
|
|
|
- render();
|
|
|
- stats.update();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function render() {
|
|
|
-
|
|
|
- renderer.render( scene, camera );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
Michael Herzog
