Three.js学习随笔

学习新技术

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中可以存在多光源，实际情况下光源就会产生影子，开发时出现了很多次明明感觉代码是正确的，但实际阴影出不来的情况，其实原因很可能是某一步骤漏写了
解决方案：
为了以后不漏写任何步骤，故列明生成影子需要执行的操作

1. renderer.shadowMap.enabled = true 渲染器需要设置可生成阴影
2. mesh.receiveShadow = true 物体可接收阴影
3. 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
      });