Chao的随笔
Search K

Appearance

2024年1月随笔 ​

Threejs加载图片纹理旋转到背面后纹理消失 ​

这个问题可能是由于使用的材质是单面材质（THREE.MeshBasicMaterial或THREE.MeshLambertMaterial等），这种材质只会渲染模型的正面，而不会渲染模型的背面。当你旋转到模型的背面时，就会看不到纹理。

如果你想让模型的背面也显示纹理，你可以使用双面材质（THREE.MeshBasicMaterial或THREE.MeshLambertMaterial等），并设置其side属性为THREE.DoubleSide。以下是一个示例：

js
var texture = new THREE.TextureLoader().load('textures/crate.gif');
var material = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.DoubleSide  // 设置为双面材质
});

这样，无论你从哪个角度查看模型，都能看到纹理

Threejs加载图片如何设置底色透明 ​

如果你希望加载的图片没有底色，你需要使用带有透明通道的图片格式，例如PNG或者GIF。然后在创建材质时，需要将transparent属性设置为true。以下是一个示例：

js
var textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/your/image.png', function(texture) {
  var material = new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true  // 设置为透明
  });
  // 创建网格并添加到场景中...
});

Threejs如何设置载入模型调整位置、旋转等 ​

js
// 加载模型
const loader = new FBXLoader();
loader.load('/models/three.fbx', (object) => {
    
    object.traverse(function (child) {
        if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });
    // 在此可修改加载的模型位置，或设置旋转等操作
    object.position.y += 120;
    scene.add(object);
});

Threejs加载模型后旋转到模型底部透明 ​

这个问题可能是由于模型的面（面是由三角形顶点组成的）的绘制顺序（正面或背面）导致的。在Three.js中，你可以尝试以下几种解决方法：

修改材质的双面属性1：在Three.js中，材质有一个属性叫做side，它决定了哪一面是可见的。你可以将其设置为THREE.DoubleSide，这样无论你从哪个方向看，模型都是可见的。以下是一个示例代码：

js
var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide
});

修改模型的所有材质：如果你的模型有多个材质，你需要遍历模型的所有子对象，并将每个子对象的材质的side属性设置为THREE.DoubleSide。以下是一个示例代码：

js
var loader = new THREE.FBXLoader();
loader.load('../models/UI.fbx', function (object) {
    object.traverse(function (child) {
        if (child.isMesh) {
            child.material.side = THREE.DoubleSide;
        }
    });
    scene.add(object);
});

Threejs修改纹理的偏移来实现图片的上下运动 ​

你可以通过修改纹理的偏移来实现图片的上下运动。Three.js的Texture对象有一个offset属性，它是一个Vector2，表示纹理的偏移。你可以在动画循环中修改这个属性，使纹理上下运动。以下是一个示例代码：

js
// 加载纹理
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('path/to/texture.png');

// 创建材质和网格
var material = new THREE.MeshBasicMaterial({ map: texture });
var geometry = new THREE.PlaneGeometry(1, 1);
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 动画循环
function animate() {
    requestAnimationFrame(animate);

    // 修改纹理的偏移
    texture.offset.y += 0.01;
    if (texture.offset.y > 1) {
        texture.offset.y -= 1;
    }

    renderer.render(scene, camera);
}
animate();

在这个代码中，我们在每一帧都增加纹理的偏移，使得纹理看起来像是在上下运动。当偏移超过1时，我们将其减去1，使得纹理能够无缝循环。

Threejs为其中的模型添加点击事件 ​

在Three.js中，你可以使用Raycaster来检测鼠标点击的对象。以下是一个示例代码：

js
// 创建一个Raycaster和一个鼠标向量
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

// 创建一个鼠标点击事件监听器
window.addEventListener('click', function(event) {
    // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围都是 (-1 to +1)
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // 通过摄像机和鼠标位置更新射线
    raycaster.setFromCamera(mouse, camera);

    // 计算物体和射线的焦点
    var intersects = raycaster.intersectObjects(scene.children);

    for (var i = 0; i < intersects.length; i++) {
        // intersects[i].object 是被点击的对象
        console.log('Clicked on', intersects[i].object);
    }
}, false);

在这个代码中，我们首先创建了一个Raycaster和一个鼠标向量。然后，我们添加了一个鼠标点击事件监听器。当用户点击时，我们将鼠标的位置归一化为设备坐标，然后使用Raycaster的setFromCamera方法来更新射线。最后，我们使用Raycaster的intersectObjects方法来计算射线和场景中的物体的交点。这个方法返回一个数组，数组中的每个元素都代表一个交点，其中object属性就是被点击的对象。

如果点击模型识别不准确，可以尝试以下方法：

如果你的渲染器尺寸不是全屏，那么在计算鼠标位置时，你需要考虑到渲染器的实际尺寸和位置。以下是一个示例代码：

js
window.addEventListener('click', function(event) {
    // 获取渲染器的尺寸和位置
    var rect = renderer.domElement.getBoundingClientRect();

    // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围都是 (-1 to +1)
    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

    // 其他代码...
}, false);

在这个代码中，我们首先获取了渲染器的尺寸和位置，然后在计算鼠标位置时，我们减去了渲染器的左上角位置，并除以渲染器的宽度或高度1。

Threej场景中如何彻底删除模型 ​

无商用，转载为了学习记录 转载地址

在Three.js场景中，我们创建了许多的对象，例如模型、灯光、相机等。如果某些模型不再需要使用了，就应该将这些模型从场景中彻底删除，以释放内存并提高性能

单个模型删除 ​

其中mesh是需要删除的模型，geometry和material是其几何体和材质。这些语句将模型从场景中移除，并释放其资源。

js
scene.remove(mesh);
mesh.geometry.dispose();
mesh.material.dispose();

批量删除模型 ​

如果需要删除多个模型，应该将需要删除的模型放入一个数组中，然后遍历这个数组并将它们从场景中删除，这样可以彻底删除多个模型，释放内存，提高性能。

js
var meshes = [ mesh1, mesh2, mesh3 ];
for ( var i = 0; i < meshes.length; i++ ) {
    scene.remove( meshes[ i ] );
    meshes[ i ].geometry.dispose();
    meshes[ i ].material.dispose();
}

整个场景重置 ​

这个语句会遍历整个场景中的每个子对象，并将其从场景中删除，释放内存。这样会比手动删除每个模型更加方便，适合在销毁整个页面时使用。

js
while(scene.children.length > 0){ 
    scene.remove(scene.children[0]); 
}

Threej场景中如何性能优化 ​

合并材质 ​

当场景中包含多个不同的材质时，通常应将它们合并成一个材质，以减少调用WebGL渲染引擎的次数，提高渲染性能。可以使用THREE.MultiMaterial类来实现这个功能。

局部渲染 ​

当只需要渲染场景中的一部分时，应使用THREE.render()方法的第二个参数renderTarget，以渲染到一个离屏缓冲区中，以防止不必要的渲染。

下面是一个使用局部渲染的示例：

js
var renderTarget = new THREE.WebGLRenderTarget( width, height );
​
// 保存原始状态
var oldAutoClearColor = renderer.autoClearColor;
var oldAutoClearDepth = renderer.autoClearDepth;
var oldRenderTarget = renderer.getRenderTarget();
​
renderer.autoClearColor = false; // 禁用清屏
renderer.autoClearDepth = false;
renderer.setRenderTarget( renderTarget );
renderer.render( scene, camera );
​
// 恢复原始状态
renderer.autoClearColor = oldAutoClearColor;
renderer.autoClearDepth = oldAutoClearDepth;
renderer.setRenderTarget( oldRenderTarget );

在这个示例中，我们首先创建了一个离屏缓冲区，然后将渲染器的状态设置为禁用清屏，并指定渲染目标为离屏缓冲区。渲染完毕后，还原渲染器的状态。

正确使用WebGL状态 ​

WebGL有许多状态，例如深度测试、透明度等。如果我们错误地使用这些状态，就会导致WebGL渲染引擎的重复编译，降低渲染性能。

为了避免这种情况，我们应该合理使用WebGL状态。例如，如果不需要深度测试，请关闭深度测试：

js
renderer.state.setDepthTest( false );

如果需要透明度，请将透明度设为1.0:

js
material.opacity = 1.0;

上次更新于: