<!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>

</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;

        init();

        animate();

        function init() {

            initGraphics();

            initPhysics();

            createObjects();

        }

        function initGraphics() {

            // three.js基本场景配置

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

            camera.position.x = 30;

            camera.position.y = 30;

            camera.position.z = 30;

            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();

            //创建地面

            pos.set(0, 0, 0);

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

            var ground = createParallellepiped(40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial({ color: 0xffffff }));

            ground.castShadow = true;       // 开启投影

            ground.receiveShadow = true;    // 接受阴影(可以在表面上显示阴影)

            //创建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, 2 * (i + 1), 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, 2 * (i + 1), 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());

                }

            }

        }

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

    </script>

</html>

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

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

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 基于Babylon.js编写宇宙飞船模拟程序1——程序基础结构、物理引擎使用、三维罗盘

    计划做一个宇宙飞船模拟程序,首先做一些技术准备. 可以访问https://ljzc002.github.io/test/Spacetest/HTML/PAGE/spacetestwp2.html查看测 ...

  3. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  4. 使用Visual Studio 2010 创建简单的Silverlight应用程序

    使用Visual Studio 2010 创建简单的Silverlight应用程序 Silverlight是创建动态的引人的RIAs(Rich Internet Application)的新方法.这里 ...

  5. 在 Web 应用中创建 Node.js 应用程序

    本分步指南将通过 Azure Web 应用帮助您启动并运行示例 Node.JS 应用程序.除 Node.JS 外,Azure Web 应用还支持其他语言,如 PHP..NET.Node.JS.Pyth ...

  6. 用chrome的snippets片段功能创建页面js外挂程序，从控制台创建js小脚本

    用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本 Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行.可以访问和从 ...

  7. 用简单的 Node.js 后台程序浅析 HTTP 请求与响应

    用简单的 Node.js 后台程序浅析 HTTP 请求与响应 本文写于 2020 年 1 月 18 日 我们来看两种方式发送 HTTP 请求,一种呢,是命令行的 curl 命令:一种呢是直接在浏览器的 ...

  8. Socket创建简单服务器和客户端程序

    使用Socket编程创建简单服务器和客户端 要知道的 Socket-AddressFamily, SocketType, ProtocolType https://blog.csdn.net/weix ...

  9. 高效使用 JavaScript 闭包,避免 Node.js 应用程序中的内存泄漏

    在 Node.js 中,广泛采用不同形式的闭包来支持 Node 的异步和事件驱动编程模型.通过很好地理解闭包,您可以确保所开发应用程序的功能正确性.稳定性和可伸缩性. 闭包是一种将数据与处理数据的代码 ...

随机推荐

  1. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（六）：集成 Swagger API

    spring-boot作为当前最为流行的Java web开发脚手架,越来越多的开发者选择用其来构建企业级的RESTFul API接口.这些接口不但会服务于传统的web端(b/s),也会服务于移动端.在 ...

  2. sql 聚合语句，count的用法

    如要获取 result = '1' 的数量COUNT( CASE WHEN result = '1' THEN result END ) SELECT * FROM ( SELECT batchNo, ...

  3. 浅谈 Unix I/O 模型

    原文出处:http://miaoo.in/talk-about-unix-io-model.html 在实际应用中,数据操作通常分为输入和输出,那么以输入为例,在操作系统中,一个数据的输入通常分为以下 ...

  4. 【杂谈】对RMI（Remote Method Invoke）的认识

    前言 对RMI接触的也比较早,基本上刚学完Java基础不久就机缘巧合遇到了.当时有尝试着去了解,但是没看到比较好的教程,而且对网络编程相关知识不太了解,看了不少文章,也没弄明白.现在对网络和I/O有了 ...

  5. Java NIO系列教程（十） Java NIO DatagramChannel

    Java NIO中的DatagramChannel是一个能收发UDP包的通道.因为UDP是无连接的网络协议,所以不能像其它通道那样读取和写入.它发送和接收的是数据包. 打开 DatagramChann ...

  6. JBOSS Spring Web

    jndi: <datasources> <xa-datasource> <jndi-name>jdbc/sss-local</jndi-name> &l ...

  7. double转换为int以及浮点型相加损失精度问题

    最近在做支付相关模块的业务,数据库字段却使用的是double类型,其实也行,只要计算不在sql语句中进行,也是没有问题的. 预先的类属性设置的是Double类型,自己算的时候发现小数相加会出现损失精度 ...

  8. string基本字符序列容器（竞赛时常用的使用方法总结）

    C语言只提供了一个char类型用来处理字符,而对于字符串,只能通过字符串数组来处理,而C++STL提供了string基本字符序列容器来处理字符串,可以将其理解为字符串类,它提供了添加,删除,替换.查找 ...

  9. Redis列表操作

    列表类似于双向链表结构,可从序列两端推入或者弹出元素. (列表常用命令) RPUSH : RPUSH key-name value  [value1 value2,...] ------------将 ...

  10. LoRa术语

    ADR      Adaptive Data Rate          自适应数据率 AES      Advanced Encryption Standard        高级加密标准 AFA  ...