20210525JS修改样式

article/2025/7/27 8:52:36

1.JS通过style修改内联样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">#box1 {width: 200px;height: 200px;background-color: red;}</style><script type="text/javascript">window.onload = function(){/*点击按钮以后修改box1的大小*///获取box1var box1 = document.getElementById("box1");//为按钮绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){//修改box1的宽度/*通过JS修改元素的样式：语法：元素.style.样式名 = "样式值"注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的，比如background-color，需要将这种样式名修改成驼峰命名法，去掉-，然后将-后的字母大写border-top-width   borderTopWidth我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示但是如果在样式中写了!important,则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加！important*/box1.style.width = "300px";box1.style.backgroundColor = "yellow"; //Uncaught SyntaxError: Invalid left-hand side in assignment};//点击按钮2以后，读取元素的样式var btn02 = document.getElementById("btn02");btn02.onclick = function(){//读取box1的样式/*语法：元素.style.样式名通过style属性设置和读取的都是内联样式无法读取样式表中的样式 */alert(box1.style.width);};};</script>
</head>
<body><button id="btn01">点我一下</button><button id="btn02">点我一下2</button><br/><br/><div id="box1"></div>
</body>
</html>

2.读取元素的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css"> #box1 {/* width: 100px; */height: 100px;background-color: yellow;}</style><script type="text/javascript">window.onload = function(){//点击按钮读取box1的样式var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){//读取box1的宽度//只能读到内联样式//alert(box1.style.width);/*获取元素的当显示的样式语法：元素.currentStyle.样式名它可以用来读取当前元素正在显示的样式如果当前元素没有设置该样式，则获取默认值但是只有IE浏览器支持，其它浏览器都不支持*///alert(box1.currentStyle.width);/*在其它浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式这个方法是window的方法，可以直接使用需要两个参数第一个：要获取样式的元素第二个：可以传递一个伪元素，一般都传null该方法会返回一个对象，对象中封装了当前元素对应的样式可以通过对象.样式名来读取样式如果获取的样式没有设置，则会获取到真实的值，而不是默认值比如：没有设置width，它不会获取到auto,而是一个长度但是该方法不支持IE8及以下的浏览器通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性*///正常浏览器的方式//var obj = getComputedStyle(box1, null);//alert(obj.width);//IE8的方式//alert(box1.currentStyle.backgroundColor);alert(getStyle(box1, "width"));};};/*定义一个兼容所有浏览器的函数，用来获取指定元素的当前的样式参数：obj 要获取样式的元素name 要获取的样式名*/function getStyle(obj, name){// 方法一：//if(getComputedStyle){  //变量在IE8中找不着就报错，依然无法获得属性// if(window.getComputedStyle){  //对象的属性找不着返回undefined,转换为false//     //正常浏览器，具有getComputedStyle方法//     return getComputedStyle(obj,null)[name];// }else{             // //IE8方式，没有getComputedStyle()方法//     return obj.currentStyle[name];// }//方法二：逆向思维，但是还是建议使用上面的方法，IE11既有 currentStyle也有getComputedStyle()// if(obj.currentStyle){//     return obj.currentStyle[name];// }else{//     return getComputedStyle(obj,null)[name];// }//简单写法return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];}</script>
</head>
<body><button id="btn01">点我一下</button><div id="box1"  ></div>
</body>
</html>

3.滚动条练习

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">#info {width: 300px;height: 500px;background-color: #bfa;overflow: auto;}</style><script type="text/javascript">window.onload = function(){/*当垂直滚动条滚动到底时使表单项可用onscroll- 该事件会在元素的滚动条滚动时触发*///获取id为info的p元素var info = document.getElementById("info"); //获取表单项var inputs = document.getElementsByTagName("input");//为info绑定一个滚动条滚动的事件info.onscroll = function(){//检查滚动条是否滚动到底if(info.scrollHeight - info.scrollTop === info.clientHeight){//滚动条滚动到底使表单项可用/*disabled属性可以设置一个元素是否禁用,如果设置为true, 则元素禁用设置为false，则元素可用*/inputs[0].disabled = false;  //disabled =false 表示不禁用inputs[1].disabled = false;}};};</script>
</head>
<body><h3>欢迎亲爱的用户注册</h3><p id="info">亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册</p><!-- 如果为表单项添加disabled="disabled" 则标单项将变成不可用的状态 -->我已仔细阅读协议，一定遵守<input type="checkbox" disabled="disabled"><input type="submit" value="注册" disabled="disabled">
</body>
</html>

4.div随鼠标移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;/*开启绝对定位*/position:absolute;}</style><script type="text/javascript">window.onload = function(){/*使div可以跟随鼠标移动*///获取box1var box1 = document.getElementById("box1");//绑定鼠标移动事件document.onmousemove = function(event){//解决兼容问题event = event || window.event;//获取滚动条滚动的距离/*chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取2021chrome兼容了，也认为是html的了，不用 var scrollTop = document.documentElement.scrollTop|| window.pageYOffset || document.body.scrollTop火狐等浏览器认为浏览器的滚动条是html的*/var scrollTop = document.documentElement.scrollTop;//获取鼠标的坐标/*clientX和clientY用于获取鼠标在当前的可见窗口的坐标pageX和pageY可以获取鼠标相对于当前页面的坐标但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用*/var left = event.clientX;var top = event.clientY;//设置div的偏移量,只对开启定位的元素起作用box1.style.left = left + "px";box1.style.top = top + scrollTop + "px";};};</script>
</head>
<body heigtht="height:100000px;width: 20000px;"><div id="box1"></div>
</body>
</html>

5.事件的冒泡

取消冒泡：
event = event || window.event;
event.cancelBubble = true;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">#box1 {width: 200px;height: 200px;background-color: yellowgreen;}#s1 {background-color: yellow;}</style><script type="text/javascript">window.onload = function(){/*事件的冒泡（Bubble）- 所谓事件的冒泡指的就是事件向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发- 在开发中大部分冒泡都是有用的，如果不希望事件冒泡可以通过事件对象来取消冒泡*///为s1绑定一个单击响应函数var s1 = document.getElementById("s1");s1.onclick = function(event){event = event || window.event;alert("我是span的单击响应函数");//取消冒泡//可以将事件对象的cancelBubble设置为true，即可取消冒泡event.cancelBubble = true;};//为box1绑定一个单击响应函数var box1 = document.getElementById("box1");box1.onclick = function(){event = event || window.event;alert("我是div的单击响应函数");event.cancelBubble = true;};//为body绑定一个单击响应函数document.body.onclick = function(){alert("我是body的单击响应函数");};};</script>
</head>
<body><div id="box1">我是box1<span id="s1">我是span</span></div>
</body>
</html>

6.事件的委派

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript">window.onload = function(){var u1 = document.getElementById("u1");//点击按钮以后添加超链接var btn01 = document.getElementById("btn01");btn01.onclick = function(){//创建一个livar li = document.createElement("li");li.innerHTML = "<a href='javascript:;'>新建的超链接一</a>";//将li添加到ul中u1.appendChild(li);};/*为每一个超链接都绑定单击响应函数这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦而且这些操作只能为已有的超哦链接设置事件，而新添加的超链接必须重新绑定*///获取所有的avar allA = document.getElementsByTagName("a");//遍历// for(var i=0; i<allA.length; i++){//     allA[i].onclick = function(){//         alert("我是a的单击响应函数");//     };// }/*我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的我们可以尝试将其绑定给元素的共同的祖先元素事件的委派- 将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能*///为u1绑定一个单击响应函数u1.onclick = function(event){event = event || window.event;/*target - event中的target表示触发事件的对象*///如果触发事件的对象是我们期望的元素，则执行，否则不执行if(event.target.className == "link"){alert("我是ul的单击响应函数");}};};</script>
</head>
<body><button id="btn01">添加超链接</button><ul id="u1" style="background-color: #bfa;"><li><p>我是p元素</p></li><li><a href="javascript:;" class="link">超链接一</a></li><li><a href="javascript:;" class="link">超链接二</a></li><li><a href="javascript:;" class="link">超链接三</a></li></ul>
</body>
</html>

7.事件的绑定. 涉及兼容

//大部分浏览器兼容的方式
obj.addEventListener(eventStr, callback, false );

//IE8及以下
obj.attachEvent(“on”+eventStr, callback);//这里是windows调用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript">window.onload = function(){/*点击按钮以后弹出一个内容*///获取按钮对象var btn01 = document.getElementById("btn01");/*使用对象.事件 = 函数 的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数不能绑定多个，如果绑定了多个，则后边会覆盖掉前面的*///为btn01绑定一个单击响应函数/*  btn01.onclick = function(){alert(1);}; *///为btn01绑定第二个响应函数/*  btn01.onclick = function(){alert(2);}; *//*第二种绑定事件的方法addEventListener()- 参数：1.事件的字符串，不要写 on2.回调函数，当事件触发时该函数会被调用3.是否在捕获阶段触发事件，需要一个布尔值，一般传false使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。这个方法不支持IE8及以下的浏览器- 在IE8中可以使用attachEvent()来绑定事件- 参数：1.事件的字符串，要on2.回调函数- 这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反*///btn01.addEventListener("click",function(){alert(1);}, false);//btn01.addEventListener("click",function(){alert(2);}, false);bind(btn01, "click", function(){alert(1);});bind(btn01, "click", function(){alert(2);});//定义一个函数，用来为指定元素绑定响应函数/*addEventListener()中的this,是绑定事件的对象attachEvent()中的this，是window需要统一两个方法中的this*//*参数：obj 要绑定事件的对象eventStr 事件的字符串(不要on)callback 回调函数*/function bind(obj, eventStr, callback){if(obj.addEventListener){//大部分浏览器兼容的方式obj.addEventListener(eventStr, callback, false );}else{/*this是谁由调用方式决定callback.call(obj)*///IE8及以下//obj.attachEvent("on"+eventStr, callback);//这里是windows调用obj.attachEvent("on"+eventStr, function(){//在匿名函数中调用回调函数callback.call(obj); //修改this指向});}}};</script>
</head>
<body><button id="btn01">点我一下</button>
</body>
</html>

http://chatgpt.dhexx.cn/article/hnGXFTVZ.shtml

相关文章

Panda3D引擎简介跟初步体验

Panda3D引擎简介跟初步体验

最近在为公司项目寻找一个合适的开源3D引擎&#xff0c;一开始想到的就是OGRE&#xff0c;irrlicht这些。由于公司里没用人接触过3D引擎&#xff0c;甚至连熟悉C/C的人也只有一个。此外&#xff0c;基于团队现状&#xff0c;像OGRE之类的纯粹的图形引擎肯定是不考虑了&#xff…
阅读更多...
认识Panda3D引擎bam相关命令

认识Panda3D引擎bam相关命令

看一下Panda自带命令&#xff0c;其中有bam相关的&#xff0c;来了解一下&#xff1b; 输入一个命令看一下&#xff0c;提示需要输入一个bam文件名&#xff1b; 查一下&#xff0c;查到一个介绍一种bam文件的资料如下&#xff0c; SAM (Sequence Alignment/Map) 格式是一种通用…
阅读更多...
初步了解Panda3D场景管理

初步了解Panda3D场景管理

前面载入了场景&#xff1b;来理解一下代码&#xff1b; panda3d引擎中&#xff0c;所有对象抽象为节点。由节点构成树进行渲染。 节点的共同抽象基类为PandaNode。 节点组成的树的根通常是render。 render是3D场景的顶层节点。 载入模型后&#xff0c;接着需要改变自主节点的父…
阅读更多...
Panda3D设置窗体长宽及其他参数

Panda3D设置窗体长宽及其他参数

Panda3D最让我头疼的地方就是文档太少&#xff0c;因此很多很小的细节问题都会困扰我很久。因此把自己遇到的比较费时间但是又很简单的问题整理了以下&#xff0c;以供后续开发者参考。 ​ Panda3D官方文档上有关于配置文件的描述&#xff0c;链接如下Accessing Config Vars i…
阅读更多...
Panda3D 载入角色

Panda3D 载入角色

Panda3D 推荐&#xff0c;将模型和动画数据&#xff0c;按照panda.egg、panda-walk.egg&#xff0c;类似这样的方式分开保存&#xff1b; 在命令行连续输入命令&#xff1b; 将自动绑定模型和动画数据&#xff1b; 可查看模型的动画&#xff1b; 在Python中有一个Actor类&…
阅读更多...
python使用panda3d制作飞行模拟器

python使用panda3d制作飞行模拟器

00:目录 01:介绍02:资源02.01:准备02.02:参考 03:上代码04:效果05:尾声05.01:对于网友05.02:对于列位转发爱好者05.03:最后 01:介绍 一天&#xff0c;小编没事干&#xff0c;想做一个游戏&#xff0c;于是参考了大量内容&#xff0c;制作了这个飞行模拟器。 02:资源 02.01:准…
阅读更多...
c++的3D游戏笔录-基于panda3d(2)

c++的3D游戏笔录-基于panda3d(2)

1、panda3d使用了称为场景图&#xff08;the Scene Graph&#xff09;的树形数据结构&#xff0c;包括了所有需要渲染的对象&#xff0c;树根对象名为render。 2、通过window->get_render()得到render节点路径。 3、使用reparent_to()方法安装草地风景模型在场景图中。 4、 …
阅读更多...
Panda3D设置游戏背景颜色和节点颜色、透明度

Panda3D设置游戏背景颜色和节点颜色、透明度

Panda3D如何设置游戏背景颜色和节点颜色 ​ 在使用panda3D开发的过程中&#xff0c;遇到了很多问题&#xff0c;国内网站上的资源实在是太少&#xff0c;因此把自己遇到的比较费时间但是又很简单的问题整理了以下&#xff0c;以供后续开发者参考。 1.设置背景颜色 self.setB…
阅读更多...
了解Panda3D引擎的配置变量

了解Panda3D引擎的配置变量

Panda3d 引擎带有一些配置变量&#xff1b; 可以通过C或python代码访问&#xff1b; 进入自带python环境&#xff1b;输入下图语句&#xff1b; cvMgr是全局实例&#xff0c;定义在ShowBase.py中&#xff1b; 然后列出了引擎的配置变量&#xff1b; 很多&#xff1b; 具体含…
阅读更多...
如何将Blender模型导入Panda3d

如何将Blender模型导入Panda3d

两种方法&#xff0c;使用Blender插件&#xff0c;或者Blend2bam。 第一种方法&#xff1a;Blender导出插件 1.对于Blender 2.5, 2.6, 2.7版本&#xff0c;使用&#xff1a;YABEE,导出文件格式.egg 注意&#xff0c;YABEE不适用Blender2.8及以上版本 GitHub - 09th/YABEE: …
阅读更多...
panda3d虚幻引擎--（2）

panda3d虚幻引擎--（2）

目录 前言&#xff08;阿巴阿巴&#xff09; 上帝视角 导入人物模型和动作模型 前言&#xff08;阿巴阿巴&#xff09; 前几天无意间看到了一个叫做panda3d的东西&#xff0c;觉得挺好玩&#xff0c;就翻教程&#xff0c;发现现在中文教程似乎没有那么全面成体系&#xff0…
阅读更多...
python3的3D实战-基于panda3d(1)

python3的3D实战-基于panda3d(1)

Panda 3D 是一个3D游戏引擎&#xff1a;一个 3D 渲染和游戏开发库 开发维护者&#xff1a;迪士尼VR工作室和卡耐基梅隆娱乐技术中心 授权协议&#xff1a;BSD 类继承自ShowBase。这个类加载大多数其他Panda3D模块&#xff0c;并导致3D窗口出现。 run()方法包含Panda3D主循环…
阅读更多...
python panda3d教程_panda3d学习笔记（一）Hello World

python panda3d教程_panda3d学习笔记（一）Hello World

终于还是把电脑上的游戏（CS1.6和SC2）打腻了=_=，在无聊的双休，作业又写完的情况下怎么打发时间？ 所以还是决定学一款游戏制作的库，我的MX250貌似带不动虚幻系列的引擎，在github上翻大佬的repo时，看到了panda3d这个3d游戏制作库，话不多说，打开官方的tutorial，开始学习…
阅读更多...
panda3d场景的主要状态

panda3d场景的主要状态

场景的状态包括位置、方向、缩放比例、物体朝向、颜色、可见性、透明度、相机等。 最常改变的是位置和方向。 panda3d的默认坐标系&#xff1a;X向右&#xff0c;Y向前&#xff0c;Z向上。 对象方向使用欧拉角度坐标&#xff1b;由航向&#xff08;Heading|Yaw&#xf…
阅读更多...
Panda3d如何获取到可用的模型？Maya、3D Max、OBJ等3D格式转换为egg、gltf文件

Panda3d如何获取到可用的模型？Maya、3D Max、OBJ等3D格式转换为egg、gltf文件

​ 使用Panda3d进行3D环境建模也有一段时间了&#xff0c;真的是被折磨的头秃。。。不过也不得不说&#xff0c;Panda3D也确实是一个比较优秀的3D游戏引擎&#xff0c;还是能满足你的大部分需要的。 ​ 如果你在深入使用Panda3d后&#xff0c;我相信有个问题那绝对是让人头大的…
阅读更多...
Panda3D如何加载obj格式的3D模型文件

Panda3D如何加载obj格式的3D模型文件

​ 在上文中&#xff0c;讲了如何将max、obj、mb、fbx等主流格式的3D模型文件转换为egg、gltf格式&#xff0c;Panda3D可以加载的格式。在上文末尾&#xff0c;博主临时看到了一种方式&#xff0c;可以让Panda3d直接加载obj格式的文件&#xff0c;因此本文来专门看下如何实现。…
阅读更多...
Panda3D 初学者教程（一）

Panda3D 初学者教程（一）

Panda3D 初学者教程&#xff08;一&#xff09; 原文链接 原文 Lesson 1 Hello World In which we learn how to make and run a Panda3D instance, and how to load and manipulate models. At it’s most basic, running a Panda3D program is quite simple: create a …
阅读更多...
panda3d虚幻引擎--（1）

panda3d虚幻引擎--（1）

目录 前言&#xff08;阿巴阿巴&#xff09; 安装 调整窗口 导入环境 前言&#xff08;阿巴阿巴&#xff09; 前几天无意间看到了一个叫做panda3d的东西&#xff0c;觉得挺好玩&#xff0c;就翻教程&#xff0c;发现现在中文教程似乎没有那么全面成体系&#xff0c;大部分…
阅读更多...
图解 Panda3D引擎开发入门

图解 Panda3D引擎开发入门

Panda3D 是一个 3D 渲染和游戏开发框架&#xff0c;可以在这个框架下使用 Python 和 C 。Panda3D 是开源软件&#xff0c; 它的许可证让它可以用于任何用途&#xff0c; 包括商业用途。本文使用Panda3D 1.7.0版本&#xff0c;其最新稳定版本是1.7.2。可在官网下载最新稳定版本。…
阅读更多...
3D游戏物理开发引擎Panda3D基础

3D游戏物理开发引擎Panda3D基础

文章目录 Panda3D场景安排模型加载渲染属性任务任务链事件处理主循环 视角相机阴影环境灯方向灯 控制key-events DirectGui碰撞检测后续 Panda3D场景安排 ​ Panda3D将其对象存储在场景图中&#xff0c;从本质上讲&#xff0c;这是一个对象的层次结构&#xff0c;称为节点。 ​…
阅读更多...
推荐文章

Copyright @ 2022~2023