学习新技术
2022.2月开始由于工作需要,学习了WebGL标准语法和使用以及Three.js框架的使用,它们之间的关系类似于Java和以Java为基础的各个大神写的各种框架。WebGL是一种标准性语言,使用它需要了解许多计算机图形学的基础知识;而Three.js是一个非常简便的框架,它不需要你学习计算机图形相关的理论,它提供了许多API,用户只需要简单的调用即可。
THREE.js使用过程中遇到的问题
1.three/examples/jsm中代码引用
问题描述:在three/exmaples/jsm中有许多有用的工具可以让我们在使用过程中非常方便,比如说OrbitControls.js这是一个轨道控制器,非常好用,但编译时往往就是会告诉你需要npm install xxxx/xxxx/xxxx/OrbitControls.js
解决方案:
我在网上搜索时一般都是下载‘import-three-example’然后在vue.config.js中配置,在github中也有相关的文章,但最后说three修改了引用方式不再维护,最后解决方式是 npm i @types/three --save-dev
2.three.js的光源阴影出不来
问题描述:在three.js中可以存在多光源,实际情况下光源就会产生影子,开发时出现了很多次明明感觉代码是正确的,但实际阴影出不来的情况,其实原因很可能是某一步骤漏写了
解决方案:
为了以后不漏写任何步骤,故列明生成影子需要执行的操作
- renderer.shadowMap.enabled = true 渲染器需要设置可生成阴影
- mesh.receiveShadow = true 物体可接收阴影
- Light.castShadow = true;光源可以生成阴影
Light.target = mesh;光源的面向对象
3.天空盒不显示
问题1描述:在使用cube的着色器时一直报错
runtime-core.esm-bundler.js?5c40:218 Uncaught TypeError: Cannot set properties of undefined (setting 'value')
at Proxy.setSkybox (App.vue?3dfd:171)
at Proxy.init (App.vue?3dfd:138)
at Proxy.mounted (App.vue?3dfd:26)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164)
at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:2667)
at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:356)
at render (runtime-core.esm-bundler.js?5c40:5643)
at mount (runtime-core.esm-bundler.js?5c40:3877)
at Object.app.mount (runtime-dom.esm-bundler.js?830f:1590)
其实问题一直在这里
cubeShader.uniforms['tCube'].value = cubeMap;
cubeShader一直不存在‘tCube’这一项,直接设置不存在的tCube的value值是会报错的
问题2描述
按照以前的写法设置’tCube’一直加载不出来天空盒,提示
ERROR: 0:177: 'envColor' : undeclared identifier
ERROR: 0:177: '=' : dimension mismatch
ERROR: 0:177: 'assign' : cannot convert from 'const highp float' to 'out highp 4-component vector of float'
解决方案:
在three.js的0.138.0(npm install的版本中),THREE.shaderLib[‘cube’]着色器的内容已经修改了。
以前的版本写法:
var cubeShader = THREE.ShaderLib[ 'cube' ]; //传入纹理图片
cubeShader.uniforms[ 'tCube' ].value = cubeMap;
//着色器材质
var skyBoxMaterial = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
side: THREE.BackSide
} );
现在的版本写法:
var cubeShader = THREE.ShaderLib['cube']; //传入纹理图片
cubeShader.uniforms['envMap'].value = cubeMap
//着色器材质
var skyBoxMaterial = new THREE.ShaderMaterial({
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: false,
side: THREE.BackSide
});