glbxz.com 可以下载glb素材模型和gltf素材模型
下载最新的 three.min.js 和 GLTFLoader.js
不是的,可以计算的
什么问题什么问题
你竟然扫出来了。我直接下载的DEMO 发现很多JS文件已经失效了。。
原理:一般使用射线new THREE.Raycaster()拾取几何对象, 根据鼠标屏幕坐标转化为threejs三维坐标去锁定模型最后在编写你要做的操作。
相关方法使用去官网找文档
给你个大致例子吧
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
window.addEventListener( 'click', ()=>{
// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
let ray = raycaster.setFromCamera(args)
// 获取raycaster直线和所有模型相交的数组集合
let tar = ray.intersectObjects(args)[0]
//你要进行的操作
...
}, false )
重点来了
官网文档地址:https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
还有偷懒的方法(官方有封装好的相关库,DragControls.js )和相关demo
去threejs官方文档里搜上面的关键字就行。
如果你再不会那我真的没办法了
按钮在页面底部中间 可能是你的浏览器适配问题 你拖动找一下。或者在浏览器控制台输入如下:
document.querySelector(".switch-button").click();
用代码触发。
Access to XMLHttpRequest at
'file:///C:/%E5%AD%A6%E4%B9%A0/WebAR/models/multi.glb'
from origin
说的很清楚 你使用的file协议是不行的,你肯定是下载代码后直接打开的。这样不行。你的启用一个http或https服务器。 走http(s)协议。
Caddy是一个webserver
caddyfile是其配置文件
你也可以用其他的webserver
浏览器打开:你需要输入 协议+域名+端口
如你的图里是mac上的safari
协议https 只是没显示
域名127.0.0.1
端口5500
最后一段threejs.html是虚拟目录
ar.js 需要富强访问另外识别率跟底座图片的质量有大关系如大小平整度光线等
给你个图片地址吧
https://images2015.cnblogs.com/blog/715314/201609/715314-20160925120653667-1202477355.png
用打印机打印,我的识别率很高大小给你参考如下A4纸
老师给的失效了 你可以去官网或者百度一个