123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320 |
- <!-- 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>Three.js - Scenegraph - Tank</title>
- <style>
- html, body {
- height: 100%;
- margin: 0;
- }
- #c {
- width: 100%;
- height: 100%;
- display: block;
- }
- #info {
- position: absolute;
- left: 1em;
- top: 1em;
- background: rgba(0,0,0,.8);
- padding: .5em;
- color: white;
- font-family: monospace;
- }
- </style>
- </head>
- <body>
- <canvas id="c"></canvas>
- <div id="info"></div>
- </body>
- <script type="importmap">
- {
- "imports": {
- "three": "../../build/three.module.js"
- }
- }
- </script>
- <script type="module">
- import * as THREE from 'three';
- function main() {
- const canvas = document.querySelector( '#c' );
- const renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
- renderer.setClearColor( 0xAAAAAA );
- renderer.shadowMap.enabled = true;
- function makeCamera( fov = 40 ) {
- const aspect = 2; // the canvas default
- const zNear = 0.1;
- const zFar = 1000;
- return new THREE.PerspectiveCamera( fov, aspect, zNear, zFar );
- }
- const camera = makeCamera();
- camera.position.set( 8, 4, 10 ).multiplyScalar( 3 );
- camera.lookAt( 0, 0, 0 );
- const scene = new THREE.Scene();
- {
- const light = new THREE.DirectionalLight( 0xffffff, 3 );
- light.position.set( 0, 20, 0 );
- scene.add( light );
- light.castShadow = true;
- light.shadow.mapSize.width = 2048;
- light.shadow.mapSize.height = 2048;
- const d = 50;
- light.shadow.camera.left = - d;
- light.shadow.camera.right = d;
- light.shadow.camera.top = d;
- light.shadow.camera.bottom = - d;
- light.shadow.camera.near = 1;
- light.shadow.camera.far = 50;
- light.shadow.bias = 0.001;
- }
- {
- const light = new THREE.DirectionalLight( 0xffffff, 3 );
- light.position.set( 1, 2, 4 );
- scene.add( light );
- }
- const groundGeometry = new THREE.PlaneGeometry( 50, 50 );
- const groundMaterial = new THREE.MeshPhongMaterial( { color: 0xCC8866 } );
- const groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
- groundMesh.rotation.x = Math.PI * - .5;
- groundMesh.receiveShadow = true;
- scene.add( groundMesh );
- const carWidth = 4;
- const carHeight = 1;
- const carLength = 8;
- const tank = new THREE.Object3D();
- scene.add( tank );
- const bodyGeometry = new THREE.BoxGeometry( carWidth, carHeight, carLength );
- const bodyMaterial = new THREE.MeshPhongMaterial( { color: 0x6688AA } );
- const bodyMesh = new THREE.Mesh( bodyGeometry, bodyMaterial );
- bodyMesh.position.y = 1.4;
- bodyMesh.castShadow = true;
- tank.add( bodyMesh );
- const tankCameraFov = 75;
- const tankCamera = makeCamera( tankCameraFov );
- tankCamera.position.y = 3;
- tankCamera.position.z = - 6;
- tankCamera.rotation.y = Math.PI;
- bodyMesh.add( tankCamera );
- const wheelRadius = 1;
- const wheelThickness = .5;
- const wheelSegments = 6;
- const wheelGeometry = new THREE.CylinderGeometry(
- wheelRadius, // top radius
- wheelRadius, // bottom radius
- wheelThickness, // height of cylinder
- wheelSegments );
- const wheelMaterial = new THREE.MeshPhongMaterial( { color: 0x888888 } );
- const wheelPositions = [
- [ - carWidth / 2 - wheelThickness / 2, - carHeight / 2, carLength / 3 ],
- [ carWidth / 2 + wheelThickness / 2, - carHeight / 2, carLength / 3 ],
- [ - carWidth / 2 - wheelThickness / 2, - carHeight / 2, 0 ],
- [ carWidth / 2 + wheelThickness / 2, - carHeight / 2, 0 ],
- [ - carWidth / 2 - wheelThickness / 2, - carHeight / 2, - carLength / 3 ],
- [ carWidth / 2 + wheelThickness / 2, - carHeight / 2, - carLength / 3 ],
- ];
- const wheelMeshes = wheelPositions.map( ( position ) => {
- const mesh = new THREE.Mesh( wheelGeometry, wheelMaterial );
- mesh.position.set( ...position );
- mesh.rotation.z = Math.PI * .5;
- mesh.castShadow = true;
- bodyMesh.add( mesh );
- return mesh;
- } );
- const domeRadius = 2;
- const domeWidthSubdivisions = 12;
- const domeHeightSubdivisions = 12;
- const domePhiStart = 0;
- const domePhiEnd = Math.PI * 2;
- const domeThetaStart = 0;
- const domeThetaEnd = Math.PI * .5;
- const domeGeometry = new THREE.SphereGeometry(
- domeRadius, domeWidthSubdivisions, domeHeightSubdivisions,
- domePhiStart, domePhiEnd, domeThetaStart, domeThetaEnd );
- const domeMesh = new THREE.Mesh( domeGeometry, bodyMaterial );
- domeMesh.castShadow = true;
- bodyMesh.add( domeMesh );
- domeMesh.position.y = .5;
- const turretWidth = .1;
- const turretHeight = .1;
- const turretLength = carLength * .75 * .2;
- const turretGeometry = new THREE.BoxGeometry(
- turretWidth, turretHeight, turretLength );
- const turretMesh = new THREE.Mesh( turretGeometry, bodyMaterial );
- const turretPivot = new THREE.Object3D();
- turretMesh.castShadow = true;
- turretPivot.scale.set( 5, 5, 5 );
- turretPivot.position.y = .5;
- turretMesh.position.z = turretLength * .5;
- turretPivot.add( turretMesh );
- bodyMesh.add( turretPivot );
- const turretCamera = makeCamera();
- turretCamera.position.y = .75 * .2;
- turretMesh.add( turretCamera );
- const targetGeometry = new THREE.SphereGeometry( .5, 6, 3 );
- const targetMaterial = new THREE.MeshPhongMaterial( { color: 0x00FF00, flatShading: true } );
- const targetMesh = new THREE.Mesh( targetGeometry, targetMaterial );
- const targetOrbit = new THREE.Object3D();
- const targetElevation = new THREE.Object3D();
- const targetBob = new THREE.Object3D();
- targetMesh.castShadow = true;
- scene.add( targetOrbit );
- targetOrbit.add( targetElevation );
- targetElevation.position.z = carLength * 2;
- targetElevation.position.y = 8;
- targetElevation.add( targetBob );
- targetBob.add( targetMesh );
- const targetCamera = makeCamera();
- const targetCameraPivot = new THREE.Object3D();
- targetCamera.position.y = 1;
- targetCamera.position.z = - 2;
- targetCamera.rotation.y = Math.PI;
- targetBob.add( targetCameraPivot );
- targetCameraPivot.add( targetCamera );
- // Create a sine-like wave
- const curve = new THREE.SplineCurve( [
- new THREE.Vector2( - 10, 0 ),
- new THREE.Vector2( - 5, 5 ),
- new THREE.Vector2( 0, 0 ),
- new THREE.Vector2( 5, - 5 ),
- new THREE.Vector2( 10, 0 ),
- new THREE.Vector2( 5, 10 ),
- new THREE.Vector2( - 5, 10 ),
- new THREE.Vector2( - 10, - 10 ),
- new THREE.Vector2( - 15, - 8 ),
- new THREE.Vector2( - 10, 0 ),
- ] );
- const points = curve.getPoints( 50 );
- const geometry = new THREE.BufferGeometry().setFromPoints( points );
- const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
- const splineObject = new THREE.Line( geometry, material );
- splineObject.rotation.x = Math.PI * .5;
- splineObject.position.y = 0.05;
- scene.add( splineObject );
- 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;
- }
- const targetPosition = new THREE.Vector3();
- const tankPosition = new THREE.Vector2();
- const tankTarget = new THREE.Vector2();
- const cameras = [
- { cam: camera, desc: 'detached camera', },
- { cam: turretCamera, desc: 'on turret looking at target', },
- { cam: targetCamera, desc: 'near target looking at tank', },
- { cam: tankCamera, desc: 'above back of tank', },
- ];
- const infoElem = document.querySelector( '#info' );
- function render( time ) {
- time *= 0.001;
- if ( resizeRendererToDisplaySize( renderer ) ) {
- const canvas = renderer.domElement;
- cameras.forEach( ( cameraInfo ) => {
- const camera = cameraInfo.cam;
- camera.aspect = canvas.clientWidth / canvas.clientHeight;
- camera.updateProjectionMatrix();
- } );
- }
- // move target
- targetOrbit.rotation.y = time * .27;
- targetBob.position.y = Math.sin( time * 2 ) * 4;
- targetMesh.rotation.x = time * 7;
- targetMesh.rotation.y = time * 13;
- targetMaterial.emissive.setHSL( time * 10 % 1, 1, .25 );
- targetMaterial.color.setHSL( time * 10 % 1, 1, .25 );
- // move tank
- const tankTime = time * .05;
- curve.getPointAt( tankTime % 1, tankPosition );
- curve.getPointAt( ( tankTime + 0.01 ) % 1, tankTarget );
- tank.position.set( tankPosition.x, 0, tankPosition.y );
- tank.lookAt( tankTarget.x, 0, tankTarget.y );
- // face turret at target
- targetMesh.getWorldPosition( targetPosition );
- turretPivot.lookAt( targetPosition );
- // make the turretCamera look at target
- turretCamera.lookAt( targetPosition );
- // make the targetCameraPivot look at the at the tank
- tank.getWorldPosition( targetPosition );
- targetCameraPivot.lookAt( targetPosition );
- wheelMeshes.forEach( ( obj ) => {
- obj.rotation.x = time * 3;
- } );
- const camera = cameras[ time * .25 % cameras.length | 0 ];
- infoElem.textContent = camera.desc;
- renderer.render( scene, camera.cam );
- requestAnimationFrame( render );
- }
- requestAnimationFrame( render );
- }
- main();
- </script>
- </html>
|