包含个人 three.js 库时的意外行为答案

【问题标题】：unexpected behavior when including a personal three.js library包含个人 three.js 库时的意外行为
【发布时间】：2017-05-06 19:39:11
【问题描述】：

警告：以下是凭经验确定的。

如果您在 Aframe 中编写应用程序，请注意您不需要在 html 中包含 three.js 库，因为 AFrame 附带了它自己的three.js 版本以及您应用程序的非 Aframe 部分也可以使用这个版本的three.js。事实上，你不仅不需要它，你绝对应该不包含它。

如果您包含自己的 three.js 版本，那么 AFrame 将使用它而不是构建它的版本。虽然大多数情况下这不会导致问题，但它可能会导致不可预知的结果。例如，我正在混合 Aframe-master.js v0.5，它假设 three.js v84 和 src'ing 在three.js v85 中，我收到以下错误消息：

Uncaught Error: `Entity.setObject3D` was called with an object that was not an instance of THREE.Object3D.
    at HTMLElement.value (aframe-master.js:72729)
    at aframe-master.js:66470
    at aframe-master.js:48132
    at ObjectLoader.parse (Three.js:32979)
    at Three.js:32938
    at XMLHttpRequest.<anonymous> (Three.js:29098)

经过大量研究，我确定这是因为在three.js v85 中他们dropped the blendCharacter object 但aframe-master v0.5 是针对仍然有它并假设它存在的three.js v84 构建的。

我运行混合版本有一段时间了，所以这是一个微妙的错误。如果您确实遇到了情况，您肯定会遇到其他错误。我只是在记录这一点，因为我花了半天时间试图弄清楚这一点，也许我可以免去其他人的麻烦。

【问题讨论】：

标签： three.js aframe

【解决方案1】：

如果使用 AFrame，请不要在 html 中包含 three.js：

<!doctype html>
<html lang="en">
<head>
    <title>A-frame controller test</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <script src="lib/aframe-master.js"></script>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="lib/Three.js"></script> <!-- remove this -->
  <script src="lib/grab.js"></script> 
  <script src="js/main.js"></script>
    <a-scene>

查看控制台，确保 Aframe 和 three.WebGlRenderer 使用相同的版本：

不好（混合了三个.js 0.84 和 0.85）：

A-Frame Version: 0.5.0 (Date 03-05-2017, Commit #31d05b0)
aframe-master.js:76936 three Version: ^0.84.0
aframe-master.js:76937 WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
THREE.WebGLRenderer 85dev

好（到处都是three.js v.84）：

A-Frame Version: 0.5.0 (Date 03-05-2017, Commit #31d05b0)
aframe-master.js:76936three Version: ^0.84.0
aframe-master.js:76937WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
aframe-master.js:24581 THREE.WebGLRenderer 84

【讨论】：