【three.js练习程序】创建简单物理地形

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ceshi</title>

    <style>

        body

        {

            margin: 0;

            overflow: hidden;

        }

    </style>

    <script src="./build/three.js"></script>

    <script src="./examples/js/libs/ammo.js"></script>

    <script src="./examples/js/controls/OrbitControls.js"></script>

    <script src="./examples/js/ImprovedNoise.js"></script>

</head>

<body>

    <div id="ThreeJs">

    </div>

    <script>

        var camera, controls, scene, renderer;

        var clock = new THREE.Clock();

        // 物理引擎相关变量

        var gravityConstant = -9.8;

        var collisionConfiguration;

        var dispatcher;

        var broadphase;

        var solver;

        var physicsWorld;

        var rigidBodies = [];

        var margin = 0.05;

        var transformAux1 = new Ammo.btTransform();

        var time = 0;

        // 高度场相关

        var terrainWidthExtents = 50;

        var terrainDepthExtents = 50;

        var terrainWidth = 50;

        var terrainDepth = 50;

        var terrainHalfWidth = terrainWidth / 2;

        var terrainHalfDepth = terrainDepth / 2;

        var terrainMaxHeight = 50;

        var terrainMinHeight = -20;

        var heightData = null;

        var ammoHeightData = null;

        init();

        animate();

        function init() {

            heightData = generateHeight(terrainWidth, terrainDepth);

            initGraphics();

            initPhysics();

            createObjects();

        }

        function initGraphics() {

            // three.js基本场景配置

            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);

            camera.position.x = 50;

            camera.position.y = 50;

            camera.position.z = 50;

            controls = new THREE.OrbitControls(camera);

            controls.target.y = 2;

            renderer = new THREE.WebGLRenderer();

            renderer.setClearColor(new THREE.Color("#bfd1e5"));

            renderer.shadowMapEnabled = true;

            renderer.setSize(window.innerWidth, window.innerHeight);

            // 场景

            scene = new THREE.Scene();

            // 环境光

            var ambientLight = new THREE.AmbientLight(0x404040);

            scene.add(ambientLight);

            // 线性光

            var light = new THREE.DirectionalLight(0xffffff, 1);

            light.position.set(-20, 20, 10);

            light.castShadow = true;

            var 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 = 2;

            light.shadow.camera.far = 50;

            light.shadow.mapSize.x = 1024;

            light.shadow.mapSize.y = 1024;

            scene.add(light);

            var axes = new THREE.AxisHelper(50);               //创建三轴表示

            scene.add(axes);

            // 添加窗口大小变化监听

            window.addEventListener('resize', onWindowResize, false);

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;

            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function initPhysics() {

            // bullet基本场景配置

            collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();

            dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);

            broadphase = new Ammo.btDbvtBroadphase();

            solver = new Ammo.btSequentialImpulseConstraintSolver();

            physicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, broadphase, solver, collisionConfiguration);

            physicsWorld.setGravity(new Ammo.btVector3(0, gravityConstant, 0));

        }

        function createObjects() {

            var pos = new THREE.Vector3();

            var quat = new THREE.Quaternion();

            //创建物理地形

            var geometry = new THREE.PlaneBufferGeometry(50, 50, terrainWidth - 1, terrainDepth - 1);

            geometry.rotateX(-Math.PI / 2);

            var vertices = geometry.attributes.position.array;

            for (var i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {

                // j + 1 because it is the y component that we modify

                vertices[j + 1] = heightData[i];

            }

            geometry.computeVertexNormals();

            var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xC7C7C7 });

            terrainMesh = new THREE.Mesh(geometry, groundMaterial);

            terrainMesh.receiveShadow = true;

            terrainMesh.castShadow = true;

            scene.add(terrainMesh);

            var groundShape = createTerrainShape(heightData);

            var groundTransform = new Ammo.btTransform();

            groundTransform.setIdentity();

            // 设置bullet计算时物体中心

            groundTransform.setOrigin(new Ammo.btVector3(0, (terrainMaxHeight + terrainMinHeight) / 2, 0));

            var groundMass = 0;

            var groundLocalInertia = new Ammo.btVector3(0, 0, 0);

            var groundMotionState = new Ammo.btDefaultMotionState(groundTransform);

            var groundBody = new Ammo.btRigidBody(new Ammo.btRigidBodyConstructionInfo(groundMass, groundMotionState, groundShape, groundLocalInertia));

            physicsWorld.addRigidBody(groundBody);

            //创建50个小球

            for (var i = 0; i < 50; i++) {

                var ballMass = 1.2;

                var ballRadius = 0.5;

                var ball = new THREE.Mesh(new THREE.SphereGeometry(ballRadius, 20, 20), createRendomColorObjectMeatrial());

                ball.castShadow = true;

                ball.receiveShadow = true;

                var ballShape = new Ammo.btSphereShape(ballRadius);

                ballShape.setMargin(margin);

                pos.set(Math.random() + 10, 3 * (i + 1) + 20, Math.random() - 10);

                quat.set(0, 0, 0, 1);

                createRigidBody(ball, ballShape, ballMass, pos, quat);

                ball.userData.physicsBody.setFriction(1.5);

            }

            //创建50个方块

            for (var i = 0; i < 50; i++) {

                pos.set(Math.random() - 10, 3 * (i + 1) + 20, Math.random() + 10);

                quat.set(0, 0, 0, 1);

                createParallellepiped(1, 1, 1, 1, pos, quat, createRendomColorObjectMeatrial());

            }

        }

        function createRendomColorObjectMeatrial() {

            var color = Math.floor(Math.random() * (1 << 24));

            return new THREE.MeshPhongMaterial({ color: color });

        }

        function createParallellepiped(sx, sy, sz, mass, pos, quat, material) {

            var threeObject = new THREE.Mesh(new THREE.BoxGeometry(sx, sy, sz, 1, 1, 1), material);

            threeObject.castShadow = true;

            threeObject.receiveShadow = true;

            var shape = new Ammo.btBoxShape(new Ammo.btVector3(sx * 0.5, sy * 0.5, sz * 0.5));

            shape.setMargin(margin);

            createRigidBody(threeObject, shape, mass, pos, quat);

            return threeObject;

        }

        function createRigidBody(threeObject, physicsShape, mass, pos, quat) {

            threeObject.position.copy(pos);

            threeObject.quaternion.copy(quat);

            var transform = new Ammo.btTransform();

            transform.setIdentity();

            transform.setOrigin(new Ammo.btVector3(pos.x, pos.y, pos.z));

            transform.setRotation(new Ammo.btQuaternion(quat.x, quat.y, quat.z, quat.w));

            var motionState = new Ammo.btDefaultMotionState(transform);

            var localInertia = new Ammo.btVector3(0, 0, 0);

            physicsShape.calculateLocalInertia(mass, localInertia);

            var rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, motionState, physicsShape, localInertia);

            var body = new Ammo.btRigidBody(rbInfo);

            threeObject.userData.physicsBody = body;

            scene.add(threeObject);

            if (mass > 0) {

                rigidBodies.push(threeObject);

                body.setActivationState(4);

            }

            physicsWorld.addRigidBody(body);

            return body;

        }

        function animate() {

            requestAnimationFrame(animate);

            var deltaTime = clock.getDelta();

            updatePhysics(deltaTime);

            controls.update(deltaTime);

            renderer.render(scene, camera);

            time += deltaTime;

        }

        function updatePhysics(deltaTime) {

            physicsWorld.stepSimulation(deltaTime);

            // 更新物体位置

            for (var i = 0, iL = rigidBodies.length; i < iL; i++) {

                var objThree = rigidBodies[i];

                var objPhys = objThree.userData.physicsBody;

                var ms = objPhys.getMotionState();

                if (ms) {

                    ms.getWorldTransform(transformAux1);

                    var p = transformAux1.getOrigin();

                    var q = transformAux1.getRotation();

                    objThree.position.set(p.x(), p.y(), p.z());

                    objThree.quaternion.set(q.x(), q.y(), q.z(), q.w());

                }

            }

        }

        function generateHeight(width, height) {

            var size = width * height, data = new Float32Array(size),

                perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 10;

            for (var j = 0; j < 4; j++) {

                for (var i = 0; i < size; i++) {

                    var x = i % width, y = ~ ~(i / width);

                    data[i] += Math.abs(perlin.noise(x / quality, y / quality, z) * quality);

                }

                quality *= 3;

            }

            return data;

        }

        // 生成物理引擎用高度场

        function createTerrainShape(heightData) {

            // This parameter is not really used, since we are using PHY_FLOAT height data type and hence it is ignored

            var heightScale = 1;

            // Up axis = 0 for X, 1 for Y, 2 for Z. Normally 1 = Y is used.

            var upAxis = 1;

            // hdt, height data type. "PHY_FLOAT" is used. Possible values are "PHY_FLOAT", "PHY_UCHAR", "PHY_SHORT"

            var hdt = "PHY_FLOAT";

            // Set this to your needs (inverts the triangles)

            var flipQuadEdges = false;

            // Creates height data buffer in Ammo heap

            ammoHeightData = Ammo._malloc(4 * terrainWidth * terrainDepth);

            // Copy the javascript height data array to the Ammo one.

            var p = 0;

            var p2 = 0;

            for (var j = 0; j < terrainDepth; j++) {

                for (var i = 0; i < terrainWidth; i++) {

                    // write 32-bit float data to memory

                    Ammo.HEAPF32[ammoHeightData + p2 >> 2] = heightData[p];

                    p++;

                    // 4 bytes/float

                    p2 += 4;

                }

            }

            // Creates the heightfield physics shape

            var heightFieldShape = new Ammo.btHeightfieldTerrainShape(

                terrainWidth,

                terrainDepth,

                ammoHeightData,

                heightScale,

                terrainMinHeight,

                terrainMaxHeight,

                upAxis,

                hdt,

                flipQuadEdges

        );

            // Set horizontal scale

            var scaleX = terrainWidthExtents / (terrainWidth - 1);

            var scaleZ = terrainDepthExtents / (terrainDepth - 1);

            heightFieldShape.setLocalScaling(new Ammo.btVector3(scaleX, 1, scaleZ));

            heightFieldShape.setMargin(0.05);

            return heightFieldShape;

        }

        document.getElementById("ThreeJs").appendChild(renderer.domElement);

    </script>

</html>

【three.js练习程序】创建简单物理地形的更多相关文章

【three.js练习程序】创建简单物理场景
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
unity3d教程动态创建简单平面地形
unity3d创建地形是不须要usingUnityEditor的.这里使用了AssetDatabase.所以需using UnityEditor; 创建三步: 1.TerrainData terrai ...
基于Babylon.js编写宇宙飞船模拟程序1——程序基础结构、物理引擎使用、三维罗盘
计划做一个宇宙飞船模拟程序,首先做一些技术准备. 可以访问https://ljzc002.github.io/test/Spacetest/HTML/PAGE/spacetestwp2.html查看测 ...
node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀修改之后会弹出这个,点击"是" 3.运行test.js 源文件使用node.js运行之后的. 如果该路径下没有该 ...
使用Visual Studio 2010 创建简单的Silverlight应用程序
使用Visual Studio 2010 创建简单的Silverlight应用程序 Silverlight是创建动态的引人的RIAs(Rich Internet Application)的新方法.这里 ...
在 Web 应用中创建 Node.js 应用程序
本分步指南将通过 Azure Web 应用帮助您启动并运行示例 Node.JS 应用程序.除 Node.JS 外,Azure Web 应用还支持其他语言,如 PHP..NET.Node.JS.Pyth ...
用chrome的snippets片段功能创建页面js外挂程序，从控制台创建js小脚本
用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本 Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行.可以访问和从 ...
用简单的 Node.js 后台程序浅析 HTTP 请求与响应
用简单的 Node.js 后台程序浅析 HTTP 请求与响应本文写于 2020 年 1 月 18 日我们来看两种方式发送 HTTP 请求,一种呢,是命令行的 curl 命令:一种呢是直接在浏览器的 ...
Socket创建简单服务器和客户端程序
使用Socket编程创建简单服务器和客户端要知道的 Socket-AddressFamily, SocketType, ProtocolType https://blog.csdn.net/weix ...

随机推荐

PHP：判断客户端是否使用代理服务器及其匿名级别
要判断客户端是否使用代理服务器,可以从客户端所发送的环境变量信息来判断. 具体来说,就是看HTTP_VIA字段,如果这个字段设置了,说明客户端使用了代理服务器. 匿名级别可以参考下表来判断. 给出一个 ...
MySQL笔记(2)---InnoDB存储引擎
1.前言本节记录InnoDB的相关知识点. 2.InnoDB存储引擎简介 2.1版本 MySQL5.1开始,允许用动态方式加载引擎,这样存储引擎的更新可以不受MySQL数据库版本的限制.下面是各个I ...
ajax 提交添加元素内容
JS <script type="text/javascript"> $('.Phone_Interview_Comments').click(function () ...
从QQ音乐开发，探讨如何利用腾讯云SDK在直播中加入视频动画
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏看着精彩的德甲赛事,突然裁判一声口哨,球赛断掉了,屏幕开始自动播放"吃麦趣鸡盒,看德甲比赛&q ...
JavaScript 总结（前端常用工具类的封装）
JavaScript (class是ES6的新东西,看着不爽可以变,但主要还是里面的方法) 1. type 类型判断 class TypeFn { isString (o) { //是否字符串 ret ...
超简单MVC应用程序播放WMV视频
本篇博文,介绍给大家的是,在MVC应用程序中,播放Windows media video(.wmv) 视频文件. Insus.NET的实现方法,把media player组件,嵌入MVC的控制器的Co ...
AuthenticationManager、ProviderManager
本篇主要讲述以下几点: 1.AuthenticationManager.ProviderManager和AuthenticationProvider三者之间的关系 2.以UsernamePasswor ...
date时间格式化
Date方法的扩展 /** * 时间格式化 * @param fmt * @returns {*} * @constructor */ // (new Date()).Format("yyy ...
VS比较好用的扩展插件总结
1.Indent Guides 绝对是必须的,有了这些辅助线,代码结构一目了然. 2.CodeMaid 整理与优化代码,并且可以清除空行.必备把if语句块for语句块折叠工具->扩展和更新, ...
java的锁机制——synchronized
一段synchronized的代码被一个线程执行之前,他要先拿到执行这段代码的权限,在java里边就是拿到某个同步对象的锁(一个对象只有一把锁): 如果这个时候同步对象的锁被其他线程拿走了,他(这个线 ...

【three.js练习程序】创建简单物理地形

【three.js练习程序】创建简单物理地形的更多相关文章

随机推荐

热门专题