THREE

Posted 2023-04-26 aichitudousien

@

目录

• 概述
• aframe核心代码
• null

概述

如有不明白的可以加QQ：2354528292；wx: aichitudousien
更多教学视频请访问：https://space.bilibili.com/236087412

使用aframe加载模型，然后使用语音识别功能对模型进行控制，模型可做起跳，奔跑等动作，详细请看视频：

[video(video-SoCPRoxD-1636879210261)(type-csdn)(url-https://live.csdn.net/v/embed/179928)(image-https://vedu.csdnimg.cn/61edd565896b42509b97a59beac23675/snapshots/08c73dbd239e4139a27b635ecd2dd692-00003.jpg)(title-Three.js + 语音识别控制模型动画)]

aframe核心代码

  <a-scene>
    <div class="dropdown">
      <el-select v-model="walkAnimation" placeholder="请选择">
        <el-option v-for="(item, key) in animate" :key="key" :label="item" :value="key">
        </el-option>
      </el-select>
    </div>
    <div class="voice">
      <el-button @click="startVoice" type="primary" round> text </el-button>
    </div>
    <a-sky src="sky.jpg"> </a-sky>
    <a-entity id="walker2" position="0 0 -5" visible="true">
      <a-entity
        gltf-model="model/dino.glb"
        id="dino"
        scale="1.5 1.5 1.5"
        animation-mixer="clip:Idle"
        rotation="0 90 0"
        shadow="cast: true"
      >
      </a-entity>
    </a-entity>
  </a-scene>

THREE.js - 无法读取未定义的属性 'lib' (THREE.ShaderUtils.lib["normal"])

【中文标题】THREE.js - 无法读取未定义的属性 \'lib\' (THREE.ShaderUtils.lib["normal"])

【英文标题】：THREE.js - Cannot read property 'lib' of undefined (THREE.ShaderUtils.lib["normal"])THREE.js - 无法读取未定义的属性 'lib' (THREE.ShaderUtils.lib["normal"])

【发布时间】：2013-01-04 21:52:10

【问题描述】：

我正在完成 Oreilly 编写的 WebGL 入门书中的练习。

以下行会导致运行时错误。我用谷歌搜索并没有看到其他人有这个问题，所以我做错了什么？

var specularMap= THREE.ImageUtils.loadTexture("WebGLBook/images/earth_specular_2048.jpg");

var shader   = THREE.ShaderUtils.lib[ "normal" ]; <-- fails
var uniforms = THREE.UniformsUtils.clone(shader.uniforms);

uniforms['tNormal'].texture   = normalMap; 
uniforms['tDiffuse'].texture  = surfaceMap;

指出的行失败并出现以下错误：

Uncaught TypeError: Cannot read property 'lib' of undefined solar-system-spec-map.html:60
Earth.createGlobe solar-system-spec-map.html:60
Earth.init solar-system-spec-map.html:51
EarthApp.init solar-system-spec-map.html:33
(anonymous function) solar-system-spec-map.html:93
deferred.resolveWith jquery-1.6.4.js:1016
jQuery.extend.ready jquery-1.6.4.js:437
DOMContentLoaded

还有一点奇怪的是，“ShaderUtils”并没有在 THREE.js 文档中列出……http://mrdoob.github.com/three.js/docs/55/

发生了什么事？！

【参考方案1】：

命名约定已更改，现在应该可以使用了

var shader = THREE.ShaderLib[ "normalmap" ];

【讨论】：

见鬼，我知道它必须是这样的。谢谢你！

我遇到了同样的问题； var 制服 = THREE.UniformsUtils.clone(shader.uniforms);制服['tNormal'].texture = normalMap; .texture 调用失败。这也改变了吗？如果是这样，关于 Three.js 着色器的最新教程在哪里？

在 r55 中 THREE.ShaderUtils.lib[ "normal" ] 被移动到 THREE.ShaderLib[ "normalmap" ]。

哦，谢谢你的更新，有什么区别？编辑答案。

【参考方案2】：

来自 github 仓库：

“如果您使用 libs 文件夹中较旧的 Three.js，则本书的代码有效。 从 r50 开始，就简单多了，只需将贴图设置为 MeshPhongMaterial 的属性，像这样：

var material = new THREE.MeshPhongMaterial(
    map: earthSurfaceMap,
    normalMap: earthNormalMap,
    specularMap: earthSpecularMap);

就是这样，不需要制服或computeTangents()。”

成功了！

【讨论】：

好东西！谢谢！