three实现三维箭头火箭发射转圈喷气动画效果代码

代码语言:html

所属分类:动画

代码描述:three实现三维箭头火箭发射转圈喷气动画效果代码

代码标签: three 三维 箭头 火箭 发射 转圈 喷气 动画

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    body {
    margin: 0;
    padding: 0;
}
</style>
</head>


<body>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.144.js"></script>
<script >
      let renderer, camera, scene;
let playerObject;
let exhaustGroup;
let exhaustGeometry;
let exhaustMaterial;

function init() {
    exhaustGeometry = new THREE.DodecahedronGeometry(2);
    exhaustMaterial = new THREE.MeshStandardMaterial({
        color: 0x996666,
        opacity: 0.3
    });

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    );
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    camera.position.z = 20;
    camera.position.y = 70;

    var point = new THREE.Vector3(0, 60, 0);
    camera.lookAt(point);

    const playerGeometry = new THREE.ConeGeometry(10, 40, 6);
    const playerMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
    playerObject = new THREE.Mesh(playerGeometry, playerMaterial);
    playerObject.rotation.z = -1.57;

    scene.add(playerObject);

    exhaustGroup = new THREE.Group();
    scene.add(exhaustGroup);

    const ambientLight = new THREE.AmbientLight(0x999999, 1); // soft white light
    scene.add(ambientLight);

    light = new THREE.PointLight(0x999999, 2, 0);
    light.position.set(30, 300, 300);
    scene.add(light);
}

var keys = [];
keys[38] = true;
keys[39] = true;
//var focalLength = 300;
var fov = 500;
//var fov = 10000;
var camera_y = 115;
var gravity = 0.05;
var player = {
    x: 0,
    y: 30,
    z: -200,
    vel: 0,
    yVel: 0,
    maxVel: 6,
    slowdown: 0.1,
    speedup: 2,
    brake: 2,
    bearing: 0,
    pitch: 0,
    terminal_velocity: 3,
    steering: {
        speedup: 1,
        max: 5,
        vel: 0,
        slowdown: 0.5
    },
    pitching: {
        speedup: 1,
        max: 5,
        vel: 0,
        slowdown: 0.5
    },
    exhaust_velocity: 8,
    exhaust_max_age: 30,
    EXHAUST_OUTPUT: 40,
    exhaust_idle_output: 1,
    exhaust_idle_velocity: 3,
    exhaust_particles: [],
    exhaust: function (thrust) {
        //console.log("exhausting.");
        var exhaust_radians =
            (((player.bearing + 160 + Math.floor(Math.random() * 40)) % 360) *
                Math.PI) /
            180;

        if (thrust == true && exhaustGroup.children.length < 1000) {
            let exhaustObject = new THREE.Mesh(
                exhaustGeometry,
                exhaustMaterial
            );
            exhaustObject.life = 20 + (Math.random() * 2 - 1) * 20;
            exhaustObject.remaining_life = exhaustObject.life;
            exhaustObject.position.x = player.x - Math.cos((player.bearing * Math.PI) / 180) * 20;
            exhaustObject.position.y = player.y;
            exhaustObject.position.z = player.z - Math.sin((player.bearing * Math.PI) / 180) * 20;
            exhaustObject.rotation.x = (Math.random() * 2 - 1) * 90;
            exhaustObject.rotation.y = (Math.random() * 2 - 1) * 90;
            exhaustObject.rotation.z = (Math.random() * 2 - 1) * 90;
            exhaustObject.velocity_x = (Math.random() * 2 - 1) * 0.5;
            exhaustObject.velocity_y = (Math.random() * 2 - 1) * 0.5;
            exhaustObject.velocity_z = (Math.random() * 2 - 1) * 0.5;

            exhaustGroup.add(exhaustObject);
        }
    }
};
var pixels = [];
pixels.push({ x: 0, y: 0, z: 0 });
//for (var x = -350; x < 350; x+=20) {
//	for (var z = -350; z < 150; z+=20) {
//		pixels.push({x: x, y: 0, z: z});
//	}

function update() {
    if (keys[39]) {
        // right arrow
        if (player.steering.vel > -player.steering.max && player.vel > 0) {
            //player.steering.vel -= player.vel%player.maxVel;
           .........完整代码请登录后点击上方下载按钮下载查看

网友评论0