three制作一个三维场景空间控制人物行走跳跃扔球小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three制作一个三维场景空间控制人物行走跳跃扔球小游戏代码，鼠标移动环顾四周，点击鼠标扔球，WASD键控制人物视角移动，按空格跳跃。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
        <head>
        
                <meta charset=utf-8 />
                <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

        </head>
        <body>
                <div id="info">
                鼠标移动环顾四周，点击鼠标扔球<br/>
                        WASD键控制人物视角移动，按空格跳跃
                </div>
                <div id="container"></div>

                <!-- Import maps polyfill -->
                <!-- Remove this when import maps will be widely supported -->
                <script async type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.3.6.js"></script>


                <script type="importmap">
                        {
                                "imports": {
                                        "three": "//repo.bfw.wiki/bfwtool/build/three.module.js"
                                }
                        }
                </script>

                <script type="module">

                        import * as THREE from 'three';

                        import Stats from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/stats.module.js';


                        import { GLTFLoader } from '//repo.bfw.wiki/bfwtool/examples/jsm/loaders/GLTFLoader.js';

                        import { Octree } from '//repo.bfw.wiki/bfwtool/examples/jsm/math/Octree.js';
                        import { OctreeHelper } from '//repo.bfw.wiki/bfwtool/examples/jsm/helpers/OctreeHelper.js';

                        import { Capsule } from '//repo.bfw.wiki/bfwtool/examples/jsm/math/Capsule.js';

                        import { GUI } from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/lil-gui.module.min.js';

                        const clock = new THREE.Clock();

                        const scene = new THREE.Scene();
                        scene.background = new THREE.Color( 0x88ccee );
                        scene.fog = new THREE.Fog( 0x88ccee, 0, 50 );

                        const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
                        camera.rotation.order = 'YXZ';

                        const fillLight1 = new THREE.HemisphereLight( 0x4488bb, 0x002244, 0.5 );
                        fillLight1.position.set( 2, 1, 1 );
                        scene.add( fillLight1 );

                        const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
                        directionalLight.position.set( - 5, 25, - 1 );
                        directionalLight.castShadow = true;
                        directionalLight.shadow.camera.near = 0.01;
                        directionalLight.shadow.camera.far = 500;
                        directionalLight.shadow.camera.right = 30;
                        directionalLight.shadow.camera.left = - 30;
                        directionalLight.shadow.camera.top      = 30;
                        directionalLight.shadow.camera.bottom = - 30;
                        directionalLight.shadow.mapSize.width = 1024;
                        directionalLight.shadow.mapSize.height = 1024;
                        directionalLight.shadow.radius = 4;
                        directionalLight.shadow.bias = - 0.00006;
                        scene.add( directionalLight );

                        const container = document.getElementById( 'container' );

                        const renderer = new THREE.WebGLRenderer( { antialias: true } );
                        renderer.setPixelRatio( window.devicePixelRatio );
                        renderer.setSize( window.innerWidth, window.innerHeight );
                        renderer.shadowMap.enabled = true;
                        renderer.shadowMap.type = THREE.VSMShadowMap;
                        renderer.outputEncoding = THREE.sRGBEncoding;
                        renderer.toneMapping = THREE.ACESFilmicToneMapping;
                        container.appendChild( renderer.domElement );

                        const stats = new Stats();
                        stats.domElement.style.position = 'absolute';
                        stats.domElement.style.top = '0px';
                        container.appendChild( stats.domElement );

                        const GRAVITY = 30;

                        const NUM_SPHERES = 100;
                        const SPHERE_RADIUS = 0.2;

                        const STEPS_PER_FRAME = 5;

                        const sphereGeometry = new THREE.IcosahedronGeometry( SPHERE_RADIUS, 5 );
                        const sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xbbbb44 } );

                        const spheres = [];
                        let sphereIdx = 0;

                        for ( let i = 0; i < NUM_SPHERES; i ++ ) {

                                const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
                                sphere.castShadow = true;
                                sphere.receiveShadow = true;

                                scene.add( sphere );

                                spheres.push( {
                                        mesh: sphere,
                                        collider: new THREE.Sphere( new THREE.Vector3( 0, - 100, 0 ), SPHERE_RADIUS ),
                                        velocity: new THREE.Vector3()
                                } );

                        }

                        const worldOctree = new Octree();

                        const playerCollider = new Capsule( new THREE.Vector3( 0, 0.35, 0 ), new THREE.Vector3( 0, 1, 0 ), 0.35 );

                        const playerVelocity = new.........完整代码请登录后点击上方下载按钮下载查看