すべてのレンダリングがテクスチャに適していますか？ - three.js

それで、そのシーンには地球が軸、地球周りを回転する月、および日食の効果をシミュレートするのに役立つ右の光源が含まれます。以前は影や変形をしていたので簡単だと思っていましたが、問題が発生しました。

私たちのテンプレートには、次のものがあります。

// For the assignment where a texture is required you should
// deactivate the Detector and use ONLY the CanvasRenderer. There are some
// issues in using waht are called Cross Domain images for textures. You
// can get more details by looking up WebGL and CORS using Google search.
// if ( Detector.webgl )
// var renderer = new THREE.WebGLRenderer();
// else
var renderer = new THREE.CanvasRenderer();

私の問題は、私がそれを残すと、スポットライトが場面に現れないことです。しかし、警告されたように、私が Detectorテクスチャはうまくいきませんでした。

しかし、私はテクスチャとスポットライトの両方が必要です。これを回避するにはどうしたらいいですか？

回答：

あなたは混乱しています。検出器。webglは、ブラウザ上のWebGLのサポートのみをチェックします。以下のコードは、現在のブラウザがWebGLをサポートしている場合はWebGLレンダラーを使用し、WebGLサポートがない場合はCanvasRendererを使用します。

   if ( Detector.webgl )
var renderer = new THREE.WebGLRenderer();
else
var renderer = new THREE.CanvasRenderer();

WebGLを使用すると、テクスチャの読み込みはクロスドメインの問題になります。 Webサーバーやローカルサーバーのいずれかでコードを実行するのがベストです http://www.wampserver.com/en/ Windowsまたは https://www.mamp.info/en/ Mac用。またはnpm-package like https://github.com/tapio/live-server.

私が知る限り、シャドウはCSSCanvasRenderでサポートされていません。私はあなたの課題の頭に明確にするように頼んでいます。