WebGl Collision Check

最新推荐文章于 2020-11-12 17:06:53 发布
最新推荐文章于 2020-11-12 17:06:53 发布
阅读量471 收藏
点赞数
文章标签： distance function object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bbxfnet/article/details/7556148
版权


点击转到我的51cto博客查看

WebGl Collision Check


所用到的材质：

carpet.png

carpet.png


celling.jpg

celling.jpg


floor.png

floor.png

grass.png

grass.png


wall.png

wall.png

附源代码：

<!doctype html>
<html lang="en">
<head>
    <title>webgl collision check</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            color: #61443e;
            font-family: Monospace;
            font-size: 13px;
            text-align: center;

            background-color: #aaccff;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            color: #ffffff;
            position: absolute;
            top: 0px;
            width: 100%;
            padding: 5px;
        }

        a {

            color: yellow;
        }

        #oldie {
            background: rgb(0, 0, 50) !important;
            color: #fff !important;
        }

    </style>
</head>
<body>

<div id="container"></div>

<script src="Three.js"></script>

<script src="Detector.js"></script>
<script src="Stats.js"></script>
<script>

    if (!Detector.webgl) {

        Detector.addGetWebGLMessage();
        document.getElementById('container').innerHTML = "";

    }

    var container, stats;

    var camera, controls, scene, renderer;

    var clock = new THREE.Clock();

    var wallArray = ["LeftWall", "RightWall", "FrontWall", "BackWall", "Celling", "Floor"];
//    var wallArray = ["Floor"];
    var walls = {
        LeftWall:{Position:new THREE.Vector3(10, 300, -300), texture:"textures/wall.png", Size:new THREE.Vector3(20, 600, 600)},
        RightWall:{Position:new THREE.Vector3(590, 300, -300), texture:"textures/wall.png", Size:new THREE.Vector3(20, 600, 600)},
        FrontWall:{Position:new THREE.Vector3(300, 300, -590), texture:"textures/wall.png", Size:new THREE.Vector3(560, 600, 20)},
        BackWall:{Position:new THREE.Vector3(300, 300, -10), texture:"textures/wall.png", Size:new THREE.Vector3(560, 600, 20)},
        Celling:{Position:new THREE.Vector3(300, 590, -300), texture:"textures/celling.jpg", Size:new THREE.Vector3(560, 20, 560)},
        Floor:{Position:new THREE.Vector3(300, 10, -300), texture:"textures/floor.png", Size:new THREE.Vector3(560, 20, 560)}
    };
    var cylinderArray = ["LieCylinder", "UpCylinder", "SlantedCylinder"];
    var cylinders = {
        LieCylinder:{Position:new THREE.Vector3(150, 25, -300), texture:"textures/grass.png", Size:new THREE.Vector3(50, 50, 900), Rotate:new THREE.Vector3(1.57, 0, 0)},
        UpCylinder:{Position:new THREE.Vector3(300, 300, -300), texture:"textures/grass.png", Size:new THREE.Vector3(40, 40, 900), Rotate:new THREE.Vector3(0, 0, 0)},
        SlantedCylinder:{Position:new THREE.Vector3(400, 300, -200), texture:"textures/grass.png", Size:new THREE.Vector3(60, 60, 900), Rotate:new THREE.Vector3(0.75, 0.75, 0.75)}
    };
    var ballArray = [
//        {Position:new THREE.Vector3(50, 550, -50), Radius:20, texture:"textures/carpet.png", Veloc:new THREE.Vector3(40, -20, 40), Acell:new THREE.Vector3(0, 0, 0)},
//        {Position:new THREE.Vector3(250, 550, -50), Radius:20, texture:"textures/carpet.png", Veloc:new THREE.Vector3(30, 10, 0), Acell:new THREE.Vector3(0, 0, 0)},
//        {Position:new THREE.Vector3(450, 550, -50), Radius:20, texture:"textures/carpet.png", Veloc:new THREE.Vector3(50, -10, 10), Acell:new THREE.Vector3(0, 0, 0)},
//        {Position:new THREE.Vector3(50, 550, -250), Radius:20, texture:"textures/carpet.png", Veloc:new THREE.Vector3(10, 30, 0), Acell:new THREE.Vector3(0, 0, 0)},
//        {Position:new THREE.Vector3(250, 550, -250), Radius:20, texture:"textures/carpet.png", Veloc:new THREE.Vector3(30, -10, 10), Acell:new THREE.Vector3(0, 0, 0)},
//        {Position:new THREE.Vector3(450, 550, -250), Radius:20, texture:"textures/carpet.png", Veloc:new THREE.Vector3(10, 10, 30), Acell:new THREE.Vector3(0, 0, 0)},
        {Position:new THREE.Vector3(50, 550, -450), Radius:20, texture:"textures/carpet.png", Veloc:new THREE.Vector3(60, 20, 40), Acell:new THREE.Vector3(0, 0, 0)},
        {Position:new THREE.Vector3(250, 550, -450), Radius:20, texture:"textures/carpet.png", Veloc:new THREE.Vector3(20, -60, 40), Acell:new THREE.Vector3(0, 0, 0)},
        {Position:new THREE.Vector3(450, 450, -450), Radius:20, texture:"textures/carpet.png", Veloc:new THREE.Vector3(40, -50, 50), Acell:new THREE.Vector3(0, 0, 0)}
    ];
    var objects = [];

    init();
    animate();

    function init() {

        container = document.getElementById('container');

        scene = new THREE.Scene();
        //scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );

        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 20000);
        camera.position.x = 0;
        camera.position.y = 50;
        camera.position.z = 200;
        scene.add(camera);

        controls = new THREE.FirstPersonControls(camera);
        controls.movementSpeed = 300;
        controls.lookSpeed = 0.01;
        controls.lon = 300;

        scene.add(new THREE.AmbientLight(0xffffff));

        var wall, materials, wallobject;
        for (var i = 0; i < wallArray.length; i++) {
            eval("wall = walls." + wallArray[i] + ";");
            //materials = new THREE.MeshLambertMaterial({ ambient:0xffffff, transparent:true, map:THREE.ImageUtils.loadTexture(wall.texture) });
            materials = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1 } );

            wallobject = new THREE.Mesh(new THREE.CubeGeometry(wall.Size.x, wall.Size.y, wall.Size.z, wall.Size.x / 10, wall.Size.y / 10, wall.Size.z / 10), materials);
            wallobject.position.set(wall.Position.x, wall.Position.y, wall.Position.z);
            wallobject.doubleSided = true;
            scene.add(wallobject);
            wall.object = wallobject;
            objects.push(wallobject);
        }
//        var cylinder, cylinderobject;
//        for (var i = 0; i < cylinderArray.length; i++) {
//            eval("cylinder = cylinders." + cylinderArray[i] + ";");
//            materials = new THREE.MeshLambertMaterial({ ambient:0xffffff, map:THREE.ImageUtils.loadTexture(cylinder.texture) });
//
//            cylinderobject = new THREE.Mesh(new THREE.CylinderGeometry(cylinder.Size.x, cylinder.Size.y, cylinder.Size.z, cylinder.Size.x, cylinder.Size.z, false), materials);
//            cylinderobject.position.set(cylinder.Position.x, cylinder.Position.y, cylinder.Position.z);
//            cylinderobject.rotation.set(cylinder.Rotate.x, cylinder.Rotate.y, cylinder.Rotate.z);
//            scene.add(cylinderobject);
//            cylinder.object = cylinderobject;
//            objects.push(cylinderobject);
//        }
        var ball, ballObject;
        for (var i = 0; i < ballArray.length; i++) {
            ball = ballArray[i];
            materials = new THREE.MeshLambertMaterial({ ambient:0xffffff, map:THREE.ImageUtils.loadTexture(ball.texture) });

            ballObject = new THREE.Mesh(new THREE.SphereGeometry(ball.Radius, 64, 32), materials);
            ballObject.position.set(ball.Position.x, ball.Position.y, ball.Position.z);
            scene.add(ballObject);
            ball.object = ballObject;
        }

        var object = new THREE.AxisHelper();
        object.position.set(0, 0, 0);
        object.scale.x = object.scale.y = object.scale.z = 2;
        scene.add(object);

        renderer = new THREE.WebGLRenderer({ clearColor:0x000000, clearAlpha:1 });
        renderer.setSize(window.innerWidth, window.innerHeight);

        container.innerHTML = "";

        container.appendChild(renderer.domElement);

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

    function animate() {

        requestAnimationFrame(animate);

        render();
        stats.update();

    }

    function setBallPosition(ball, deltaTime) {
//        console.log("old ball.Position=("+ball.Position.x+","+ball.Position.y+","+ball.Position.z+"),Vec=("+ball.Veloc.x+","+ball.Veloc.y+","+ball.Veloc.z+")");
//        if(ball.Position.y < - ball.Veloc.y + 20){
//            console.log("break;");
//        }
        var ray = new THREE.Ray(ball.Position.clone(), ball.Veloc.clone().normalize());
        var intersects = ray.intersectObjects(objects);

        if (intersects.length > 0) {
            var intersectsTemp = [];
            for(var i = 0;i<intersects.length;i++){
                var has = false;
                var normal = intersects[i].face.normal.clone().normalize();
                if(normal.clone().dot(ball.Veloc.clone().normalize()) > 0){
                    has = true;
                }
                for(var j=0;j<intersectsTemp.length;j++){
                    if(intersectsTemp[j].face.normal.x == intersects[i].face.normal.x && intersectsTemp[j].face.normal.y == intersects[i].face.normal.y && intersectsTemp[j].face.normal.z == intersects[i].face.normal.z){
                        has = true;
                    }
                    if(intersectsTemp[j].distance != intersects[i].distance){
                        has = true;
                    }
                }
                if(!has){
                    intersectsTemp.push(intersects[i]);
                }
            }
            intersects = intersectsTemp;

            var intersect = intersects[ 0 ];
            var distance = intersect.distance;
            var point = intersect.point;
            var distanceNew = ((ball.Veloc.clone().multiplyScalar(deltaTime)).addSelf(ball.Acell.clone().multiplyScalar(deltaTime * deltaTime / 2))).distanceTo(ball.Position.clone());

            if (distance - ball.Radius < distanceNew) {
                var vl = ball.Veloc.clone().length();
                var vtpow2 = 2 * ball.Acell.clone().dot(ball.Veloc.clone().normalize()) * (distance - ball.Radius) + vl * vl;
                var vt;
                if (vtpow2 > 0) {
                    vt = Math.sqrt(vtpow2);
                } else {
                    vt = 0;
                }

                var vi = ball.Veloc.clone().normalize();
                var vri = new THREE.Vector3(0,0,0);
                var vria = vi.clone();
                for(var i = 0;i<intersects.length;i++){
                    var normal = intersects[i].face.normal.clone().normalize();
                    if(normal.clone().dot(vi.clone()) > 0){
                        continue;
                    }
                    var normali = normal.clone().multiplyScalar(-2 * normal.clone().dot(vria.clone()));
                    vri = normali.addSelf(vria.clone()).normalize();
                    vria = vri.clone();
//                    console.log("Cylinder=("+intersects[i].object.rotation.x+","+intersects[i].object.rotation.y+","+intersects[i].object.rotation.z+")");
                }

                var vr = vri.clone().multiplyScalar(vt);
                //console.log("Vl=" + vl + ",Vt=" + vt + ",Vr=" + vr.clone().length() + ",distance=" + distance);

                ball.Veloc = vr;

                ball.Position = point.clone().addSelf(vri.multiplyScalar(1));
                var ray1 = new THREE.Ray(ball.Position.clone(), ball.Veloc.clone().normalize());
                var intersects1 = ray1.intersectObjects(objects);
                if(intersects1.length > 0){
                    var intersect1 = intersects1[ 0 ];
                    var distance1 = intersect1.distance;
                    var distanceNew1 = ball.Veloc.clone().length() * deltaTime;
                    if (distance1 - ball.Radius < distanceNew1) {
                        setBallPosition(ball, deltaTime);
                    }else{
                        ball.Position = point.clone().addSelf(vri.multiplyScalar(ball.Radius));
                    }
                }else{
                    ball.Position = point.clone().addSelf(vri.multiplyScalar(ball.Radius));
                }
            } else {
                ball.Position.addSelf((ball.Veloc.clone().multiplyScalar(deltaTime)).addSelf(ball.Acell.clone().multiplyScalar(deltaTime * deltaTime / 2)));
                ball.Veloc.addSelf(ball.Acell.clone().multiplyScalar(deltaTime));
            }
        } else {
            ball.Position.addSelf((ball.Veloc.clone().multiplyScalar(deltaTime)).addSelf(ball.Acell.clone().multiplyScalar(deltaTime * deltaTime / 2)));
            ball.Veloc.addSelf(ball.Acell.clone().multiplyScalar(deltaTime));
        }
//        console.log("new ball.Position=("+ball.Position.x+","+ball.Position.y+","+ball.Position.z+"),Vec=("+ball.Veloc.x+","+ball.Veloc.y+","+ball.Veloc.z+")");
        ball.object.position.set(ball.Position.x, ball.Position.y, ball.Position.z);
    }

    function render() {

        var delta = clock.getDelta(),
                time = clock.getElapsedTime() * 10;

        controls.update(delta);
        var deltaTime = 0.5;
        for (var i = 0; i < ballArray.length; i++) {
            var ball = ballArray[i];
//            ball.Position.set(30,30,-100);
//            ball.Veloc.set(-80,-70,0);
            setBallPosition(ball, deltaTime);
        }
        renderer.render(scene, camera);
    }

</script>

</body>
</html>

慢慢的回味
关注
WebGL - 示例 添加雾化效果
ithanmang
07-08 1328
在三维图形学中， 雾化用来描述远处的物体看上去较为模糊的现象。 示例：雾化效果 实现雾化的方式有很多种，这里最简单的一种就是 线性雾化，在线性雾化中，某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高，线性雾化有起点和终点，起点表示雾化开始之处，终点表示完全雾化之处，两点之间某一点的雾化程度与该点的距离呈线性关系 比终点更远的点完全雾化了，即完全看不到东西，某一点的雾化的程度可以定义...
A*算法项目实践之二：基于障碍物避碰的栅格路径生成
weixin_42119432的博客
12-27 6510
我们生成了栅格地图，接下来就需要使用A\* 算法找寻路径了，本文就笔者实际项目的一些经验来谈谈相关的方法，若有不对，请在评论区提醒笔者予以斧正 。 本项目基于VS2017，整个项目的代码以及上传到码云： [A*算法项目实践（正在更新中~）](https://gitee.com/takajiaka/path-search-of-ship-project.git)
基于HTML5和WebGL的碰撞测试
HT for Web 3D
10-19 2906
可能你会好奇这个是怎么俯视图是怎么放上去的？如果3d中的图元变化，这个俯视图中的图元也会跟着变化么？如何把右上角的form表单和左下角的视图又是怎么放的？如何只移动3d二把这两个固定在这边？或者你可能还有别的问题，在这里我会尽量清楚地解答，实在找不到答案可以去我们的官网HT for Web查找你的问题。
WebGL compatibility check
JKK24的博客
08-21 442
WebGL 兼容性检测
WebGL之旅（十九）雾化
寒风的技术博客
08-03 1245
一 原理雾化，即使用雾的颜色与场景中物体的颜色进行叠加。线性雾化，会指定一个起点和终点，起点为开始雾化点，终点为完全雾化的点： 在起点之前的完全清晰，也就是说完全为场景中的物体颜色； 在起点和终点之间的点，根据距离计算雾的因子； 在终点之后就完成为雾的颜色。 物体颜色和雾的颜色叠加公私如下： 片元颜色 = 物体颜色 * 雾化因子 + 雾的颜色 * （1 - 雾化因子） 雾化因子 = (终点 - 当
WebGL编程
太古时代的专栏
04-26 292
webgl_interactive_cubes.html <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - map controls</title> <meta charset="utf-8"> <meta name="vie...
tolua WebGL库
08-08
【tolua WebGL库】是一个将Lua脚本语言与WebGL图形渲染技术相结合的工具，它允许开发者使用Lua编写游戏或交互式应用的逻辑，并通过WebGL在浏览器中实现高性能的3D图形渲染。这个库的出现使得开发人员可以利用Lua的...
WEBGL_webgl_
09-29
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中实现交互式的2D和3D图形渲染。这个“WEBGL_webgl_”很可能是一份教程或教材，旨在帮助初学者掌握WebGL技术，并随着学习者的进步不断更新...
WEBGL & WebGL Extension
Felix的专栏
03-18 1100
WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. git se
Unity WebGL下读取Excel
最新发布
04-23
Unity WebGL 是一个强大的游戏开发平台，它允许开发者创建交互式3D和2D内容，并且可以直接在网页浏览器中运行，无需任何插件。WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中进行3D图形...
WebGL
oLaoJiang1的博客
08-30 491
WebGL是什么东西? WebGL是Web上的3D图形的新标准，它是专用于绘制2D图形和交互式3D图形的目的，它是OpenGL ES 2.0库，用于手机和其他移动设备的低级3D的API衍生，WebGL提供ES2.0（嵌入式系统）类似的功能并在现在3D图形硬件上表现优异。 谁开发的WebGL 一个名叫Vladimir Vukicevic 的美国塞尔维亚软件工程师做了基础工作，并领导创建WebGL。 ...
Learning Three.js： The Javascript 3D Library for WebGL.pdf
09-27
英文版的Three.js教程，无论是初学者还是有一定经验的人士，这本书都是不错的选择。值得一读。
54 Three.js 使用THREE.PointCloudMaterial（新版本：THREE.PointsMaterial）样式化粒子
现在学习也不晚
01-19 5331
简介 上一节我们介绍了一下THREE.PointCloud。THREE.PointCloud构造函数接收两个属性：几何体和材质。材质用来给粒子着色和添加纹理，而几何体则用来指定单个粒子的位置。每个顶点和每个用来定义几何体的点，将会以粒子的形态展示出来。如果我们基于THREE.BoxGeometry对象创建THREE.PointCloud对象，即使不添加顶点，我们也将会得到八个粒子，立方体一个角上...
XDRender_Volumn_DepthFog 体积渲染1 深度雾( DepthFog )
小道杂书
10-28 489
XDRender_Volumn_DepthFog 体积渲染1 深度雾( DepthFog ) 目录XDRender_Volumn_DepthFog 体积渲染1 深度雾( DepthFog )前言正文理论实现总结备注前言 作为假体积渲染,深度雾一直是场景氛围渲染的一部分. 这里实现是作为后期处理的可选项 正文 理论 实现 总结 备注 ...
[webGL学习]基于three.js构建WebGL实例第五讲
图解AI
10-11 8838
今天，我们将继续学习webgl（three.js）这门课程，今天我们将向您展示如何以三种不同的方式为您的场景创建一个美丽的环境（天空盒）：立方天空盒 侧面），球形天空盒（单周围纹理）和球形着色器天空盒（无纹理）。 我们会用到下面一些比较特殊的属性：反射，折射和类似soapbubble的对象。 一般结构 现在我们可以开始，首先，定义一般结构： var lesson5 = { scene:
Better-Minimal-WebGL-Template unity webgl打包模板 支持手机
12-09
Unity WebGL 是一种强大的工具，允许开发者将他们的3D游戏或应用程序直接嵌入到网页中，无需任何插件或额外下载。"Better-Minimal-WebGL-Template" 是一个优化过的Unity WebGL打包模板，旨在提供更好的性能和兼容性...
webgl
黑胡子大叔的博客
11-12 126
整理一些webgl的学习资料： 技术博客： http://www.yanhuangxueyuan.com/ 学习视频： https://www.bilibili.com/video/BV1s4411c7RD?from=search&seid=15520430262951531133 HT for Web 3D 手册 ：https://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html HT for Web 数据模型手册 ：https://www
SuperMap iClient3D for WebGL教程（Entity）-WallGraphics
热门推荐
SuperMap技术控
06-14 1万+
作者：为梦齐舞 本文同步更新于简书文章[https://www.jianshu.com/p/61e6efd66b44] 本节我们来一起学习下WallGraphics这个对象，这个对象也是属于Entity是他对象的，Wall是一个墙对象，可以沿着地面或海拔高度进行放置，是竖立着加载到场景中的，我们来看一个使用Wall做的效果 代码如下： viewer.entities.add({ i...
从零开始构建自己的WebGL3D引擎—材质篇
zhgu1992的博客
03-16 1294
引言： 第二篇本来想讲讲摄影机的内容，但是还是想从渲染开始讲起。因为我们希望引擎更专注于渲染，等渲染结束我们再去慢慢的写摄影机和一些数学运算吧。 该篇主要思考基础材质类如何封装以及shader如何处理和优化、shader编译、uniform上传的细节和更好的实现 1.要设计一个好的材质，我们先想想别的引擎是如何设计的，有什么好的地方、有什么不足的地方 Three.js 使用方法(目前先拿自定义的s...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值