威格灵

很多网站的页面在按F12打开浏览器开发者工具时会出现自动跳转或其它无法正常使用的情况。 这里处理一种使用 https://github.com/fz6m/console-ban 的情况。 首先 打开一个非目标页面如百毒，然后打开开发者工具，网络模块，保留日志， 然后 在当前窗口地址栏输入目标页面，回车跳转，此时目标页面会瞬间跳转到其它页面，但网络日志里记录了众多的url， 找到 h...

https://github.com/mrdoob/three.js/releases/tag/r148 世界坐标的三维坐标系可视标记 THREE.AxesHelper 有红绿蓝三个轴，表现xyz三个维度。三个轴的线有长度，但没有明确的文字标识。 THREE.Sprite是永远面朝摄像机的平面，可以设置位置和其自身的xy。 结合canvas绘制文字作为sprite的材质将sprite放在axeshelper轴线的末端，可以使世界坐标可视标记带上文...

全屏let original_width=800;let original_height=350;let canvas=document.getElementById("canvas");let button=document.getElementById("button");button.onclick=function(){CanvasResizeManager.addFullScreenListener()};let head=document.getElementsByTagName("head")[0];let cannon_script=document.createElement("script");cannon_script.src="http:...

Cannon.js是一个Web的轻量级3D物理引擎，包括简单的碰撞检测，各种体形，接触，摩擦和约束。可用于游戏的刚体模拟。用JavaScript编写的，可以与任何支持浏览器的渲染或游戏引擎一起使用。 cannonjs官网：http://schteppe.github.io/cannon.js/ cannonjs分支：https://github.com/pmndrs/cannon-es/ let head=document.getElementsByTagName("head")[0];let c...

本例参照 https://threejsfundamentals.org/threejs/lessons/zh_cn/threejs-picking.html 原理： 首先，物体有id，并且自身颜色根据id数值计算出的， 然后，获取鼠标点击位置的1像素的颜色值，反推id，将对应物体就移除。 缺陷就是基于颜色，如果场景中颜色很多，及物体的颜色比较相近，在视野比较远时-物体离相机很远，会出现‘隔山打牛’的情况。 let head...

let three_script=document.createElement("script");three_script.src="http://www.gaohaiyan.com/dws/walt/three_r132_min.js";let head=document.getElementsByTagName("head")[0];head.appendChild(three_script);three_script.onload=function(){let cinema=new Cinema();cinema.render()};class MeshBasicPlaneActor{constructor(){let mat=new THREE.MeshB...

let three_script=document.createElement("script");three_script.src="http://www.gaohaiyan.com/dws/walt/three_r132_min.js";let head=document.getElementsByTagName("head")[0];head.appendChild(three_script);three_script.onload=function(){let cinema=new Cinema();cinema.render()};class SpherePointsCloudActor{constructor(color,radius,posit...

threejs里有：环境光 、平行光 、点光 、聚光 、半球光 、面光。 AmbientLight（环境光）颜色会直接作用物体的当前颜色上。 DirectionalLight（平行光源）平行光源，例如太阳光。 PointLight（点光源）一个点射出向所有方向。 SpotLight（聚光灯）聚光灯效果。例如台灯。 HemisphereLight（半球光）创造自然室外光线，模拟反光和光线微弱的天空。 AreaLight...

W、S、A、D 或 上、下、左、右 按键。 let new_script=document.createElement("script");new_script.src="http://www.gaohaiyan.com/dws/walt/three_r132_min.js";let head=document.getElementsByTagName("head")[0];head.appendChild(new_script);new_script.onload=function(){let cinema=new Cinema();cinema.animate()};class Cinema{constructor(){this.c...

let three_script=document.createElement("script");three_script.src="http://www.gaohaiyan.com/dws/walt/three_r132_min.js";let head=document.getElementsByTagName("head")[0];head.appendChild(three_script);three_script.onload=function(){main()};class TextLegendSprite{constructor(text="",position=new THREE.Vector3(0,0,0),w=2,h=2,textcolor="...

let three_script=document.createElement("script");three_script.src="http://www.gaohaiyan.com/dws/walt/three_r132_min.js";let head=document.getElementsByTagName("head")[0];head.appendChild(three_script);three_script.onload=function(){main()};class Cinema{constructor(){let canvas=document.getElementById("canvas");canvas.width=600;canvas....

开启交互 let box=document.getElementById("box");box.width=700;box.height=400;let three_script=document.createElement("script");three_script.src="http://www.gaohaiyan.com/dws/walt/three_r132_min.js";let head=document.getElementsByTagName("head")[0];head.appendChild(three_script);let controls;three_script.onload=function(){create3d()}...

let box=document.getElementById("box");box.width=700;box.height=500;let fflate_script=document.createElement("script");fflate_script.src="http://www.gaohaiyan.com/dws/walt/fflate.min.js";let three_script=document.createElement("script");three_script.src="http://www.gaohaiyan.com/dws/walt/three_r132_min.js";let head=document.getElem...

let box=document.getElementById("box");box.width=400;box.height=400;let new_script=document.createElement("script");new_script.src="http://www.gaohaiyan.com/dws/walt/three_r132_min.js";let head=document.getElementsByTagName("head")[0];head.appendChild(new_script);new_script.onload=function(){create3d()};class ImageActor{constructor...

1.场景 2.相机 3.物体 4.场景渲染器 [crayon-6637892501a51340301662/] 进一步添加鼠标控制视图交互的效果： [crayon-6637892501a5b291878387/] - end

js库， 使用npm以module方式安装，然后import后调用api； 使用传统的script标签，属性src="xxx.js"引入； 还可以在脚本中动态的document.createElement("script")，然后指定属性src="three.xxx.js"最后获取head标签并appendChild(new_script)。 threejs中有个自动控制相机视角和鼠标交互的api叫THREE.OrbitControls，它只在示例代码中，要想使用须要自己导...