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       });