小编Mug*_*n87的帖子
Cypress：监控控制台输出
我知道 Cypress 可以在浏览器控制台中打印调试信息，但是它可以在测试期间从控制台读取数据吗？
我正在开发一个由 Three.js 驱动的应用程序，所以我无法正确测试应用程序的 3d 方面，但我想在浏览器控制台中监听 javascript 错误。
有可能吗？
推荐指数
解决办法
查看次数
为什么我无法在 Three.js 中投射或接收阴影
我对此很陌生，我正在尝试在我刚刚制作的对象上创建闪电和阴影。正如您在下面的结果图片中看到的那样，它们实际上都没有投射或接收阴影。\n我已经为渲染器启用了阴影映射，并且还为我的所有对象启用了阴影投射和接收。我究竟做错了什么？
\n
<head>\n <meta charset=utf-8>\n <title>Three.js Object Tester</title>\n <style>\n body { margin: 0; overflow: hidden; }\n canvas { width: 100%; height: 100% }\n </style>\n</head>\n\n<body>\n\n<script type="module">\n import * as THREE from \'./js-r119/build/three.module.js\';\n import { TrackballControls } from \'./js-r119/examples/jsm/controls/TrackballControls.js\';\n\n var WIDTH, HEIGHT, aspectRatio;\n var renderer;\n var scene, camera;\n var controls;\n var mesh;\n\n init();\n animate();\n function init() {\n HEIGHT = window.innerHeight;\n WIDTH = window.innerWidth;\n aspectRatio = WIDTH / HEIGHT;\n\n renderer = new THREE.WebGLRenderer( { antialias: true } );\n renderer.setSize( WIDTH, HEIGHT );\n …推荐指数
解决办法
查看次数
我无法在 Threejs 中加载 GLB 3D 模型
我想用 Threejs 加载 GLB 3D 模型，但它不再工作了。我按照文档中的步骤操作，但我被卡住了。
import * as THREE from './node_modules/three/src/Three.js';
import { GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const loader = new GLTFLoader();
loader.load( './cargo-ship/source/cargo_ship.glb', function ( gltf ) {
scene.add( gltf.scene );
console.log('test');
}, undefined, function ( error ) {
console.error( error );
} );
renderer.render(scene, camera);
推荐指数
解决办法
查看次数
导入 GLTFLoaders 时出现的三个 js 问题
我的 WordPress 页面上的 Three.js 有两个问题。
第一：我无法导入 GLTFLoader。错误消息显示：“未捕获类型错误：无法解析模块说明符“THREE/examples/jsm/loaders/GLTFLoader.js”。相对引用必须以“/”、“./”或“../”开头。 ” 然而，当我输入“/”时，它会尝试从我的服务器导入，如果我输入“//”，它会查找 https://two/examples/。这也不起作用。
在这里你可以看到我的部分代码：
<script type="module">
// Find the latest version by visiting https://cdn.skypack.dev/three.
import * as THREE from '//cdn.skypack.dev/three@0.129.0';
import {GLTFLoader} from 'THREE/examples/jsm/loaders/GLTFLoader.js'
</script>
<script>
//load 3d model
const loader = new GLTFLoader();
loader.load( 'https://www.historia3d.pl/wp-content/uploads/2021/05/mini_3D02.glb', function ( gltf ) {
model = gltf.scene.children[0];
model.scale.set(0.5,0.5,0.5);
scene.add( gltf.scene );
},
undefined, function ( error ) {
console.error( error );
} );
</script>
第二：我想使用 OrbitControls。但我只想在光标悬停在画布上时检查鼠标位置。
代码：
controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);
推荐指数
解决办法
查看次数
如何在Three.js中获取相机上可见的所有对象
我需要向网格体延迟加载纹理，并且仅加载相机可见的纹理。在 Raycaster 中没有百万个向量的情况下我该如何做到这一点？
推荐指数
解决办法
查看次数
使用 Three.js 加载图像纹理时出现黑屏
黑屏发生在这个脚本中：
var renderer;
var scene;
var camera;
var mesh;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
//Scene init
scene = new THREE.Scene();
//Camera init
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 1000);
scene.add(camera);
var geometry = new THREE.PlaneGeometry( 500, 500, 10, 10 );
var texture = new THREE.TextureLoader().load( './annie-spratt-kG-ZwDuQ8ME-unsplash.jpg' );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer.render(scene, camera,mesh);
我明确地执行此操作，但出现黑屏并且图像无法加载。我该如何解决这个问题？
推荐指数
解决办法
查看次数
Audio.play() 导致微小的延迟
问题： 我使用 Three.js 制作了一个类似 flappybird 的游戏。每次我点击屏幕时，都会发出“拍打”的声音。然而，播放此音频会导致轻微的延迟，从而使游戏不太流畅。如果我删除声音，所有滞后都会消失。滞后仅在播放音频时出现，而不是在音频播放时出现。
音频设置： 首先我设置音频如下：
var soundFly = new Audio();
soundFly.src = "https://dl.dropbox.com/s/tj7mxg26egzo4zx/flap.wav?dl=0";
soundFly.preload = "auto";
接下来，我在开始游戏时加载所有音频（单击按钮时）：
function loadAudio()
{
soundFly.play().then(function () {
soundFly.pause()
}).catch(function (e) {
console.log("soundFly - " + e)
});
};
然后，每次我触摸屏幕时，我都会播放声音：
this.soundFly.play().catch(function (e) {
console.log("soundFly - " + e)
})
这很好用，但会出现微小的滞后。
渲染： 这就是我设置场景渲染的方式：
var clock = new THREE.Clock();
var delta=0;
clock.start(); //makes rendering timedependent
var render = function ()
{
delta = clock.getDelta();
//All movement is set using speed*delta
requestAnimationFrame(render);
renderer.render(scene, camera);
}; …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何在tensorflowjs中将张量转换为Uint8Array数组
我用来model.predict()通过tensorflow.js输出张量A（大小：512 * 512 * 3），然后将其重塑为A.reshape（512 * 512 * 3）。但现在我想将此张量转换为数组，以便我可以将它与three.js. 如何解决这个问题呢？
推荐指数
解决办法
查看次数
有没有办法使用 Three.js LoadingManager 加载视频？
我使用 THREE.LoadingManager 与多个加载器，在显示我的应用程序之前管理纹理、模型、图像和立方体纹理的加载。
这允许我显示一个显示全局加载进度的加载栏，并且它工作得很好：
const loadingManager = new LoadingManager();
// ...
smaaImageLoader = new SMAAImageLoader(loadingManager);
textureLoader = new TextureLoader(loadingManager);
gltfLoader = new GLTFLoader(loadingManager);
cubeTextureLoader = new CubeTextureLoader(loadingManager);
但我很难以这种方式加载视频。我希望有一个视频加载器，我可以这样使用：
videoLoader = new VideoLoader(loadingManager); // Can't do that
如果加载视频的唯一方法是在 javascript 中“手动”执行，有什么方法可以与 loadingManager 沟通视频正在挂起，然后加载？
谢谢
推荐指数
解决办法
查看次数
三个 JS 在 gltf 上投射阴影不起作用
我还是新人，为什么模型没有投射任何阴影？我启用了环境光和定向光
// import model
const loader = new THREE.GLTFLoader();
loader.load( 'object/GalaxyS10.gltf', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
}
);
loader.castShadow = true;
推荐指数
解决办法
查看次数
在three.js中在页面滚动时旋转网格
我想在页面滚动时旋转一个对象，但我无法使其正常工作。到目前为止，我在页面加载时更新对象的旋转是：
mesh.rotation.y = window.pageYOffset;
然而，这只会在页面加载时更新对象，而不会在滚动时进一步更新它。我知道对于相机，您必须更新投影矩阵才能在对象/网格上拥有交互式相机，但是默认情况下这似乎是启用的（mesh.updateMatrix），我仍然无法使其工作。我究竟做错了什么？
推荐指数
解决办法
查看次数