【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 ...

随机推荐

2016-06-14 发布解决Centos7初次开机提示Initial setup of CentOS Linux 7 (core)
安装完成centos7后出现如下提示: Initial setup of CentOS Linux 7 (core) 1) [x] Creat user 2) [!] License informat ...
linux-centos使用 wget命令获取jdk
1, 首先去官网看下地址是否变化了 2, 然后输入以下命令即可 wget --no-check-certificate --no-cookies --header "Cookie: orac ...
SpringBoot学习（一）——Spring的发展
一.Spring1.x时代在Spring1.x时代,都是通过xml文件配置bean,随着项目的不断扩大,需要将xml配置分放到不同的配置文件中,需要频繁的在Java类和xml配置文件中切换. 二.S ...
laravel 区块继承
看到我的文章感觉有用的话,在评论区下面扣1,能够让我感受到你们的存在,也给我动力继续写的更好,谢谢定义: 在layouts\admin.blade.php @yield('要定义的区块名') @yi ...
What is AMQP? and the architecture
What is AMQP? (Advanced Message Queuing Protocol) When two applications need to communicate there ar ...
传统项目转前端工程化——路由跳转时出现浏览器锁死和白屏【该死的同步ajax】
[一开始我想到是该死的同步ajax,但我没验证,把他忽略了] 在探索前端工程化vue-cli做spa时,从搜索结果页跳转商品详情页时,因为详情页有很多ajax请求,并且都用的同步请求,就会导致请求时浏 ...
ASP.NET MVC验证码演示(Ver2)
前一版本<ASP.NET MVC验证码演示>http://www.cnblogs.com/insus/p/3622116.html,Insus.NET还是使用了Generic handle ...
SSH无密码登录的原理及配置
一.SSH概念(百度) SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SSH 是目 ...
使用"+"进行字符串拼接
本文来自:Hollis(微信号:hollischuang) 字符串,是Java中最常用的一个数据类型了.本文,也是对于Java中字符串相关知识的一个补充,主要来介绍一下字符串拼接相关的知识.本文基于j ...
盐水的故事（hdu1408）
盐水的故事 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

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

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

随机推荐

热门专题