既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上Go语言开发知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
- 场景:场景就像虚拟空间,具有坐标信息并设置渲染的内容和位置。因此,我们可以添加多个对象(3D 模型)、灯光并移除它们。
- 渲染器:它显示/绘制场景。Threejs 使用 webGL 进行渲染和图像处理。
- 相机:有多种类型的相机。我们将使用透视相机,它可以根据您的观察点工作并根据观察位置改变对象大小。
// inside BeagleARView component
const initScene = (gl, session) => {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
75, // fov (angle, field of view)
window.innerWidth / window.innerHeight, // aspect
0.1, // frustum near length
1000, // frustum far length
);
现在在这个 initScene 函数中,我们将加载我们的 3D 模型
//add this at top below threejs import
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const Beagle = require('./beagle.glb')
//continue now in init function
// load our gltf model
var loader = new GLTFLoader();
loader.load(
Beagle,
gltf => {
model = gltf.scene;
model.scale.set(1.8, 1.8, 1.8);
model.castShadow = true;
model.receiveShadow = true;
mixer = new THREE.AnimationMixer(model);
action = mixer.clipAction(gltf.animations[0]);
action.setLoop(THREE.LoopRepeat, 15);
},
() => {},
error => console.error(error),
);
// we have only loaded the object haven't added that in scene now.
// we will do it later
在同一个 fnc 中,我们现在需要在我们的 3D 模型上添加一些光。我们将使用聚光灯来正确聚焦对象并获得投射阴影功能。
spotLight = new THREE.SpotLight(lightSpotColor, lightSpotIntensity);
spotLight.position.set(1, 1, -9);
spotLight.target = scene;
//spotLight.castShadow = true; // for now we will not work on shadows
scene.add(spotLight);
我们已经完成了场景、灯光和 3D 模型加载部分,现在我们将添加最后一个 threejs 设置部分,即渲染器。
// create and configure three.js renderer with XR support
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
autoClear: true,
context: gl,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.xr.enabled = true;
renderer.xr.setReferenceSpaceType('local');
renderer.xr.setSession(session);
// simple sprite to indicate detected surfaces
reticle = new THREE.Mesh(
new THREE.RingBufferGeometry(0.12, 0.15, 20).rotateX(-Math.PI / 2),
new THREE.MeshPhongMaterial({ color: 0x0fff00 }),
);
// we will update it's matrix later using WebXR hit test pose matrix
reticle.matrixAutoUpdate = false;
reticle.visible = false;
scene.add(reticle);
}
// closing intiScene
在上面的代码中,我们添加了矩形对象,这将有助于识别我们指向相机的表面区域。
reticle image
在 initScene 中设置完所有 threejs 之后,我们现在将开始做与 webxrSession 相关的事情,我们称之为 initScene。
如果没有用户交互,我们将无法启动 webxrSession 我们将首先在我们的 jsx 返回中添加一个按钮
const xrButton = useRef(null);
return (
// id xrOverlay will be used later
<div id="xrOverlay">
<button id="xrbutton" ref={xrButton} onClick={onXRButtonClick}>
Start experience
</button>
</div> )
function checkXR() {
if (!window.isSecureContext) {
// show message to use secure connection,
// webXR need https for giving device permission
}
if (navigator.xr) {
xrButton?.current?.disabled = false;
} else {
xrButton?.current?.disabled = true
// show message that this device or browser does not support webXR
}
}
React.useEffect(() => {
checkXR();
}, []);
我们添加了检查是否支持 XR 的功能。现在我们将处理启动 webXR 会话的主要部分,其中包含我们需要的命中和放置功能所需的功能。
我们将要求immersive session提供dom-overlay, local, and hit-test功能。
- dom-overlay:它允许我们在会话时在屏幕上添加 html DOM 内容。
- local:在会话开始时启用您的设备作为视图位置。
- hit-test:它提供了我们击中并想要放置我们的 3D 模型的表面信息。
我们可以根据我们的需要请求更多功能,例如hand-tracking, depth sensing等。
let xrSession = null;
let xrRefSpace = null;
let xrHitTestSource = null;
function onXRButtonClick() {
if (!xrSession) {
navigator.xr
.requestSession('immersive-ar', {
optionalFeatures: ['dom-overlay'],
requiredFeatures: ['local', 'hit-test'],
domOverlay: { root: document.getElementById('xrOverlay') },
})
.then(onSessionStarted, onRequestSessionError);
} else {
xrSession.end();
}
}
我们已经通过document.getElementById(‘xrOverlay’)了,任何对此 DOM 的输入和交互都只能用于 xrSession 操作。
function onSessionStarted(session) {
setIsWebXRStarted(true);
xrSession = session;
// create a canvas element and WebGL context for rendering
session.addEventListener('end', onSessionEnded);
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
// here we have register source from where we want to get hit test result in surronding
![img](https://img-blog.csdnimg.cn/img_convert/9fe12974355c158c032df70fd415d830.png)
![img](https://img-blog.csdnimg.cn/img_convert/796a02bab5c8853ca7a05f4f709708ce.png)
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化的资料的朋友,可以添加戳这里获取](https://bbs.csdn.net/topics/618658159)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**
成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化的资料的朋友,可以添加戳这里获取](https://bbs.csdn.net/topics/618658159)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**